@use './dl-theme' as *;

.kbq-dl {
    display: grid;
    column-gap: var(--kbq-description-list-size-horizontal-content-gap-horizontal);
    row-gap: var(--kbq-description-list-size-horizontal-gap-vertical);

    grid-template-columns: repeat(4, 1fr);

    .kbq-dt {
        grid-column: 1;
    }

    .kbq-dd {
        grid-column: 2 / span 3;
    }

    &.kbq-dl_wide {
        grid-template-columns: repeat(2, 1fr);

        .kbq-dt {
            grid-column: 1;
        }

        .kbq-dd {
            grid-column: 2;
        }
    }

    &.kbq-dl_vertical {
        grid-template-columns: repeat(1, 1fr);

        row-gap: var(--kbq-description-list-size-vertical-content-gap-vertical);

        .kbq-dt,
        .kbq-dd {
            grid-column: 1;
        }

        .kbq-dd:not(:last-child) {
            margin-bottom: var(--kbq-description-list-size-vertical-gap-vertical);
        }
    }
}

@include kbq-dl-theme();
@include kbq-dl-typography();