// Layout Components - Refactored and Optimized
// Unified with design system variables and mixins
@use "../basic/layout" as layout;
@use "../core/mixins" as core;
@use "../core/tokens" as t;
@use "./chrome-mixins" as ui;

//
@mixin sidebar {

    //
    .sidebar {
        align-items: stretch;
        box-sizing: border-box;
        user-select: none;
        text-align: start;
        padding: 0px;
        touch-action: pan-y;
        pointer-events: auto;
        justify-content: start;
        block-size: stretch;
        margin: 0px;

        //
        @include core.flex-center;
        @include layout.container-clamped(clamp(0px, var(--sidebar-width, 20rem), 100cqi), stretch);
        @include layout.scrollable("y");
        @include core.hide-scrollbar;

        //
        @include ui.vstack(0px);
        @include ui.tonal-surface(surface-container-low, var(--surface-opacity-default), var(--radius-sm), 0px, 1, true);

        //
        & {
            box-sizing: border-box;
            border: none 0 transparent;
            outline: none 0 transparent;
            max-block-size: stretch;
            min-block-size: 0px;
            box-shadow: none;

            contain: strict;
            content-visibility: auto;
            block-size: stretch;
            padding: 0.25rem;
            padding-inline: 0.25rem;
            padding-block: 0.25rem;

            border-radius: 0px;
            border-start-start-radius: 0px;
            border-end-start-radius: 0px;
            //background-color: oklch(from --c2-surface(0.15, var(--current, currentColor)) l c h / 0.9);
            //filter: drop-shadow(0 1.5rem 1rem color-mix(in oklch, #000 22%, transparent));
            //backdrop-filter: blur(1rem);
            background-color: transparent;
            filter: drop-shadow(0 1.5rem 1rem color-mix(in oklch, #000 22%, transparent));
        }

        //
        &[slot="sidebar"] {
            grid-column: 1 / 2;
            grid-row: 1 / -1;
            position: sticky;
            inset-block-start: var(--padding-sm);
            align-self: start;
            display: flex;
            flex-direction: column;
            touch-action: pan-y;
            justify-content: start;

            //
            @include layout.container-clamped(stretch, stretch);
            @include layout.scrollable;
            @include core.hide-scrollbar;
            @container (inline-size >= 60rem) {
                position: static;
                max-block-size: none;
                order: 2;
                inline-size: calc(100cqi - clamp(0px, var(--padding-sm), 100cqi));
            }

            //
            & { min-block-size: 0px; box-shadow: none; block-size: stretch; max-block-size: stretch; }
        }

        ul {
            user-select: none;
            overflow: visible;
            box-sizing: border-box;
            margin: 0px;
            touch-action: pan-y;
            justify-content: start;
            max-block-size: none;
            block-size: max-content;
            margin-block: 0.25rem;

            //
            @include layout.container-clamped(stretch, fit-content);
            @include ui.tonal-list(surface, var(--surface-opacity-subtle), var(--radius-sm), 0);

            //
            /*filter: drop-shadow(0 1.5rem 1rem color-mix(in oklch, #000 22%, transparent));*/
            background-color: oklch(from var(--surface-color) l c h / 1);
            /*backdrop-filter: blur(1rem);*/

            //
            &, &:focus {
                border: none 0 transparent;
                outline: none 0 transparent;
            }

            //
            & { block-size: max-content; min-block-size: max-content; max-block-size: none; }

            //
            li {
                overflow: visible;
                font-size: t.$font-sm;
                transition: var(--transition-colors);
                touch-action: pan-y;

                //
                @include layout.container-clamped(stretch, fit-content);

                //
                &, * { pointer-events: none; }

                //
                a {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    pointer-events: auto;
                    background: transparent;
                    touch-action: pan-y;

                    //
                    @include layout.container-clamped(stretch, fit-content);
                    @include ui.nav-item;

                    //
                    &, &:focus {
                        border: none;
                        outline: none;
                    }

                    //
                    & { padding: var(--padding-lg); column-gap: var(--gap-xs); gap: var(--gap-md); }
                    @media (max-height: 600px) { padding: var(--padding-xl); gap: var(--gap-sm); }
                    @media (max-height: 480px) { padding: var(--padding-lg); gap: var(--gap-md); }

                    //
                    & {
                        position: relative;
                        isolation: isolate;
                        border-radius: var(--radius-sm);
                        transition: color var(--transition-colors), background-color var(--transition-colors);
                        color: color-mix(in oklch, var(--on-surface, currentColor) 72%, transparent);
                        min-block-size: 3rem; // 56px
                    }

                    &::before {
                        content: "";
                        position: absolute;
                        inset: 0;
                        border-radius: inherit;
                        background: color-mix(in oklch, var(--primary, var(--color-primary, currentColor)) 18%, transparent);
                        opacity: 0;
                        transform: scale3d(0.4, 1, 1);
                        transition: opacity var(--transition-colors), transform var(--transition-medium, var(--transition-colors));
                        pointer-events: none;
                    }

                    &::after {
                        display: none; // Remove the small indicator
                    }

                    &:where(:hover, :focus-visible, :focus, :active) {
                        color: color-mix(in oklch, var(--on-surface, currentColor) 94%, transparent);

                        &::before {
                            opacity: 0.55;
                            transform: scale3d(1, 1, 1);
                        }

                        ui-icon {
                            color: color-mix(in oklch, var(--on-surface, currentColor) 94%, transparent);
                        }
                    }

                    &[data-active="true"] {
                        color: color-mix(in oklch, var(--on-secondary-container, var(--on-surface, currentColor)) 100%, transparent);
                        font-weight: var(--font-weight-semibold);
                        letter-spacing: 0.01em;

                        &::before {
                            opacity: 1;
                            transform: scale3d(1, 1, 1);
                            background: var(--secondary-container, color-mix(in oklch, var(--primary, var(--color-primary, currentColor)) 25%, transparent));
                            box-shadow: none;
                        }

                        ui-icon {
                            color: currentColor;
                        }
                    }

                    @media (prefers-reduced-motion: reduce) {
                        &, &::before, &::after {
                            transition-duration: 0ms;
                            transform: none;
                        }
                    }

                    ui-icon {
                        justify-self: start;
                        inline-size: var(--icon-size);
                        block-size: var(--icon-size);
                        --icon-size: var(--icon-size-sm);
                        color: color-mix(in oklch, var(--on-surface, currentColor) 58%, transparent);
                        transition: color var(--transition-colors), transform var(--transition-medium, var(--transition-colors));

                        @media (max-width: 720px) { --icon-size: var(--icon-size-md); }
                        @media (max-width: 480px) { --icon-size: var(--icon-size-lg); }
                    }

                    //
                    span {
                        display: block;
                        justify-self: start;
                        text-align: start;
                        @include layout.container-clamped(stretch, max-content);
                    }
                }
            }
        }

        &,
        ul,
        ul li,
        ul li a,
        ul li a span {
            text-align: start;
            direction: ltr;
            justify-items: start;
            justify-self: start;
        }

        //
        @container (inline-size >= 60rem) {
            nav {
                inline-size: 100cqi;

                //
                padding: var(--padding-sm) var(--padding-xs);
                @media (max-width: 720px) { padding: var(--padding-md) var(--padding-sm); }
                @media (max-width: 480px) { padding: var(--padding-lg) var(--padding-md); }

                //
                ul {
                    gap: 0;
                    padding-inline: 0;
                    inline-size: stretch;

                    li {
                        flex: 0 0 auto;
                        white-space: nowrap;
                        border-radius: var(--radius-sm);

                        //
                        @media (max-width: 480px) { border-radius: var(--radius-md); }
                    }
                }
            }
        }
    }
}

// ============================================================================
// Sidebar Component Styles
// ============================================================================
@mixin tabbed-sidebar($selector: ".sidebar") {
    @at-root :host {
        #{$selector} {
            // ================================================================
            // Base Layout
            // ================================================================
            & {
                display: flex;
                flex-direction: column;
                justify-content: start;
                gap: 0px;

                // Grid positioning
                grid-column: 1 / 2 span;
                grid-row: 2 / -1;
                z-index: 2;

                // Sizing
                min-inline-size: 0px;
                min-block-size: 0px;
                max-inline-size: stretch;
                max-block-size: stretch;

                // Spacing
                padding: 0px !important;
                margin: 0px !important;

                // Visual
                background: none;
                box-shadow: none;
                border-radius: 0px;
                overflow: visible;

                // Transform & Animation
                transform: translateX(0px);
                background-color: transparent;
                transition-behavior: allow-discrete;

                //
                /*filter: drop-shadow(0 1.5rem 1rem color-mix(in oklch, #000 22%, transparent));*/
                filter: none;
            }

            // ================================================================
            // Slotted Sidebar Content
            // ================================================================
            ::slotted([slot="sidebar"]) {
                // Grid positioning
                grid-row: 1 / -1;

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

                // Spacing
                padding: 0rem;
                margin: 0px;
                gap: 0px;

                // Layout
                place-content: center;
                place-items: center;
                align-content: start;
                line-height: normal;

                // Visual
                box-shadow: none;
            }

            // ================================================================
            // Desktop Layout (≥800px)
            // ================================================================
            @at-root :host(:not([sidebar-drop-menu])) {
                --sidebar-inline-grid-size: 0px;

                //
                #{$selector} {
                    & {
                        will-change: inline-size;
                        grid-column: 1 / 2 span;
                        position: relative;
                        min-inline-size: 0px;
                        inline-size: clamp(min(20rem, 100%), max(16rem, 10cqi), 100cqi);
                        max-inline-size: none;
                        transform: translate3d(-100%, 0, 0);
                        transition: transform var(--transition-medium, 0.28s) ease,
                                    box-shadow var(--transition-medium, 0.28s) ease;
                        pointer-events: none;
                        block-size: stretch;
                        max-block-size: stretch;
                    }

                    // Hidden state
                    &:is([sidebar-opened="false"], :not([sidebar-opened="true"], [sidebar-opened=""])) {
                        pointer-events: none;
                        transform: translate3d(-100%, 0, 0);
                    }

                    // Visible state
                    &:is([sidebar-opened="true"], [sidebar-opened=""]) {
                        transform: translate3d(0, 0, 0);
                        pointer-events: auto;

                        @starting-style {
                            transform: translate3d(-100%, 0, 0);
                            box-shadow: none;
                        }
                    }
                }
            }

            // ================================================================
            // Drop Menu Mode
            // ================================================================
            @at-root :host([sidebar-drop-menu]) {
                --sidebar-inline-grid-size: 0px;

                #{$selector} {
                    & {
                        // Grid positioning
                        grid-column: sidebar-col !important;
                        grid-row: 2 / -1;
                        z-index: 5;

                        // Sizing
                        inline-size: min(26rem, 80cqi);
                        min-inline-size: clamp(16rem, 32cqi, 24rem);
                        block-size: stretch;
                        max-block-size: min(48rem, 100cqb);

                        // Spacing
                        padding-block: clamp(0.75rem, 1cqb + 0.5rem, 1.25rem);
                        padding-inline: clamp(0.75rem, 1cqi + 0.75rem, 1.5rem);

                        // Visual
                        background-color: color-mix(in oklch, var(--surface-color) 96%, transparent);
                        border: 1px solid color-mix(in oklch, var(--md3-outline) 40%, transparent);
                        border-radius: 0px;
                        box-shadow: 0 1.5rem 3rem color-mix(in oklch, #000 22%, transparent);

                        // Transform & Animation
                        transform-origin: top center;
                        transform: translate3d(0, -20%, 0);
                        transition-behavior: allow-discrete;
                        transition:
                            visibility var(--transition-medium, 0.3s) steps(1, jump-both),
                            transform var(--transition-medium, 0.3s) var(--ease-emphasized),
                            opacity var(--transition-medium, 0.3s) var(--ease-out),
                            box-shadow var(--transition-medium, 0.3s) var(--ease-emphasized);

                        // Initial state
                        pointer-events: none;
                        visibility: hidden;
                        opacity: 0;
                    }

                    // Visible state
                    &:is([sidebar-opened=""], [sidebar-opened="true"]) {
                        opacity: 1;
                        pointer-events: auto;
                        transform: translate3d(0, 0, 0);
                        visibility: visible;

                        @starting-style {
                            transform: translate3d(0, -20%, 0);
                        }
                    }

                    // Backdrop overlay
                    &:has([sidebar-opened="true"]) .content-box::after {
                        opacity: 0.6;
                        pointer-events: auto;
                    }
                }
            }

            // ================================================================
            // Drop Menu: Bottom Tab Position
            // ================================================================
            @at-root :host([sidebar-drop-menu][tab-position="bottom"]) #{$selector} {
                inset-block-start: auto;
                inset-block-end: calc(var(--tabbed-bar-block-size) + var(--tabbed-padding-block));
                transform-origin: bottom center;
                transform: translate3d(0, 20%, 0);

                &:is([sidebar-opened=""], [sidebar-opened="true"]) {
                    @starting-style {
                        transform: translate3d(0, 20%, 0);
                    }
                }
            }
        }
    }
}