// @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 {
      // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
      .bg-brand--dark-blue &,
      .bg-brand--blue & {
        background: $color-brand--four;
      }
      .bg-brand--turquoise &,
      .bg-brand--yellow &,
      .bg-brand--red & {
        background: $color-alpha--two-30;
      }

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

    &__range::-webkit-slider-thumb {
      // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
      .bg-brand--blue &,
      .bg-brand--turquoise &,
      .bg-brand--yellow &,
      .bg-brand--red & {
        @include range-slider-thumb($color-brand--two);
        box-shadow: webkit-slider-thumb-shadow($color-brand--two, 1);
      }

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

    // Firefox
    &__range::-moz-range-track {
      // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
      .bg-brand--blue & {
        background: $color-brand--two;
      }
      @include bg-variants() {
        background: variant-property('formInputFillPrimary');
      }
    }

    &__range::-moz-range-thumb {
      // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
      .bg-brand--blue & {
        @include range-slider-thumb($color-brand--two);
      }

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

    // Internet Explorer
    &__range::-ms-fill-upper {
      // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
      .bg-brand--blue & {
        background: $color-brand--two;
      }
      @include bg-variants() {
        background: variant-property('formInputFillPrimary');
      }
    }

    &__range::-ms-thumb {
      // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
      .bg-brand--blue & {
        @include range-slider-thumb($color-brand--two);
      }
      @include bg-variants() {
        background: variant-property('formInputFillPrimary');
      }
    }
  }
}
