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

@layer components {
    .tabs {
        position: var(--tabs-position, static);
        inset-block-start: var(--tabs-top, auto);
        z-index: var(--tabs-elevation, auto);
        display: flex;
        justify-content: var(--tabs-justify, normal);
        min-height: var(--tabs-height, auto);
        gap: var(--tabs-space, 0px);
        padding: var(--tabs-padding, 0);
        overflow-x: auto;
    }
    .tab {
        display: inline-flex;
        align-items: center;
        min-height: var(--tab-height, var(--canon-size-icon-target));
        padding: var(--tab-padding, 0 var(--canon-space-3));
    }
    .tab + .tab::before {
        margin-inline: var(--tabs-separator-space, 0px);
    }

    .tabs {
        border-block-start: var(--tabs-line-start-width, 0px) solid var(--tabs-line, var(--canon-theme-line));
        background-color: var(--tabs-surface, transparent);
        box-shadow: inset 0 calc(-1 * var(--tabs-line-width, var(--canon-line-width))) 0 var(--tabs-line, var(--canon-theme-line));
        backdrop-filter: var(--tabs-blur, none);
    }
    .tab {
        border: 0;
        border-start-start-radius: var(--tab-radius, 0px);
        border-start-end-radius: var(--tab-radius, 0px);
        background-color: transparent;
    }
    .tab:is([aria-current="page"], [aria-current="location"], [aria-selected="true"]) {
        background-color: var(--tab-surface-current, transparent);
        box-shadow: inset 0 calc(-1 * var(--tab-mark-height, 2px)) 0 var(--canon-theme-action);
    }
    .tab:focus-visible {
        outline-offset: calc(-1 * var(--canon-focus-width));
    }
    .tab:is([aria-current="page"], [aria-current="location"], [aria-selected="true"]):focus-visible {
        box-shadow: inset 0 calc(-1 * var(--tab-mark-height, 2px)) 0 var(--canon-theme-action), var(--canon-focus-halo);
    }

    .tab {
        font-size: var(--canon-size-control);
        font-weight: var(--tab-weight,);
        text-decoration-line: none;
        white-space: nowrap;
        color: var(--tab-ink, var(--canon-theme-muted));
    }
    .tab:hover {
        color: var(--tab-ink-hover, var(--canon-theme-ink));
        text-shadow: var(--tab-shadow, none);
    }
    .tab:is([aria-current="page"], [aria-current="location"], [aria-selected="true"]) {
        font-weight: var(--tab-page-weight, var(--canon-weight-label));
        color: var(--tab-page-ink, var(--canon-theme-ink));
        text-shadow: var(--tab-shadow, none);
    }
    .tab + .tab::before {
        content: var(--tabs-separator, none);
        font-weight: var(--canon-weight-body);
        text-shadow: none;
        color: var(--tabs-separator-ink, var(--canon-theme-faint));
    }

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

@layer components {
    .tabs--orientation-vertical {
        flex-direction: column;
        gap: var(--tabs-space, var(--canon-space-1));
        overflow-x: visible;
    }
    .tabs--orientation-vertical > .tab {
        display: flex;
        gap: var(--canon-space-3);
    }

    .tabs--orientation-vertical {
        box-shadow: none;
    }
    .tabs--orientation-vertical > .tab {
        border: var(--canon-line-width) solid transparent;
        border-radius: var(--tab-radius, var(--canon-radius-control));
    }
    .tabs--orientation-vertical > .tab:hover {
        background-color: var(--tab-surface-hover, var(--canon-theme-highlight));
    }
    .tabs--orientation-vertical > .tab:is([aria-current="page"], [aria-current="location"], [aria-selected="true"]) {
        border-color: var(--tab-line-current, var(--canon-theme-line));
        background-color: var(--tab-surface-current, var(--canon-theme-highlight));
        box-shadow: none;
    }
}

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

@layer components {
    .hub-tabs {
        --tabs-position: sticky;
        --tabs-top: 44px;
        --tabs-elevation: 49;
        --tabs-justify: center;
        --tabs-height: 36px;
        --tabs-padding: 0 16px;
        --tabs-surface: rgb(0 0 0 / 0.75);
        --tabs-blur: blur(10px);
        --tabs-line: rgb(255 255 255 / 0.9);
        --tabs-line-width: 1px;
        --tabs-line-start-width: 1px;
        --tab-height: 34px;
        --tab-padding: 0;
        --tab-weight: 500;
        --tab-ink: rgb(255 255 255 / 0.7);
        --tab-ink-hover: rgb(255 255 255 / 0.9);
        --tab-page-ink: rgb(255 255 255 / 0.9);
        --tab-page-weight: 600;
        --tab-shadow: 0 0 6px rgb(255 255 255);
        --tab-mark-height: 0px;
        --tabs-separator: "↔" / "";
        --tabs-separator-ink: rgb(255 255 255);
        --tabs-separator-space: 6px;
    }
    .hub-tabs:has(.tab[aria-current="page"][data-hub-tab="dossiers-acheves"]),
    :root:has(.trail:not([hidden]) .trail-path [data-trail-section="dossiers-acheves"]) .hub-tabs {
        --tabs-surface: hsl(224 100% 10% / 0.75);
    }
    .hub-tabs:has(.tab[aria-current="page"][data-hub-tab="elements-artdesign"]),
    :root:has(.trail:not([hidden]) .trail-path [data-trail-section="elements-artdesign"]) .hub-tabs {
        --tabs-surface: hsl(345 100% 10% / 0.75);
    }
    .hub-tabs:has(.tab[aria-current="page"][data-hub-tab="etudes"]),
    :root:has(.trail:not([hidden]) .trail-path [data-trail-section="etudes"]) .hub-tabs {
        --tabs-surface: hsl(180 100% 10% / 0.75);
    }
    .hub-tabs:has(.tab[aria-current="page"][data-hub-tab="definition-technique"]),
    :root:has(.trail:not([hidden]) .trail-path [data-trail-section="definition-technique"]) .hub-tabs {
        --tabs-surface: hsl(276 100% 10% / 0.75);
    }
    .hub-tabs:has(.tab[aria-current="page"][data-hub-tab="divers"]),
    :root:has(.trail:not([hidden]) .trail-path [data-trail-section="divers"]) .hub-tabs {
        --tabs-surface: hsl(4 100% 10% / 0.75);
    }
}