/*
    A delicate balance is required here to make the grab bar vertical.
    The input element (#swipe) has base settings that FF and Chr can build on.
    Each setting is crucial for the browser extensions to function.
*/
#swipe {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    /* Negative top + zero track height hides the clickable slice of track
       that would otherwise span the whole map. */
    top: -1px;
    left: 0;
    height: 0;
    width: 100vw;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    z-index: 2;
}

/* Firefox — track must be explicitly transparent or a faint strip shows. */
#swipe::-moz-range-track {
    background: transparent;
    border: none;
    height: 0;
}

/* Firefox — the slim vertical grab bar. The SVG is three white dots
   stacked vertically (a grip handle); 14×42 keeps them at a fixed visible
   size regardless of the thumb's exaggerated height, and "center 150vh"
   places them at the viewport's vertical centre given a 201.7vh thumb
   anchored on an input near y=0. */
#swipe::-moz-range-thumb {
    -moz-appearance: none;
    height: 201.7vh;
    width: 14px;
    border: none;
    border-radius: 2px;
    cursor: col-resize;
    background: url("../img/swipe-bar.svg") var(--accent) no-repeat center 150vh / 14px 42px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

#swipe:hover::-moz-range-thumb,
#swipe:focus::-moz-range-thumb {
    background-color: var(--accent-strong);
}

/* Chrome — same trick: suppress the visible track so only the thumb responds. */
#swipe::-webkit-slider-runnable-track {
    position: relative;
    background: transparent;
    border: none;
    height: 0;
}

/* Chrome — the slim vertical grab bar. Chrome anchors the thumb's top at
   the input's top rather than centring on it, so the thumb extends
   downward from y≈0 to y≈100vh; "center center" puts the grip at ~50vh,
   the viewport's vertical centre. */
#swipe::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 100.8vh;
    width: 14px;
    border: none;
    border-radius: 2px;
    cursor: col-resize;
    background: url("../img/swipe-bar.svg") var(--accent) no-repeat center center / 14px 42px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

#swipe:hover::-webkit-slider-thumb,
#swipe:focus::-webkit-slider-thumb {
    background-color: var(--accent-strong);
}