/* Paires — modèle canonique ; son emploi : canon_pairs.md. */

@layer components {
    .pairs {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pairs-item-width, 100%)), 1fr));
        gap: var(--pairs-space, var(--canon-space-3));
    }
    .pairs-item {
        display: grid;
        align-content: start;
        gap: var(--pairs-item-space, var(--canon-space-1));
        padding: var(--pairs-item-padding, 0);
    }

    .pairs-item {
        border-style: solid;
        border-width: var(--pairs-item-line-width, 0px);
        border-color: var(--pairs-item-line, var(--canon-theme-line));
        border-radius: var(--pairs-item-radius, 0px);
        background-color: var(--pairs-item-surface, transparent);
    }
    .pairs-item:not(:last-child) {
        border-block-end: var(--pairs-separator-width, var(--pairs-item-line-width, 0px)) var(--pairs-separator-style, solid) var(--pairs-separator, var(--pairs-item-line, var(--canon-theme-line)));
    }

    .pairs-label {
        font-family: var(--pairs-label-font, inherit);
        font-size: var(--pairs-label-size, var(--canon-size-note));
        line-height: var(--pairs-label-leading, inherit);
        font-weight: var(--pairs-label-weight, var(--canon-weight-body));
        letter-spacing: var(--pairs-label-tracking, 0);
        text-transform: var(--pairs-label-case, none);
        color: var(--pairs-label-ink, var(--canon-theme-muted));
    }
    .pairs-value {
        font-family: var(--pairs-value-font, inherit);
        font-size: var(--pairs-value-size, inherit);
        font-weight: var(--pairs-value-weight, inherit);
        overflow-wrap: anywhere;
        color: var(--pairs-value-ink, var(--canon-theme-ink));
    }
}

@layer components {
    .pairs--layout-row {
        grid-template-columns: minmax(var(--pairs-label-width, 9rem), max-content) minmax(0, 1fr);
        column-gap: var(--pairs-item-space, var(--canon-space-1));
    }
    .pairs--layout-row .pairs-item {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: baseline;
    }
    .pairs--layout-inline .pairs-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
    }
    @media (max-width: 800px) {
        .pairs--layout-row {
            grid-template-columns: minmax(0, 1fr);
        }
        .pairs--layout-row .pairs-item {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .pairs--layout-inline .pairs-value {
        text-align: end;
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer tokens {
    .facts {
        --pairs-space: var(--canon-space-2);
        --pairs-item-space: var(--canon-space-5);
        --pairs-label-width: 11rem;
    }
    @media (max-width: 800px) {
        .facts {
            --pairs-item-space: 0px;
        }
    }
}