/* BEGIN DUAL THUMB RANGE SLIDER */
/* See stack.components.interval for implementation */

/* Styles dapted from https://tailwindflex.com/@shariful-islam/multi-range-slider */

/* Custom track (hidden default) */
.interval input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
}

/* Custom thumb styling (Centered) */
.interval input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: white;
  border: 3px solid #23a9f7;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 3;
  transform: translateY(-30%);
}

.interval input[type=range]::-webkit-slider-thumb:hover {
  background: #f7f7f7;
}

.interval input[type=range]::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
  -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}

.interval input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: white;
  border: 3px solid #23a9f7;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
  transform: translateY(-30%);
}

/* END DUAL THUMB RANGE SLIDER */