@use '~flux/components/css/mixin';

.descriptionList {
    display: flex;
    flex-flow: column;
    gap: 12px;
}

.descriptionListHeader {
    @include mixin.text(small);

    color: var(--foreground-secondary);
    font-weight: 500;
}

.descriptionListItems {
    display: flex;
    margin: 0;
    flex-flow: column;
    gap: 12px;
}

.descriptionItem {
    display: flex;
    gap: 12px;
    align-items: center;
}

.descriptionItem.isStacked {
    gap: 2px;
    align-items: stretch;
    flex-flow: column;
}

.descriptionItem.isStacked .descriptionItemValue {
    margin-left: 0;
    justify-content: flex-start;
    text-align: left;
}

.descriptionItemTerm {
    @include mixin.text(default);

    display: flex;
    gap: 9px;
    align-items: center;
    color: var(--foreground);
}

.descriptionItemIcon {
    flex-shrink: 0;
    color: var(--foreground);
    font-size: 16px;
}

.descriptionItemLabel {
    display: flex;
    gap: 6px;
    align-items: center;
    overflow-wrap: anywhere;
}

.descriptionItemValue {
    @include mixin.text(default);

    display: flex;
    margin: 0;
    margin-left: auto;
    gap: 6px;
    align-items: center;
    color: var(--foreground-prominent);
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.descriptionListItems.hasLabelWidth {
    display: grid;
    align-items: center;
    gap: 12px 24px;
    grid-template-columns: fit-content(var(--label-width)) 1fr;

    .descriptionItem {
        display: contents;
    }

    .descriptionItemValue {
        margin-left: 0;
        justify-content: flex-start;
        text-align: left;
    }
}

.descriptionListItems.isHorizontal {
    gap: 0;
    flex-flow: row;

    .descriptionItem {
        gap: 6px;
        align-items: stretch;
        flex: 1 1 0;
        flex-flow: column;
        padding-right: 24px;
        padding-left: 24px;
        border-left: 1px solid var(--gray-100);
    }

    .descriptionItem:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .descriptionItemTerm {
        @include mixin.text(small);
    }

    .descriptionItemValue {
        margin-left: 0;
        justify-content: flex-start;
        font-weight: 500;
        text-align: left;
    }
}