/* RAMEN TEXT RANGE COMPONENT
 *
 * Required Global Variables:
 *
 * $form-range-background-color: Sets the colour for the track background
 * $form-range-background-fill-color: Sets the colour for the track background
 * $form-range-color: Sets the color for the input
 * $form-range-thumb-color: Sets the colour for the thumb
 * $form-range-label-color: Sets the colour for the label value
 *
 * $slider-thumb-size: Sets the size of the thumb tracker
 * $slider-track-height: Sets the height of the slider track
 */

@mixin thumb-style {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  background-color: $form-range-thumb-color;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  height: $slider-thumb-size;
  position: relative;
  width: $slider-thumb-size;

  &:hover,
  &:focus,
  &:active {
    cursor: pointer;
    outline: none;
  }
}

@mixin track-style {
  background: $form-range-background-color;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  height: $slider-track-height;
  width: 100%;

  &:hover,
  &:focus,
  &:active {
    cursor: pointer;
    outline: none;
  }
}

.c-form-range {
  position: relative;

  &:before,
  &:after {
    background-color: $form-range-background-color;
    bottom: -2px;
    content: '';
    height: 10px;
    left: calc(
      25% + #{$slider-thumb-size / 4}
    ); // plus quarter width of circle;
    position: absolute;
    width: 2px;
    z-index: -1;
  }

  &:after {
    left: initial;
    right: calc(
      25% + #{$slider-thumb-size / 4}
    ); // minus quarter width of circle
  }

  input {
    -webkit-appearance: none;
    background-color: transparent;
    color: $form-range-color;
    display: block;
    padding-top: $spacing-small;
    padding-bottom: 0; // ie fix
    width: 100%;

    &:hover,
    &:focus,
    &:active {
      cursor: pointer;
      outline: none;
    }

    // ie style left of thumb
    &::-ms-fill-lower {
      background: $form-range-background-fill-color;
      border: 0px solid #000101;
      box-shadow: 0;
    }

    // ie style right of thumb
    &::-ms-fill-upper {
      background: $form-range-background-color;
      border: 0px solid #000101;
      box-shadow: 0;
    }

    // thumb style
    &::-ms-thumb {
      background: $c-black;
      border-radius: 50%;
      border: 1px solid $c-black;
      box-shadow: 0;
      cursor: pointer;
      height: toRems(25px);
      position: relative;
      width: toRems(25px);
    }

    &::-webkit-slider-runnable-track {
      @include track-style;
    }

    &::-moz-range-track {
      @include track-style;
    }

    &::-moz-range-thumb {
      @include thumb-style;
      outline: none;
    }

    &::-moz-focus-outer {
      border: 0;
      outline: none;
    }

    &::-webkit-slider-thumb {
      @include thumb-style;
      margin-top: -($slider-thumb-size / 2) + toRems(2px); // webkit fix for thumb position
    }
  }

  &__value {
    color: $form-range-label-color;
    display: inline-block;
    font-weight: $font-weight-semibold;
    position: relative;
    text-align: center;
    width: auto;

    &:after {
      background-color: $form-range-background-color;
      bottom: -22px;
      content: '';
      height: 10px;
      left: calc(50% - 2px);
      position: absolute;
      width: 3px;
      z-index: -1;
    }
  }

  &__value-wrapper {
    text-align: center;
  }

  // this is the track fill colour
  &__background {
    background: linear-gradient(
      $form-range-background-fill-color,
      $form-range-background-fill-color
    )
      0 / 50% 100% no-repeat transparent;
    bottom: 0;
    height: $slider-track-height + toRems(1px);
    pointer-events: none;
    position: absolute;
    width: calc(100% - #{$slider-thumb-size});
    z-index: 0;
  }

  &__indicator-left {
    color: $form-range-color;
    float: left;
    margin-top: $spacing-xsmall;
  }

  &__indicator-right {
    color: $form-range-color;
    float: right;
    margin-top: $spacing-xsmall;
  }
}