// sizes
@property --ui-slider-track-size { syntax: "<percentage> | <length>"; inherits: true; initial-value: 0px; }
@property --ui-slider-thumb-size { syntax: "<percentage> | <length>"; inherits: true; initial-value: 0px; }

// radius
@property --ui-slider-track-radius { syntax: "<percentage> | <length>"; inherits: true; initial-value: 0px; }
@property --ui-slider-thumb-radius { syntax: "<percentage> | <length>"; inherits: true; initial-value: 0px; }
// gap between thumb edge and track end caps (horizontal)
@property --ui-slider-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }

// colors
@property --ui-slider-track-color { syntax: "<color>"; inherits: true; initial-value: #0000; }
@property --ui-slider-thumb-color { syntax: "<color>"; inherits: true; initial-value: #0000; }
@property --ui-slider-active-color { syntax: "<color>"; inherits: true; initial-value: #0000; }

//
@layer components {
    :host(ui-slider) {
        &, & .ui-box, & .ui-track, & .ui-thumb {
            box-sizing: border-box;
            transition-behavior: allow-discrete;
            interpolate-size: allow-keywords;
            user-select: none;
            pointer-events: none;
        }

        //
        & {
            // sizes
            --ui-slider-track-size: 0.125rem;
            --ui-slider-thumb-size: 1rem;

            // radius
            --ui-slider-track-radius: 0.0625rem;
            --ui-slider-thumb-radius: 0.5rem;

            // colors
            --ui-slider-thumb-color: --c2-surface(0.0, var(--current));
            --ui-slider-track-color: --c2-surface(0.1, var(--current));
            --ui-slider-active-color: --c2-surface(1.0, var(--current));
        }

        //
        & {
            min-inline-size: 2rem;
            min-block-size: 0px;
            max-inline-size: stretch;
            max-block-size: stretch;
            inline-size: fit-content;
            block-size: fit-content;
        }

        //
        :where(.ui-box) {
            & {
                pointer-events: auto;
                cursor: pointer;
            }

            //
            :where(.ui-track) {
                //
                & {
                    pointer-events: auto;
                    cursor: pointer;

                    //
                    inset-inline-start: 50%;
                    inset-block-start: 50%;
                    transform: translate3d(-50%, -50%, 0px);
                    /* active fill */
                    background-image: linear-gradient(
                        to right,
                        var(--ui-slider-active-color) calc(100% * var(--value, 0)),
                        var(--ui-slider-track-color) 0
                    );
                }
            }

            //
            :where(.ui-thumb) {

                //
                & {
                    --travel-x: calc(100cqi - var(--ui-slider-thumb-size, 0px) * 2 - var(--ui-slider-gap, 0px) * 2);
                    --shift-x: calc(var(--value, 0) * var(--travel-x, 100cqi));

                    //
                    inset: auto;
                    inset-inline-start: 0px;
                    inset-block-start: 50%;
                    transform: translate3d(calc(
                        calc(clamp(0px, calc(var(--drag-x, 0) * 1px + var(--shift-x, 0px)), var(--travel-x, 100cqi)) + var(--ui-slider-thumb-size, 0px) / 2) +
                        var(--ui-slider-gap, 0px)
                        ), -50%, 0px);
                    border-radius: 50%;
                    box-shadow: 0 1px 2px rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.08);
                    z-index: 99;

                    //
                    pointer-events: auto;
                    cursor: grab;

                    //
                    background-color: --c2-surface(0.0, var(--current));
                }

                //
                &:not([data-dragging]) {
                    transition: --translate-x 0.1s ease-in-out;
                    transform: translate3d(calc(
                        calc(clamp(0px, calc(var(--shift-x, 0px)), var(--travel-x, 100cqi)) + var(--ui-slider-thumb-size, 0px) / 2) +
                        var(--ui-slider-gap, 0px)
                        ), -50%, 0px);
                }

                //
                &[data-dragging] {
                    cursor: grabbing;
                    transition: none;
                }

                &:active {
                    cursor: grabbing;
                }
            }
        }

        /* variants declared at root scope */

        //
        ::slotted(input) {
            display: none !important;
        }
    }

    /* variants */
    :host(ui-slider[variant="switch"]) {
        & {
            --ui-slider-track-size: 1.25rem;
            --ui-slider-thumb-size: 1rem;
            --ui-slider-track-radius: calc(var(--ui-slider-track-size) / 2);
            --ui-slider-thumb-radius: 50%;
            --ui-slider-track-color: --c2-on-surface(0.0, var(--current));
            --ui-slider-active-color: --c2-on-surface(-1.0, var(--current));
            --ui-slider-gap: calc((var(--ui-slider-track-size) - var(--ui-slider-thumb-size)) / 2); // small horizontal gap for switch variant
        }

        .ui-box {
            background-color: color-mix(in oklch, var(--ui-slider-active-color) calc(100% * var(--value, 0)), var(--ui-slider-track-color));
            background-image: none;
            pointer-events: auto;
            cursor: pointer;

            .ui-thumb {
                pointer-events: auto;
                cursor: grab;
            }
            .ui-track {
                background-color: transparent;
                background-image: none;
            }
        }

    }

    :host(ui-slider[variant="slider"]) {
        & {
            --ui-slider-track-size: 0.0625rem;
            --ui-slider-thumb-size: 0.75rem;
            --ui-slider-track-radius: 9999px;
            --ui-slider-thumb-radius: 50%;
            --ui-slider-track-color: --c2-on-surface(0.0, var(--current));
            --ui-slider-active-color: --c2-on-surface(-1.0, var(--current));
            --ui-slider-gap: calc((var(--ui-slider-track-size) - var(--ui-slider-thumb-size)) / 2);
        }

        .ui-box {
            pointer-events: auto;
            cursor: pointer;

            .ui-thumb {
                pointer-events: auto;
                cursor: grab;
            }
        }
    }
}