@use "../core/layout" as l;
@use "../core/utils" as utils;

// Variables for taskbar theming and sizing
@mixin taskbar-variables {
    --taskbar-height: clamp(44px, 5svh, 56px);
    --taskbar-padding-inline: clamp(8px, 2vw, 16px);
    --taskbar-gap: clamp(6px, 1.2vw, 10px);
    --task-size: clamp(32px, 4.2svh, 40px);
    --task-radius: 10px;
    --taskbar-bg: color-mix(in oklab, var(--c2-surface(0.0, var(--current)), #0b0b0c) 70%, transparent);
    --taskbar-border: color-mix(in oklab, var(--c2-on-surface(0.0, var(--current)), #ffffff) 15%, transparent);
    --taskbar-shadow: 0 -8px 24px -12px color-mix(in oklab, #000 65%, transparent);
}

// Base layout for taskbar
@mixin taskbar-layout {
    @include l.display(flex, row, center, start);

    //
    & {
        z-index: 1000;
        position: fixed;
        inset-block-end: env(safe-area-inset-bottom, 0px);
        inset-inline-start: 50%;
        transform: translateX(-50%);
        overflow: hidden;
        overflow-x: scroll;
        border-radius: 0.5rem;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
        scrollbar-gutter: stable;
        padding: 0px;
        border: 0px none transparent;
    }

    //
    & {
        min-inline-size: 0px;
        inline-size: fit-content;
        block-size: calc(var(--taskbar-height) + env(safe-area-inset-bottom, 0px));
    }

    //
    & {
        gap: var(--taskbar-gap);
    }

    //
    & {
        background-color: transparent;
        backdrop-filter: saturate(120%) blur(12px);
        -webkit-backdrop-filter: saturate(120%) blur(12px);
    }

    //
    & {
        box-shadow: var(--taskbar-shadow);
    }

    //
    & {
        overflow: hidden;
        overflow-x: auto;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
    }

    //
    &::-webkit-scrollbar {
        display: none;
        inline-size: 0;
        block-size: 0;
    }

    //
    & {
        scroll-snap-type: x proximity;
    }
}

// Desktop specific adjustments
@mixin taskbar-type-desktop {
    & {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
}

// Mobile specific adjustments
@mixin taskbar-type-mobile {
    & {
        place-content: center;
        place-items: center;
        place-self: center;
        flex-direction: row;
        justify-content: space-evenly;
        gap: clamp(8px, 3vw, 18px);
        padding-inline: clamp(10px, 4vw, 18px);
    }
}

// Slot children defaults
@mixin taskbar-children {
    & > ::slotted(ui-task) {
        scroll-snap-align: start;
        inline-size: fit-content;
    }
}

// Focused task colors parameterized by scheme
@mixin taskbar-focus-colors($bg: var(--c2-surface(0.0, var(--current))), $fg: var(--c2-on-surface(0.0, var(--current)))) {
    & > ::slotted(ui-task[data-focus]) { background-color: $bg; color: $fg; }
}

// Task base styles shared by any task-like button
@mixin task-base {
    --task-size: clamp(32px, 4.2svh, 40px);
    --task-radius: 10px;
    --task-bg: color-mix(in oklab, var(--c2-surface(0.0, var(--current)), #0b0b0c) 12%, transparent);
    --task-fg: var(--c2-on-surface(0.0, var(--current)));
    --task-border: color-mix(in oklab, var(--c2-on-surface(0.0, var(--current)), #ffffff) 10%, transparent);

    & {
        display: inline-grid !important;
        grid-template-areas: "icon title";
        grid-auto-flow: column;
        grid-template-columns: minmax(0px, 1fr);
        grid-template-rows: minmax(0px, 1fr);
        place-content: center !important;
        place-items: center !important;
        gap: 0px;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
        scrollbar-gutter: stable;
        box-sizing: border-box;
    }

    & {
        border-radius: 0px;
        border: 0px none transparent;
        border-block-end-width: 0.25rem;
        border-block-end-style: solid;
        border-block-end-color: transparent;
        padding-block-start: 0.25rem;
    }

    & {
        inline-size: calc(var(--task-size) * 1.4);
        block-size: stretch;
    }

    & {
        color: var(--task-fg);
        --icon-color: var(--task-fg);
        background-color: var(--task-bg);
        backdrop-filter: blur(6px) saturate(120%);
        -webkit-backdrop-filter: blur(6px) saturate(120%);
    }

    & {
        box-shadow:
            0 1px 0 color-mix(in oklab, #fff 6%, transparent) inset,
        0 6px 14px -8px color-mix(in oklab, #000 50%, transparent);
    }

    & {
        cursor: pointer;
        transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
}

// Task states
@mixin task-states {
    @include utils.when-focus-visible {
        outline: 2px solid color-mix(in oklab, var(--c2-on-surface(0.0, var(--current)), #ffffff) 70%, transparent);
        outline-offset: 2px;
    }

    @include utils.when-hover {
        --task-bg: color-mix(in oklab, var(--c2-surface(0.0, var(--current)), #0b0b0c) 18%, transparent);
        transform: translateY(1px) scale(.98);
    }
}

// Task slots
@mixin task-slots {
    & > .task-icon {
        & {
            padding: 0.25rem;
            inline-size: var(--task-size);
            block-size: var(--task-size);
        }

        & > ui-icon {
            inline-size: auto;
            block-size: stretch;
            aspect-ratio: 1 / 1;
            color: var(--icon-color);
        }
    }

    & > .task-title {
        & {
            grid-area: title;
            font: 500 12px/1.2 system-ui, ui-sans-serif;
            opacity: .9;
            display: none;
        }
    }
}