$slider-thumb-color: var(--color-primary) !default;
$slider-thumb-radius: 20px !default;
$slider-thumb-height: 1.5rem !default;
$slider-thumb-width: 1.5rem !default;
$slider-track-height: 8.4px !default;
$slider-track-background: createColor(#dbdbdb) !default;

@mixin sliderThumb() {
  height: var(--thumb-height);
  width: var(--thumb-width);
  border-radius: var(--thumb-radius);
  background-color: var(--thumb-color);
  cursor: pointer;
  margin-top: -8px;
}

@mixin sliderTrack() {
  width: 100%;
  height: var(--track-height);
  cursor: pointer;
  background-color: var(--track-background-color);
}

.is-slider {
  --thumb-color: #{$slider-thumb-color};
  --thumb-radius: #{$slider-thumb-radius};
  --thumb-height: #{$slider-thumb-height};
  --thumb-width: #{$slider-thumb-width};
  --track-height: #{$slider-track-height};
  --track-background-color: #{$slider-track-background};

  width: 100%;

  input[type="range"] {
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    width: 100%;

    &::-webkit-slider-thumb {
      @include sliderThumb();
      -webkit-appearance: none;
    }
    &::-moz-range-thumb {
      @include sliderThumb();
      border-color: transparent;
      -moz-appearance: none;
    }
    &::-ms-thumb {
      @include sliderThumb();
      -ms-appearance: none;
    }

    &::-webkit-slider-runnable-track {
      @include sliderTrack();
    }

    &::-moz-range-track {
      @include sliderTrack();
    }

    &::-ms-track {
      @include sliderTrack();
    }

    &:focus {
      outline: none;
    }
  }
}