/* src/components/basic/XWUIDescriptionList/XWUIDescriptionList.css */
/**
 * XWUIDescriptionList Component Styles
 */

.xwui-description-list-container {
    /* Container has no specific styles */
}

.xwui-description-list {
    display: grid;
    gap: 16px;
    /* The list is a <dl>, which user agents give a 1em block margin; the
       <div> it replaced had none, so reset it to keep every layout in place. */
    margin: 0;
}

.xwui-description-list-horizontal {
    grid-template-columns: auto 1fr;
}

.xwui-description-list-vertical {
    grid-template-columns: 1fr;
}

.xwui-description-list-item {
    display: contents;
}

/* In the vertical layout an item is ONE grid cell with its term above its
   value. With display: contents the term and the value became two cells of the
   repeat(column, 1fr) grid and ran on across the columns (Term 1, Value 1,
   Term 2 ...), and an item's `span` did nothing because a contents box has no
   grid placement. The bordered rule below already makes its items cells. */
.xwui-description-list-vertical .xwui-description-list-item {
    display: grid;
    align-content: start;
}

.xwui-description-list-term {
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary, #666);
    margin: 0;
}

.xwui-description-list-desc {
    margin: 0;
    color: var(--text-primary, #333);
}

.xwui-description-list-bordered {
    border: 1px solid var(--border-light, #e8e8e8);
    border-radius: var(--radius-sm, 4px);
}

.xwui-description-list-bordered .xwui-description-list-item {
    display: grid;
    grid-column: span 1;
    border-block-end: 1px solid var(--border-light, #e8e8e8);
    padding: var(--spacing-md, 12px);
}

.xwui-description-list-bordered .xwui-description-list-item:last-child {
    border-block-end: none;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-description-list-3xs,.xwui-description-list-xxxs) { font-size: 8px; }
:is(.xwui-description-list-4xs,.xwui-description-list-xxxxs) { font-size: 4px; }
:is(.xwui-description-list-2xs,.xwui-description-list-xxs) { font-size: 9px; }
.xwui-description-list-xs { font-size: 10px; }
:is(.xwui-description-list-s,.xwui-description-list-sm) { font-size: 12px; }
:is(.xwui-description-list-m,.xwui-description-list-md) { font-size: 14px; }
:is(.xwui-description-list-l,.xwui-description-list-lg) { font-size: 16px; }
.xwui-description-list-xl { font-size: 18px; }
:is(.xwui-description-list-2xl,.xwui-description-list-xxl) { font-size: 23px; }
:is(.xwui-description-list-3xl,.xwui-description-list-xxxl) { font-size: 29px; }
:is(.xwui-description-list-4xl,.xwui-description-list-xxxxl) { font-size: 46.4px; }

/* Legacy size aliases */
.xwui-description-list-small { font-size: 12px; }
.xwui-description-list-large { font-size: 16px; }