/*
 * Filename: QuickSettings.scss
 * FullPath: modules/projects/fl.ui/src/ui/navigation/settings/QuickSettings.scss
 * Change date and time: 20.00.00_03.09.2026
 * Reason for changes: Drop contrast-color()/inherit() — Capacitor WebView drops the rest of the sheet.
 * FIND:chrome-rail
 */

/* Unlayered `:host` rules beat `ux-preload`'s layered `:host{display:none}` default. */
:host {
    display: block;
    box-sizing: border-box;
    contain: layout style;
    pointer-events: auto;
    color-scheme: inherit;
}

:host-context(html[data-theme="light"]),
:host([data-theme="light"]) {
    color-scheme: light only;
}

:host-context(html[data-theme="dark"]),
:host([data-theme="dark"]) {
    color-scheme: dark only;
}

:host([open]) {
    animation: qs-pop-in 140ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

:host([hidden]) {
    display: none !important;
}

@keyframes qs-pop-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@layer components {
    .qs-panel {
        /*
         * NOTE: `--qs-*` are component-scoped aliases DERIVED from canonical `--color-*`
         * (source of truth: veela `core/misc/_tokens.scss`). Values already trace to canonical;
         * the local aliases remain as the QuickSettings contract + shadow-DOM self-sufficiency.
         * Use sites chain `var(--color-*, var(--qs-*))` so canonical wins when veela is loaded.
         */
        --qs-primary: var(--color-primary);
        --qs-surface: var(--color-surface);
        --qs-on-surface: var(--color-on-surface);
        --qs-outline: color-mix(in oklab, var(--color-outline-variant) 80%, transparent);

        box-sizing: border-box;
        display: grid;
        gap: 0.85rem;
        inline-size: min(360px, calc(100vw - 1.5rem));
        max-inline-size: 360px;
        min-inline-size: 320px;
        padding: 0.9rem;
        border-radius: 14px;
        border: 1px solid var(--qs-outline);
        background: var(--qs-surface);
        /* WHY: contrast-color()/inherit() need Chrome flags; replaceSync then drops later rules (sliders, footer). */
        color: var(--color-on-surface, var(--qs-on-surface));
        /* INVARIANT: no backdrop-filter — Win11-like solid panel per spec, keeps perf on low-end devices. */
        box-shadow:
            0 20px 48px -20px rgba(0, 0, 0, 0.4),
            0 2px 8px -2px rgba(0, 0, 0, 0.25);
        font: 500 0.85rem/1.3 ui-sans-serif, system-ui, sans-serif;
        pointer-events: auto;
    }

    .qs-tiles {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }


    .qs-tile-icon {
        /* WHY: Phosphor default --icon-padding: 0.45rem shrinks glyphs to dots in a 1.35rem slot. */
        --icon-size: 1.5rem;
        --icon-padding: 0;
        --icon-color: currentColor;
        flex: 0 0 auto;
        inline-size: var(--icon-size);
        block-size: var(--icon-size);
        min-inline-size: var(--icon-size);
        min-block-size: var(--icon-size);
        line-height: 0;
        color: color-mix(in oklab, var(--color-on-surface, var(--qs-on-surface)) 55%, var(--color-primary, var(--qs-primary)));
    }


    .qs-tile {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-inline-size: 0;
        padding: 0.55rem 0.65rem;
        border: none;
        border-radius: 10px;
        color: inherit;
        background: color-mix(in oklab, var(--qs-on-surface) 8%, transparent);
        color: var(--color-on-surface, var(--qs-on-surface));
        text-align: start;
        cursor: pointer;
        transition: background-color 140ms ease, color 140ms ease;

        &:hover {
            background: color-mix(in oklab, var(--qs-on-surface) 14%, transparent);
        }

        &:active {
            background: color-mix(in oklab, var(--qs-on-surface) 18%, transparent);
        }

        &:focus-visible {
            outline: 2px solid var(--color-primary, var(--qs-primary));
            outline-offset: 2px;
        }

        &[aria-pressed="true"] {
            background: color-mix(in oklab, var(--color-primary, var(--qs-primary)) 26%, transparent);
            color: var(--color-primary, var(--qs-primary));

            .qs-tile-icon {
                --icon-color: currentColor;
            }
        }
    }

    .qs-tile-text {
        display: flex;
        flex-direction: column;
        gap: 0.05rem;
        min-inline-size: 0;
        overflow: hidden;
        color: var(--color-on-surface, var(--qs-on-surface));
    }

    .qs-tile-label {
        font-size: 0.78rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: inherit;
    }

    .qs-tile-sub {
        font-size: 0.68rem;
        font-weight: 500;
        opacity: 0.7;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: inherit;
    }

    .qs-sliders {
        display: grid;
        gap: 0.6rem;
        padding-block-start: 0.7rem;
        border-block-start: 1px solid var(--qs-outline);
        color: var(--color-on-surface, var(--qs-on-surface));
    }

    .qs-slider-row {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        cursor: default;
    }

    .qs-slider-icon {
        --icon-size: 1.35rem;
        --icon-padding: 0;
        --icon-color: currentColor;
        flex: 0 0 auto;
        inline-size: var(--icon-size);
        block-size: var(--icon-size);
        min-inline-size: var(--icon-size);
        min-block-size: var(--icon-size);
        line-height: 0;
        color: inherit;
    }

    .qs-slider-col {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        flex: 1 1 auto;
        min-inline-size: 0;
    }

    .qs-slider-label {
        font-size: 0.68rem;
        font-weight: 500;
        opacity: 0.75;
    }

    /* Minimal native range styling (Win11-like thin track + round thumb). */
    .qs-slider {
        appearance: none;
        -webkit-appearance: none;
        inline-size: 100%;
        block-size: 1.1rem;
        margin: 0;
        background: transparent;
        color: var(--color-on-surface, var(--qs-on-surface));
        cursor: pointer;

        &::-webkit-slider-runnable-track {
            block-size: 4px;
            border-radius: 999px;
            background: color-mix(in oklab, var(--qs-on-surface) 18%, transparent);
        }

        &::-moz-range-track {
            block-size: 4px;
            border-radius: 999px;
            background: color-mix(in oklab, var(--qs-on-surface) 18%, transparent);
        }

        &::-webkit-slider-thumb {
            appearance: none;
            -webkit-appearance: none;
            inline-size: 1rem;
            block-size: 1rem;
            margin-block-start: -6px;
            border-radius: 50%;
            border: none;
            background: var(--color-primary, var(--qs-primary));
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
        }

        &::-moz-range-thumb {
            inline-size: 1rem;
            block-size: 1rem;
            border-radius: 50%;
            border: none;
            background: var(--color-primary, var(--qs-primary));
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
        }

        &:focus-visible::-webkit-slider-thumb {
            outline: 2px solid var(--color-primary, var(--qs-primary));
            outline-offset: 2px;
        }
    }

    .qs-footer {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.4rem;
        padding-block-start: 0.65rem;
        border-block-start: 1px solid var(--qs-outline);
    }

    .qs-footer-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        min-inline-size: 0;
        padding: 0.28rem 0.55rem;
        border: none;
        border-radius: 8px;
        background: color-mix(in oklab, var(--qs-on-surface) 8%, transparent);
        color: var(--color-on-surface, var(--qs-on-surface));
        font: 600 0.72rem/1.2 ui-sans-serif, system-ui, sans-serif;
        cursor: pointer;
        transition: background-color 140ms ease;

        &:hover {
            background: color-mix(in oklab, var(--qs-on-surface) 14%, transparent);
        }

        &:active {
            background: color-mix(in oklab, var(--qs-on-surface) 18%, transparent);
        }

        &:focus-visible {
            outline: 2px solid var(--color-primary, var(--qs-primary));
            outline-offset: 2px;
        }
    }

    .qs-footer-icon {
        --icon-size: 1.15rem;
        --icon-padding: 0;
        --icon-color: currentColor;
        flex: 0 0 auto;
        inline-size: var(--icon-size);
        block-size: var(--icon-size);
        min-inline-size: var(--icon-size);
        min-block-size: var(--icon-size);
        line-height: 0;
    }
}