// ============================================================================
// Bar Component Styles
// ============================================================================
@mixin tabbed-bar($selector: ".bar") {
    @at-root :host {

        // ================================================================
        // Slotted Bar Content
        // ================================================================
        &::slotted([slot="bar"]), ::slotted([slot="bar"]) {
            // Grid positioning
            grid-column: 1 / -1;
            grid-row: 1 / -1;

            // Sizing
            inline-size: stretch;
            block-size: stretch;
            max-block-size: 3rem;
            flex-grow: 1;

            // Alignment
            place-content: center;
            place-items: center;

            //
            background-color: transparent;
        }

        //
        #{$selector} {
            // ================================================================
            // Base Layout
            // ================================================================
            & {
                display: grid;
                grid-template-columns:
                    [sidebar-col] minmax(0px, 0px)
                    [button-col] minmax(0px, 3.5rem)
                    [content-col] minmax(0px, 1fr)
                    [pinned-col] minmax(0px, 3.5rem);
                grid-template-rows: minmax(0px, 1fr);
                grid-auto-rows: 0;

                // Grid positioning
                grid-column: 1 / -1;
                grid-row: bar-row;
                z-index: 3;
                border-radius: 0px;

                // Sizing
                inline-size: stretch;
                block-size: stretch;
                min-block-size: stretch;
                max-block-size: 3.5rem;
                box-sizing: border-box;

                // Spacing
                padding-block: 0.25rem;
                padding-inline: 0.75rem;
                gap: 0px;

                // Visual
                box-shadow: none;
                overflow: hidden;

                // Interaction
                pointer-events: auto;
                background-color: oklch(from --c2-surface(0.15, var(--current, currentColor)) l c h / 0.9);
                backdrop-filter: blur(1rem);
                filter: none;

                // Alignment
                place-content: center;
                place-items: center;
            }

            // ================================================================
            // Child Elements
            // ================================================================
            & > :where(*) {
                grid-row: 1;
            }

            // ================================================================
            // Spacing by Tab Position
            // ================================================================
            @at-root :host & {
                margin-block-start: 0px;
                margin-block-end: var(--space-md);
            }

            @at-root :host([tab-position="bottom"]) & {
                margin-block-start: var(--space-md);
                margin-block-end: 0px;
            }

            @at-root :host([tab-position="top"]) & {
                margin-block-start: 0px;
                margin-block-end: var(--space-md);
            }

            //
            .toolbar-slot {
                padding: 0rem;
                grid-row: 1 / 1 span;
                grid-column: content-col;
                max-inline-size: stretch;
                max-block-size: 3rem;
                inline-size: stretch;
                block-size: stretch;
                min-inline-size: 0px;
                min-block-size: 3rem;
                place-content: center;
                place-items: center;
                justify-content: center;
                align-items: center;
                gap: 0rem;
                margin: 0px;
                inset: 0px;
                z-index: 99;
                border-radius: 50cqmin;
                overflow: hidden;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: opacity var(--duration-normal, 160ms) var(--ease-out, ease),
                            visibility var(--duration-normal, 160ms) var(--ease-out, ease);

                //
                &[toolbar-opened="true"] {
                    opacity: 1;
                    visibility: visible;
                    pointer-events: auto;
                }
            }

            // ================================================================
            // Sidebar Toggle Button
            // ================================================================
            button.open-sidebar {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                place-content: center;
                place-items: center;
                gap: 0rem;
                margin-inline-end: var(--space-sm);

                // Grid positioning
                grid-column: button-col;
                grid-row: 1;

                // Sizing
                aspect-ratio: 1 / 1;
                inline-size: fit-content;
                block-size: stretch;
                min-inline-size: 3rem;
                min-block-size: 3rem;
                max-inline-size: 3rem;
                box-sizing: border-box;
                padding: 0.25rem;

                // Visual
                background-color: transparent;
                border: 0px none transparent;
                outline: 0px none transparent;
                border-radius: 50cqmin;
                transition: background-color var(--duration-normal, 160ms) var(--ease-out, ease);

                // Interaction
                cursor: pointer;
                pointer-events: auto;
                touch-action: pan-x;

                // Colorization
                background-color: --c2-surface(var(--_color-shade), var(--current, currentColor));

                // Icon
                ui-icon {
                    inline-size: var(--tabbed-icon-size);
                    block-size: var(--tabbed-icon-size);
                    min-inline-size: var(--tabbed-icon-size);
                    min-block-size: var(--tabbed-icon-size);
                    max-inline-size: var(--tabbed-icon-size);
                    max-block-size: var(--tabbed-icon-size);
                    aspect-ratio: 1 / 1;
                    flex-shrink: 0;
                }

                // Label
                span {
                    display: block;
                    font-size: 0.8rem;
                    font-weight: 400;
                    padding-inline-end: 0.333rem;
                }

                // Focus state
                &:focus-visible {
                    outline: 2px solid color-mix(in oklch, currentColor 35%, transparent);
                    outline-offset: 2px;
                }
            }

            // ================================================================
            // Tab Buttons
            // ================================================================
            :where(.ui-tabbed-box-tab) button {
                padding: 0.5rem;
                touch-action: pan-x;
            }

            // ================================================================
            // Handle (hidden)
            // ================================================================
            .ui-tabbed-box-handle {
                inline-size: 0;
                block-size: 0;
                visibility: hidden;
                pointer-events: none;
                place-content: center;
                place-items: center;
                overflow: visible;
                touch-action: pan-x;
            }

            // ================================================================
            // Icons
            // ================================================================
            ui-icon {
                content-visibility: visible;
                pointer-events: none;
                color: --c2-on-surface(0.0, var(--current, currentColor));
                --icon-color: --c2-on-surface(0.0, var(--current, currentColor));
                inline-size: var(--tabbed-icon-size);
                block-size: var(--tabbed-icon-size);
            }

            // ================================================================
            // Alignment by Tab Position
            // ================================================================
            @at-root :host([tab-position="bottom"]) #{$selector} & {
                align-self: end;
            }

            // ================================================================
            // Responsive Behavior
            // ================================================================
            // Drop menu mode: always show button
            @at-root :host([sidebar-drop-menu]) & {
                button.open-sidebar {
                    display: flex !important;
                }
            }

            // Desktop: hide button when sidebar is not in drop menu mode
            @at-root :host(:not([sidebar-drop-menu])) & {
                @container (min-inline-size: 800px) {
                    --button-inline-size: 0px;
                    & button.open-sidebar {
                        display: none;
                    }
                }
            }
        }
    }
}