/* Onglets — modèle canonique ; son emploi : canon_tabs.md. */

@layer components {
    .tabs {
        display: flex;
        overflow-x: auto;
    }
    .tab {
        display: inline-flex;
        align-items: center;
        min-height: var(--canon-size-icon-target);
        padding: 0 var(--canon-space-3);
    }

    .tabs {
        box-shadow: inset 0 calc(-1 * var(--canon-line-width)) 0 var(--canon-theme-line);
    }
    .tab {
        border: 0;
        background-color: transparent;
    }
    .tab[aria-current="page"],
    .tab[aria-selected="true"] {
        box-shadow: inset 0 -2px 0 var(--canon-theme-action);
    }
    .tab:focus-visible {
        outline-offset: calc(-1 * var(--canon-focus-width));
    }

    .tab {
        font-size: var(--canon-size-control);
        text-decoration-line: none;
        white-space: nowrap;
        color: var(--canon-theme-muted);
    }
    .tab:hover {
        color: var(--canon-theme-ink);
    }
    .tab[aria-current="page"],
    .tab[aria-selected="true"] {
        font-weight: var(--canon-weight-label);
        color: var(--canon-theme-ink);
    }

    .tab {
        cursor: pointer;
        transition: color var(--canon-duration-state), box-shadow var(--canon-duration-state);
    }
}