@use "sass:string";

// ============================================================================
// Tabs Component Styles
// ============================================================================
@mixin tabbed-box-tabs($selector: ".ui-tabbed-box-tabs") {
    @at-root :host {
        #{$selector} {
            // ================================================================
            // Base Layout
            // ================================================================
            & {
                display: flex;
                flex-direction: row;
                align-items: center;

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

                // Sizing
                max-inline-size: stretch;
                max-block-size: 3rem;
                inline-size: stretch;
                block-size: fit-content;
                min-block-size: 3rem;

                // Spacing
                gap: 0.25rem;
                padding-block: 0.25rem;
                padding-inline: 0.25rem;

                // Visual
                border-radius: 50cqmin;
                overflow: hidden;
                position: relative;
                contain: strict;

                // Scrolling
                scrollbar-gutter: stable;
                overscroll-behavior-inline: contain;
                scroll-behavior: smooth;

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

                // Alignment
                place-content: center flex-start;
                place-items: center flex-start;
                text-align: start;
                justify-content: safe flex-start;
                justify-items: safe flex-start;
                z-index: 90;
            }



            // ================================================================
            // Tab Items
            // ================================================================
            & :where(.ui-tabbed-box-tab) {
                display: flex;
                flex-direction: row;
                flex-shrink: 0;
                position: relative;
                isolation: isolate;

                // Sizing
                min-inline-size: 3rem;
                inline-size: fit-content;

                min-block-size: 2.5rem;
                block-size: fit-content;
                max-block-size: 2.5rem;
                pointer-events: auto;

                // Spacing
                gap: 0.25rem;
                padding-block: 0.25rem;
                padding-inline: 0.125rem;

                // Visual
                border-radius: 50cqmin;
                background-color: transparent;
                color: color-mix(in oklch, var(--md3-on-surface) 85%, transparent);
                letter-spacing: 0.01em;
                overflow: visible;

                // Interaction
                cursor: pointer;
                touch-action: pan-x;
                transition: color var(--duration-normal) var(--ease-out),
                            transform var(--duration-fast) var(--ease-emphasized);

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

                // Performance
                content-visibility: visible;

                // ============================================================
                // Active Indicator
                // ============================================================
                &::after {
                    content: "";
                    position: absolute;
                    inset-inline: clamp(0.5rem, 4cqi, 1rem);
                    inset-inline-end: 3rem;
                    inset-block-end: calc(var(--tabbed-indicator-height) * -1);
                    block-size: var(--tabbed-indicator-height);
                    border-radius: var(--tabbed-indicator-height);
                    background: currentColor;
                    opacity: 0;
                    transform: translate3d(0, 50%, 0) scaleX(0.6);
                    transition: transform var(--tabbed-indicator-duration) var(--tabbed-indicator-ease),
                                opacity var(--tabbed-indicator-duration) var(--tabbed-indicator-ease);
                    overflow: visible;
                    place-content: center;
                    place-items: center;
                    text-align: center;
                }

                // Bottom position: indicator on top
                :host([tab-position="bottom"]) &::after {
                    inset-block-start: calc(var(--tabbed-indicator-height) * -1);
                    inset-block-end: auto;
                    transform: translate3d(0, -50%, 0) scaleX(0.6);
                }

                // ============================================================
                // Active State
                // ============================================================
                &:where([aria-selected="true"], [active], .is-active, .active) {
                    color: var(--md3-on-primary);
                    transform: translateY(-2px);
                    place-content: center;
                    place-items: center;
                    text-align: center;

                    &::after {
                        opacity: 1;
                        transform: translate3d(0, 0, 0) scaleX(1);
                        background: var(--md3-on-primary);
                    }
                }

                // ============================================================
                // Disabled State
                // ============================================================
                &:disabled {
                    opacity: var(--state-opacity-disabled, 0.38);
                }

                // ============================================================
                // Tab Label
                // ============================================================
                :where(.ui-tabbed-box-tab-label) {
                    display: inline-flex;
                    align-items: center;
                    justify-content: flex-start;
                    gap: var(--gap-3xs, 0.2rem);
                    color: inherit;
                    pointer-events: none;
                    text-align: inherit;
                    line-height: var(--leading-tight, 1.1);
                    content-visibility: visible;
                    margin-inline: 1rem;
                    block-size: fit-content;
                    inline-size: fit-content;
                }

                // ============================================================
                // Close Button
                // ============================================================
                :where(.ui-tabbed-box-tab-close) {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;
                    aspect-ratio: 1 / 1;
                    flex-shrink: 0;

                    // Sizing
                    inline-size: fit-content;
                    block-size: fit-content;
                    min-inline-size: 2.25rem;
                    min-block-size: 2.25rem;
                    max-inline-size: 2.25rem;
                    max-block-size: 2.25rem;
                    padding: 0.25rem;
                    gap: 0px;

                    // Visual
                    border-radius: var(--radius-full);
                    background-color: transparent;
                    border: none;
                    outline: none;
                    color: var(--tabbed-close-color);

                    // Interaction
                    cursor: pointer;
                    transition: color var(--duration-normal) var(--ease-out),
                                transform var(--duration-fast) var(--ease-emphasized);

                    // Performance
                    content-visibility: visible;

                    // Icon
                    ui-icon {
                        content-visibility: visible;
                        color: --c2-on-surface(0.0, var(--current, currentColor));
                        --icon-color: --c2-on-surface(0.0, var(--current, currentColor));
                        inline-size: calc(var(--tabbed-close-size) * 0.5);
                        block-size: calc(var(--tabbed-close-size) * 0.5);
                    }

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

                    &:hover {
                        color: color-mix(in oklch, var(--md3-on-surface) 92%, transparent);
                    }

                    &:active {
                        transform: scale(0.9);
                    }
                }

                // Active tab: close button styling
                &:where([aria-selected="true"], [active], .is-active, .active) {
                    .ui-tabbed-box-tab-close {
                        color: color-mix(in oklch, var(--surface-on-primary) 85%, transparent);
                        --icon-color: color-mix(in oklch, var(--surface-on-primary) 85%, transparent);
                    }
                }

                // ================================================================
                // Icons
                // ================================================================
                ui-icon {
                    color: --c2-on-surface(0.0, var(--current, currentColor));
                    --icon-color: --c2-on-surface(0.0, var(--current, currentColor));

                    // Sizing
                    inline-size: var(--tabbed-icon-size);
                    block-size: var(--tabbed-icon-size);
                    aspect-ratio: 1 / 1;
                    max-inline-size: stretch;
                    max-block-size: stretch;
                    padding: 0px;

                    // Layout
                    content-visibility: visible;
                    place-content: center;
                    place-items: center;
                    text-align: center;
                }

                // ================================================================
                // Spacing by Tab Position
                // ================================================================
                @at-root :host([tab-position="bottom"]) #{$selector} & {
                    margin-block-start: var(--tabbed-tabs-block-gap);
                    margin-block-end: 0;
                }

                // ================================================================
                // Scroll Gradients
                // ================================================================
                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    inset-block: 0;
                    inline-size: min(1.75rem, 8%);
                    pointer-events: none;
                    opacity: clamp(0, calc(var(--scroll-gradient, 0)), 1);
                    transition: opacity var(--duration-normal) var(--ease-out);
                    background: linear-gradient(90deg, color-mix(in oklch, var(--md3-surface) 70%, transparent) 0%, transparent 100%);
                }

                &::before {
                    inset-inline-start: 0;
                    transform: scaleX(-1);
                    --scroll-gradient: attr(data-scrollable-start number, 0);
                }

                &::after {
                    inset-inline-end: 0;
                    --scroll-gradient: attr(data-scrollable-end number, 0);
                }

                // Mask for scrollable tabs
                @supports (mask-image: linear-gradient(#0000, #000)) {
                    &[data-scrollable="true"] {
                        mask-image: linear-gradient(to right, transparent 0%, black min(2.5rem, 18%), black calc(100% - min(2.5rem, 18%)), transparent 100%);
                    }
                }

                // ================================================================
                // Touch Actions
                // ================================================================
                &, & *, & button {
                    touch-action: pan-x;
                }
            }

            // ============================================================
            // Pinned State: Tab Adjustments
            // ============================================================
            &.pinned {
                display: grid;
                grid-template-columns: minmax(0px, 1fr);
                grid-template-rows: minmax(0px, 1fr);
                grid-column: pinned-col;

                // Sizing
                inline-size: max-content;
                block-size: stretch;
                overflow: visible;
                contain: none;

                // Spacing
                padding: 0px;
                padding-inline: 0px;
                margin-inline: 0px;
                gap: 0px;
                margin-inline-start: var(--space-sm);

                // Visual
                background-color: transparent;
                border-radius: 0px;
                line-height: 0;
                font-size: 0px;

                // Alignment
                place-content: center !important;
                place-items: center !important;
                text-align: center !important;

                .ui-tabbed-box-tab {
                    display: grid;
                    grid-template-columns: minmax(0px, 1fr);
                    grid-template-rows: minmax(0px, 1fr);

                    // Sizing
                    inline-size: fit-content;
                    min-inline-size: 3rem;
                    min-block-size: 3rem;
                    max-block-size: 3rem;
                    aspect-ratio: 1 / 1;
                    inset: 0px;
                    overflow: hidden;
                    pointer-events: auto;

                    // Visual
                    border-radius: 50cqmin;
                    font-size: 0px;
                    line-height: 0;

                    // Alignment
                    place-content: center !important;
                    place-items: center !important;
                    text-align: center !important;

                    //
                    gap: 0px !important;
                    padding-inline: 0px !important;
                    block-size: stretch !important;

                    & > * {
                        grid-row: 1 / -1;
                        grid-column: 1 / -1;
                        background-color: transparent;
                    }
                }

                .ui-tabbed-box-tab-close {
                    display: none !important;
                    margin-inline: 0px !important;
                }

                &::after {
                    margin: 0px !important;
                    inset: 0px !important;
                }

                ui-icon {
                    padding: 0px;
                    inline-size: 2rem;
                    block-size: 2rem;
                }
            }

        }


    }
}