// @range-slider-thumb

@mixin range-slider-thumb($thumb-color) {
  background: $thumb-color;
  border-radius: 100%;
  border: 0;
  height: $slider-range-thumb-size;
  width: $slider-range-thumb-size;
  transition: background-color 150ms;
}

// @webkit-slider-thumb-shadow($i)
//
// Webkit cannot style progress so fake it with a long shadow on the thumb element
@function webkit-slider-thumb-shadow($thumb-color: $color-brand--one, $i: 1) {
  $val: #{$i}px 0 0 -#{($slider-range-thumb-size - 2px) / 2} #{$thumb-color};

  @if $i == 1 {
    @for $k from 2 through $slider-max-width {
      $val: #{$val}, webkit-slider-thumb-shadow($thumb-color, $k);
    }
  }

  @return $val;
}

@mixin slider-background-mapping {
}