/* 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 {
    /* Les onglets du prompteur : deux barres empilées, les prompts sur le fond relevé, l'onglet courant
       au fond de la page ; les segments sur le fond de la page, l'onglet courant teinté de l'action et
       souligné ; les angles hauts arrondis, l'encre qui ne change pas au survol (exvae #42). */
    :where(.prompter-tabs) > .tabs {
        --tabs-height: 40px;
        --tabs-padding: 8px 8px 0;
        --tabs-space: 2px;
        --tab-height: 32px;
        --tab-padding: 0 var(--local-space-prompter-tab);
        --tab-ink-hover: var(--canon-theme-muted);
    }
    .prompter-tabs-prompt {
        --tabs-surface: var(--canon-theme-raised);
        --tabs-line-width: 0px;
        --tab-weight: var(--canon-weight-label);
        --tab-radius: var(--canon-radius-control);
        --tab-surface-current: var(--canon-theme-surface);
        --tab-mark-height: 0px;
    }
    .prompter-tabs-segment {
        --tabs-surface: var(--canon-theme-surface);
        --tab-weight: var(--canon-weight-body);
        --tab-page-weight: var(--canon-weight-body);
        --tab-padding: 0 var(--local-space-prompter-tab) var(--tab-mark-height, 2px);
        --tab-radius: var(--canon-radius-card);
        --tab-surface-current: var(--local-color-decor-prompter-tab-segment-surface);
    }
}