.slider {
  --track-width: 6px;
  --track-color: var(--slider-background);
  --track-radius: 10px;
  --thumb-size: 20px;
  --thumb-color: var(--slider-thumb-background);
  --thumb-color-active: var(--color-scale-slider);
  --buffer-width: 22px;
  --buffer-color: var(--track-color);
}

.slider {
  display: block;
  border-radius: var(--track-radius);
  position: relative;
  background: var(--track-color);
}

.slider__horizontal {
  height: var(--track-width);
  width: 100%;
}

.slider__vertical {
  height: 100%;
  width: var(--track-width);
}

.slider-track {
  display: none;
}

.slider-thumb {
  cursor: pointer;
  display: inline-block;
  width: var(--thumb-size);
  height: var(--thumb-size);
  position: absolute;
  background: white;
  border-radius: 50%;
  border: 1px solid white;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 5px var(--thumb-color);
}

.slider-thumb__horizontal {
  top: calc(var(--thumb-size)/-2 + (var(--track-width)/2));
  left: 0;
}

.slider-thumb__vertical {
  left: calc(var(--thumb-size)/-2 + (var(--track-width)/2));
  bottom: 0;
}

.slider-thumb:active {
  background: var(--thumb-color-active);
}

.slider-buffer {
  position: absolute;
  bottom: 33% !important;
  height: 3px !important;
  border-radius: var(--track-radius);
  width: var(--buffer-width);
  left: calc(var(--buffer-width)/-2 + (var(--track-width)/2));
  background: var(--buffer-color);
}

input[type="range"]:focus + .slider .slider-thumb {
  background: var(--thumb-color-active);
}