// @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 {
  .slider {
    // Webkit
    &__range::-webkit-slider-runnable-track {
      @include bg-variants() {
        background: variant-property('formInputFillPrimary');
      }
    }

    &__range::-webkit-slider-thumb {
      @include bg-variants() {
        @include range-slider-thumb(variant-property('formInputFillPrimary'));
        box-shadow: webkit-slider-thumb-shadow(
          variant-property('formInputFillPrimary'),
          1
        );
      }
    }

    &__range:focus::-webkit-slider-thumb {
      @include bg-variants() {
        outline: variant-property('formInputFillPrimary') solid 2px;
        border: 2px solid variant-property('background');
      }
    }

    // Firefox
    &__range::-moz-range-track {
      @include bg-variants() {
        background: variant-property('formInputFillPrimary');
      }
    }

    &__range::-moz-range-thumb {
      @include bg-variants() {
        background: variant-property('formInputFillPrimary');
      }
    }

    &__range:focus::-moz-range-thumb {
      @include bg-variants() {
        outline: variant-property('formInputFillPrimary') solid 2px;
        border: 2px solid variant-property('background');
      }
    }

    // Internet Explorer
    &__range::-ms-fill-upper {
      @include bg-variants() {
        background: variant-property('formInputFillPrimary');
      }
    }

    &__range::-ms-thumb {
      @include bg-variants() {
        background: variant-property('formInputFillPrimary');
      }
    }

    &__range:focus::-ms-thumb {
      @include bg-variants() {
        outline: variant-property('formInputFillPrimary') solid 2px;
        border: 2px solid variant-property('background');
      }
    }
  }
}