@import "settings.global";
@import "utilities.boxing";

@mixin range {
  padding: $range-padding;
  outline: 0;
  -webkit-appearance: none;
  width: $range-width
}

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

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

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

@mixin range__thumb {
  height: $range-thumb-height;
  width: $range-thumb-width;
  margin: $range-thumb-margin;
  border: $range-thumb-border;
  background-color: $range-thumb-background-color;
  border-radius: $range-thumb-border-radius;
  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--primary {
  @include range--color($range-primary-background-color);
}

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

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

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