/* 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));
    }
}