@import "common/var";

/*
  A class-only component that can be used for showing key-value data in a tabular format.
  The classes are supposed to be used on `dl` and accompanying tags.
  dl - Container
  dt - Key
  dd - Value
*/

// block
.c-key-value-list {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: [key] minmax(auto, max-content) [value] minmax(auto, max-content);
    gap: 1em 3em;
    max-width: 100%;
}

// elements

.c-key-value-list__key, .c-key-value-list__value {
    word-break: break-word;
    margin: 0;
}

.c-key-value-list__key {
    grid-column: key;
}

.c-key-value-list__value {
    grid-column: value;
}

.c-key-value-list--group {
    gap: 0;
    margin: 0;
    .c-key-value-list__key {
        border-right: 1px solid $--card-border-color;
        border-top: 1px solid $--card-border-color;
    }

    .c-key-value-list__value {
        align-self: start;
        border-top: 1px solid $--card-border-color;
    }

    dt:first-of-type, dd:first-of-type{
        border-top: none;
    }
}

.c-key-value-list--fixed-columns {
    grid-template-rows: auto;
    grid-template-columns: [key] 1fr [value] 4fr;
}

// IE Fallback
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .c-key-value-list {
        display: flex;
        flex-wrap: wrap;
    }

    .c-key-value-list__key, .c-key-value-list__value {
        margin-bottom: 1em;
    }

    .c-key-value-list__key {
        width: 45%;
    }

    .c-key-value-list__value {
        margin-left: auto;
        width: 55%;
    }

    .c-key-value-list--fixed-columns {
        .c-key-value-list__key, .c-key-value-list__value {
            margin-bottom: 0;
        }

        .c-key-value-list__key {
            width: 25%;
        }

        .c-key-value-list__value {
            width: 75%;
        }
    }
}