/* List key-value pairs display */

//** Horizontal offset for forms and lists.
$component-offset-horizontal: 180px !default;

// add .key-value class to <dl> Description list element for inline dt-dl lists
.key-value {
    dt, dd {
        //min-height: 20px; // = line-height ; defined somewhere?
        margin-bottom: 3px;
    }
    dt {
        display: inline-block;
        float: left;
        width: $component-offset-horizontal - 10;
        text-align: left;
        clear: left;
    }
    dt::after {
        content: ": ";
    }

    dd {
        display: block;
        margin-left: $component-offset-horizontal;
        //margin-bottom: 5px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

// for adding an <ul> inside value
dd ul, .multi-value {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

// responsive styles in _state.scss
/* List key-value pairs display */

//** Horizontal offset for forms and lists.
$component-offset-horizontal: 170px !default;

// add .key-value class to <dl> Description list element for inline dt-dl lists
.key-value {
    dt, dd {
        //min-height: 20px; // = line-height ; defined somewhere?
        margin-bottom: 3px;
    }
    dt {
        display: inline-block;
        float: left;
        width: $component-offset-horizontal - 10;
        text-align: left;
        clear: left;
    }
    dt::after {
        content: ": ";
    }

    dd {
        display: block;
        margin-left: $component-offset-horizontal;
        //margin-bottom: 5px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

// for adding an <ul> inside value
dd ul, .multi-value {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

// responsive styles in _state.scss
Decrease offset for closer alignment of dd dt lists.
Decrease offset for closer alignment of dd dt lists.
