/* Barre d'outil — modèle canonique ; son emploi : canon_toolbar.md. */

@layer components {
    .toolbar {
        padding-block: var(--toolbar-padding, var(--canon-space-3));
        padding-inline: max(var(--toolbar-edge, var(--canon-space-4)), var(--toolbar-edge-ratio, 0%));
        overflow-x: var(--toolbar-overflow, visible);
    }
    .toolbar-inner {
        display: flex;
        flex-wrap: var(--toolbar-wrap, wrap);
        align-items: center;
        gap: var(--canon-space-2) var(--toolbar-space, var(--canon-space-4));
        width: 100%;
        max-width: var(--toolbar-width, none);
        min-height: var(--toolbar-height, auto);
        margin-inline: auto;
    }
    .toolbar-start,
    .toolbar-end,
    .toolbar-group {
        display: flex;
        flex-wrap: var(--toolbar-wrap, wrap);
        align-items: center;
        gap: var(--toolbar-group-space, var(--canon-space-2));
    }
    .toolbar-title {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .toolbar-end {
        margin-inline-start: auto;
    }

    .toolbar {
        border: var(--canon-line-width) solid var(--toolbar-line, var(--canon-theme-line));
        border-radius: var(--toolbar-radius, var(--canon-radius-control));
        background-color: var(--toolbar-surface, var(--canon-theme-raised));
        backdrop-filter: var(--toolbar-backdrop, none);
    }

    .toolbar {
        color: var(--toolbar-ink, var(--canon-theme-ink));
    }
    .toolbar-help {
        font-size: var(--canon-size-note);
        color: var(--toolbar-help-ink, var(--canon-theme-muted));
    }
}

@layer components {
    .toolbar--position-top,
    .toolbar--position-bottom {
        inset-inline: 0;
        z-index: calc(var(--canon-plane-header) - 1);
    }
    .toolbar--position-top {
        position: var(--toolbar-position, sticky);
        inset-block-start: var(--toolbar-top, var(--canon-height-header, 0px));
    }
    .toolbar--position-bottom {
        position: fixed;
        inset-block-end: 0;
    }

    .toolbar--position-top,
    .toolbar--position-bottom {
        border-radius: 0;
    }
    .toolbar--position-top {
        border-width: 0 0 var(--canon-line-width);
    }
    .toolbar--position-bottom {
        border-width: var(--canon-line-width) 0 0;
    }
}

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

@layer components {
    /* La barre d'outil du prompteur : au chrome, sous l'en-tête ; chaque bouton marque sa conséquence d'un
       filet bas, au survol puis enfoncé, sur un fond teinté (exvae #42). */
    .toolbar {
        --toolbar-position: fixed;
        --toolbar-padding: 0px;
        --toolbar-edge: 8px;
        --toolbar-height: var(--local-height-toolbar);
        --toolbar-space: 4px;
        --toolbar-group-space: 4px;
        --toolbar-surface: var(--canon-theme-chrome);
        --toolbar-line: transparent;
        --toolbar-ink: var(--canon-theme-on-chrome);
        --toolbar-backdrop: blur(15px);
        --toolbar-wrap: nowrap;
    }
    /* Fixe, la barre ne grandit pas : le contenu se cale sous elle à --local-height-toolbar. Elle garde
       une rangée, qui défile de côté quand la largeur manque. */
    @media (max-width: 800px) {
        .toolbar {
            --toolbar-overflow: auto;
        }
    }
}