/* "From city centre (km)" slider — two native range inputs stacked on one bar.
   The inputs' own tracks are hidden and only their thumbs take the pointer, so either
   thumb can be dragged; the bar and the filled stretch between the thumbs are drawn by
   the wrapper from --sr-range-from / --sr-range-to (fractions of the scale, written by
   FilterByDistanceField and distance-range.js). */
.sr-range-distance {
    --sr-range-track:        #e9ecef;
    --sr-range-track-border: #adb5bd;
    --sr-range-fill:         #1f496e;
    --sr-range-thumb-bg:     #ffffff;
    --sr-range-thumb-border: #1f496e;
    --sr-range-focus:        #1f496e;
    --sr-range-thumb-size:   1.5rem;
    --sr-range-bar-height:   0.375rem;
}

/* Dark values follow the colour scheme the page declares (color-scheme), so a light-only
   template keeps them light whatever the visitor's system prefers. */
@supports (color: light-dark(#000, #fff)) {
    .sr-range-distance {
        --sr-range-track:        light-dark(#e9ecef, #2b3035);
        --sr-range-track-border: light-dark(#adb5bd, #6c757d);
        --sr-range-fill:         light-dark(#1f496e, #4a90d9);
        --sr-range-thumb-bg:     light-dark(#ffffff, #16191d);
        --sr-range-thumb-border: light-dark(#1f496e, #4a90d9);
        --sr-range-focus:        light-dark(#1f496e, #4a90d9);
    }
}

[data-bs-theme="dark"] .sr-range-distance {
    --sr-range-track:        #2b3035;
    --sr-range-track-border: #6c757d;
    --sr-range-fill:         #4a90d9;
    --sr-range-thumb-bg:     #16191d;
    --sr-range-thumb-border: #4a90d9;
    --sr-range-focus:        #4a90d9;
}

.sr-range-distance__track {
    position: relative;
    height: var(--sr-range-thumb-size);
    margin-block: 0.5rem 1rem;
}

.sr-range-distance__track::before,
.sr-range-distance__track::after {
    content: "";
    position: absolute;
    top: 50%;
    height: var(--sr-range-bar-height);
    transform: translateY(-50%);
    border-radius: var(--sr-range-bar-height);
}

.sr-range-distance__track::before {
    inset-inline: 0;
    background: var(--sr-range-track);
    box-shadow: inset 0 0 0 1px var(--sr-range-track-border);
}

/* A thumb's centre travels from half a thumb in from one end to half a thumb in from
   the other, so the fill is laid on that shorter run. */
.sr-range-distance__track::after {
    inset-inline-start: calc(var(--sr-range-thumb-size) / 2 + (100% - var(--sr-range-thumb-size)) * var(--sr-range-from, 0));
    inset-inline-end: calc(var(--sr-range-thumb-size) / 2 + (100% - var(--sr-range-thumb-size)) * (1 - var(--sr-range-to, 0)));
    background: var(--sr-range-fill);
}

.sr-range-distance__thumb {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: var(--sr-range-thumb-size);
    margin: 0;
    padding: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.sr-range-distance__thumb--front {
    z-index: 2;
}

.sr-range-distance__thumb:focus {
    outline: none;
}

.sr-range-distance__thumb::-webkit-slider-runnable-track {
    height: var(--sr-range-thumb-size);
    background: none;
    border: 0;
}

.sr-range-distance__thumb::-moz-range-track {
    height: var(--sr-range-thumb-size);
    background: none;
    border: 0;
}

.sr-range-distance__thumb::-webkit-slider-thumb {
    box-sizing: border-box;
    width: var(--sr-range-thumb-size);
    height: var(--sr-range-thumb-size);
    border: 2px solid var(--sr-range-thumb-border);
    border-radius: 50%;
    background: var(--sr-range-thumb-bg);
    cursor: grab;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}

.sr-range-distance__thumb::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--sr-range-thumb-size);
    height: var(--sr-range-thumb-size);
    border: 2px solid var(--sr-range-thumb-border);
    border-radius: 50%;
    background: var(--sr-range-thumb-bg);
    cursor: grab;
    pointer-events: auto;
}

.sr-range-distance__thumb:active::-webkit-slider-thumb {
    cursor: grabbing;
}

.sr-range-distance__thumb:active::-moz-range-thumb {
    cursor: grabbing;
}

.sr-range-distance__thumb:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--sr-range-focus);
    outline-offset: 2px;
}

.sr-range-distance__thumb:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--sr-range-focus);
    outline-offset: 2px;
}