/*
 * Range slider base. The track fill itself is painted as an inline gradient
 * from js/ui/range.js — this file only styles track geometry and the thumb.
 */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

/*
 * Cross-axis size is set with block-size, not height: for a vertical slider
 * (writing-mode: vertical-lr) the block axis runs across the track in both
 * orientations, so one rule serves horizontal and vertical inputs.
 */
input[type="range"]::-webkit-slider-runnable-track {
    block-size: var(--range-track-height);
    border-radius: var(--radius-pill);
}

input[type="range"]::-moz-range-track {
    block-size: var(--range-track-height);
    border-radius: var(--radius-pill);
}

input[type="range"]::-ms-fill-lower {
    background: var(--color-accent);
    border-radius: var(--radius-pill);
}

input[type="range"]::-ms-fill-upper {
    background: var(--color-gray);
    border-radius: var(--radius-pill);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    /* centre the thumb across the track, whatever the two sizes are */
    margin-block: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
    margin-inline: 0;
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    border-radius: 100%;
    background: var(--color-white)
        radial-gradient(circle at center, var(--color-accent) 33%, transparent 33%);
    position: relative;
    z-index: 2;
    box-shadow: 0px 0px 15px 0px #00000026;
}

input[type="range"]::-moz-range-thumb {
    border: none;
    background-color: var(--color-accent);
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    border-radius: 50%;
}

input[type="range"]:focus {
    outline: none;
}