/* Tableau — modèle canonique ; son emploi : canon_table.md. */

@layer components {
    .table-region {
        overflow-x: auto;
        overflow-y: var(--table-region-vertical, auto);
    }
    .table {
        width: var(--table-width, 100%);
        border-collapse: collapse;
    }
    .table th,
    .table td {
        padding: var(--table-cell-padding, var(--canon-space-2) var(--canon-space-3));
    }

    .table-group > th {
        padding: var(--table-group-padding, var(--canon-space-2) 0);
    }
    .table-group--level-2 > th {
        padding: var(--table-subhead-padding, var(--canon-space-2) 0 var(--canon-space-1) var(--canon-space-3));
    }
    .table-sort {
        display: inline-flex;
        align-items: center;
        gap: var(--canon-space-1);
        padding: 0;
    }
    .table-sort > svg {
        flex: none;
        width: 14px;
        height: 14px;
    }

    .table thead th {
        background-color: var(--table-head-surface, transparent);
    }
    .table-group > th {
        border-block-end: var(--canon-line-width) solid var(--table-line, var(--canon-theme-line));
        background-color: transparent;
    }
    .table-group--level-2 > th {
        border-block-end: 0;
    }
    .table-sort {
        border: 0;
        background: none;
    }
    .table tbody tr:hover {
        background-color: var(--table-row-surface-hover, transparent);
    }
    .table tbody tr:is([aria-current="true"], [aria-expanded="true"]) {
        background-color: var(--table-row-surface-current, var(--canon-theme-highlight));
    }

    .table {
        font-size: var(--table-size, inherit);
    }
    .table th {
        text-align: start;
        font-family: var(--table-head-font, inherit);
        font-weight: var(--table-head-weight, var(--canon-weight-label));
        color: var(--table-head-ink, var(--canon-theme-muted));
    }
    .table-group > th {
        font-size: var(--canon-size-fine);
        font-weight: var(--canon-weight-title);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .table-group--level-2 > th {
        font-weight: var(--canon-weight-label);
        letter-spacing: 0;
        text-transform: none;
        color: var(--canon-theme-faint);
    }
    .table-sort {
        font: inherit;
        color: inherit;
    }
    .table-sort:hover {
        color: var(--canon-theme-ink);
    }
    [aria-sort] > .table-sort > svg {
        color: var(--canon-theme-action);
    }

    .table tbody tr[data-table-row],
    .table-sort {
        cursor: pointer;
    }
}

@layer components {
    .table--style-lines th,
    .table--style-lines td {
        border-block-end: var(--canon-line-width) solid var(--table-line, var(--canon-theme-line));
    }
    .table--style-grid th,
    .table--style-grid td {
        border: var(--canon-line-width) solid var(--table-line, var(--canon-theme-line));
    }
    .table-region--style-frame {
        border: var(--canon-line-width) solid var(--table-line, var(--canon-theme-line));
        border-radius: var(--table-region-radius, var(--canon-radius-card));
    }

    .table--align-end th,
    .table--align-end td {
        text-align: end;
        white-space: nowrap;
    }
    .table--align-end :is(th, td):first-child {
        text-align: start;
    }
}

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

@layer tokens {
    .table-region {
        --table-region-vertical: hidden;
    }
    .table {
        --table-width: auto;
        --table-head-weight: var(--canon-weight-title);
        --table-head-ink: var(--canon-theme-ink);
    }
}