/*
 * M3 Expressive's toolbars (DockedToolbarTokens, FloatingToolbarTokens, androidx Compose Material 3,
 * Apache-2.0).
 *
 *   docked     a 64px bar across the bottom of the screen in surface-container, square, its
 *              controls spread out 4 to 32px apart between 16px ends
 *   floating   a 64px pill in surface-container (or primary-container, `vibrant`) at elevation 3,
 *              8px at its ends and 4px between controls; `vertical` stands it on end
 *
 * Unlayered on purpose: a vibrant toolbar recolours the icon buttons inside it, which draw their
 * ink as utilities, and a rule in any layer loses to a utility.
 */

[data-toolbar] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

[data-toolbar][data-variant="docked"] {
    width: 100%;
    min-height: calc(4rem + var(--material-safe-bottom, env(safe-area-inset-bottom)));
    justify-content: center;
    column-gap: clamp(0.25rem, 4vw, 2rem);
    padding-inline: 1rem;
    padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom));
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
}

[data-toolbar][data-variant="floating"] {
    display: inline-flex;
    height: 4rem;
    padding-inline: 0.5rem;
    border-radius: var(--md-sys-shape-corner-full);
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    box-shadow: var(--md-sys-elevation-3);
}

[data-toolbar][data-variant="floating"][data-vertical] {
    width: 4rem;
    height: auto;
    flex-direction: column;
    padding-block: 0.5rem;
    padding-inline: 0;
}

[data-toolbar][data-vibrant] {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

[data-toolbar][data-vibrant] [data-icon-button]:not([aria-pressed="true"]) {
    color: var(--md-sys-color-on-primary-container);
}

[data-toolbar][data-vibrant] [data-icon-button][aria-pressed="true"] {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

/* A floating toolbar and its FAB, side by side (or stacked, vertical). */
[data-toolbar-group] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

[data-toolbar-group][data-vertical] {
    flex-direction: column;
}

/* Placed over the page: centred above the bottom edge, or centred against the end edge.
 *
 * A toolbar at the bottom shares the screen region with a navigation bar, so it clears the one
 * <x-app-shell> publishes as --material-bottom-bar, exactly as the FAB and the snackbar do —
 * `max()`, not a sum, because that height already swallows the bottom safe area; without a bar
 * the safe area alone applies. A *docked* toolbar and a navigation bar must never be on screen
 * together at all (docs/reference/m3/components-navigation-selection-inputs.md § Toolbars); the
 * offset is the backstop, not a licence. */
[data-toolbar-place="bottom"] {
    position: fixed;
    bottom: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + 1rem);
    left: 50%;
    z-index: 30;
    translate: -50% 0;
}

[data-toolbar-place="end"] {
    position: fixed;
    top: 50%;
    inset-inline-end: calc(1rem + var(--material-safe-right, env(safe-area-inset-right)));
    z-index: 30;
    translate: 0 -50%;
}

[data-toolbar][data-variant="docked"][data-toolbar-place="bottom"] {
    inset-inline: 0;
    bottom: var(--material-bottom-bar, 0px);
    left: 0;
    translate: none;
}