@mixin range__track {
  width: $range-width;
  height: $range-height;
  border: $range-border;
  border-radius: $range-border-radius;
  box-shadow: $range-box-shadow;
  cursor: pointer;
}

@mixin range__track--ms {
  border-color: transparent;
  background-color: transparent;
  color: transparent;
}

@mixin range__fill--ms {
  border: $range-border;
  border-radius: $range-border-radius;
  background-color: $range-background-color;
  box-shadow: $range-box-shadow;
}

@mixin range__thumb {
  width: $range-thumb-width;
  height: $range-thumb-height;
  margin: $range-thumb-margin;
  border: $range-thumb-border;
  border-radius: $range-thumb-border-radius;
  background-color: $range-thumb-background-color;
  box-shadow: $range-thumb-box-shadow;
  cursor: pointer;
}

@mixin range__thumb--focus {
  border-color: $range-thumb-focus-border-color;
  box-shadow: $range-thumb-focus-box-shadow;
}

@mixin range__thumb--webkit {
  -webkit-appearance: none;
}

@mixin range__thumb--active {
  transform: scale(1.4);
}

@mixin range--disabled {
  background-color: $range-disabled-background-color;
  cursor: not-allowed;
}

@mixin range--color($track-color: $range-background-color) {
  &:not(:disabled) {
    &::-webkit-slider-runnable-track {
      background-color: $track-color;
    }

    &::-moz-range-track {
      background-color: $track-color;
    }

    &::-ms-track {
      background-color: $track-color;
    }
  }
}

@mixin range--brand {
  @include range--color($range-brand-background-color);
}

@mixin range--info {
  @include range--color($range-info-background-color);
}

@mixin range--warning {
  @include range--color($range-warning-background-color);
}

@mixin range--success {
  @include range--color($range-success-background-color);
}

@mixin range--error {
  @include range--color($range-error-background-color);
}