@use "sass:math";

$form-range-thumb-width:          1rem !default;
$form-range-thumb-height:          $form-range-thumb-width !default;
$form-range-track-height:         .5rem !default;

$custom-range-tick-height:         $form-range-track-height;
$custom-range-tick-width:         3px;

//Some range styling.
//Using mixins because each major browser needs a separate selector to style parts of the range input, combining selectors would invalidate the whole selector on each browser
@mixin range-track {
  -webkit-appearance: none;
  width: 100%;
  color: transparent;
  background: none;
  border-radius: 999px;
  cursor: pointer;
  border: none;
}

@mixin range-thumb {
  border-radius: 50%;
  position: relative;
  z-index: 1000000;
  background: map-get($theme-colors, "primary");
}

input[type=range] {
  -webkit-appearance: none;
  display: block;
  margin: 0;
  width: 100%;
  background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
  @include range-track();
}
input[type=range]::-moz-range-track {
  @include range-track();
}
input[type=range]::-ms-track {
  @include range-track();
}
input[type=range]::-ms-fill-lower {
  display: none;
}
input[type=range]::-ms-fill-upper {
  display: none;
}
input[type=range]::-webkit-slider-thumb {
  @include range-thumb();
}
input[type=range]::-moz-range-thumb {
  @include range-thumb();
}
input[type=range]::-ms-thumb {
  @include range-thumb();
}


//And now the ticks
.ticks {
  z-index: 0;
  //We need left & right padding that's half the width of the range thumb, so all ticks align with the center of the thumb
  padding: math.div($form-range-thumb-width, 2) math.div($form-range-thumb-height, 2);
}

.range-track {
  height: $form-range-track-height;
  width: 100%;
}

.tick {
  pointer-events: none;
  width: $custom-range-tick-width;
  height: $custom-range-tick-height;
}