/* Numeric sliders share the zoom control's track and thumb.
   Hue sliders retain their color spectrum. */
@layer range-controls {
    input[type="range"]:not([data-hue]) {
        --range-progress-value: var(--range-progress, var(--zoom-progress, var(--pm-zoom-progress, 0%)));
        appearance: none !important;
        -webkit-appearance: none !important;
        min-width: 0 !important;
        height: var(--range-hit-size, 24px) !important;
        min-height: var(--range-hit-size, 24px) !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    .zoom-range {
        --range-hit-size: 40px;
    }

    input[type="range"]:not([data-hue])::-webkit-slider-runnable-track {
        height: 4px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, #0051bb var(--range-progress-value), #dfe5ec var(--range-progress-value)) !important;
        box-shadow: none !important;
    }

    input[type="range"]:not([data-hue])::-webkit-slider-thumb {
        appearance: none !important;
        -webkit-appearance: none !important;
        box-sizing: border-box !important;
        width: 18px !important;
        height: 18px !important;
        margin-top: -7px !important;
        border: 3px solid #fff !important;
        border-radius: 50% !important;
        background: #0051bb !important;
        box-shadow: 0 2px 5px rgb(0 81 187 / 20%) !important;
        transform: none !important;
    }

    input[type="range"]:not([data-hue])::-moz-range-track {
        height: 4px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #dfe5ec !important;
        box-shadow: none !important;
    }

    input[type="range"]:not([data-hue])::-moz-range-progress {
        height: 4px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #0051bb !important;
    }

    input[type="range"]:not([data-hue])::-moz-range-thumb {
        box-sizing: border-box !important;
        width: 18px !important;
        height: 18px !important;
        border: 3px solid #fff !important;
        border-radius: 50% !important;
        background: #0051bb !important;
        box-shadow: 0 2px 5px rgb(0 81 187 / 20%) !important;
        transform: none !important;
    }

    input[type="range"]:not([data-hue]):focus-visible {
        outline: 2px solid #8bb4eb !important;
        outline-offset: 3px !important;
    }

    input[type="range"]:not([data-hue]):disabled {
        opacity: .45;
        cursor: not-allowed !important;
    }
}