@mixin range-focus {

background-color: color("white");
box-shadow: 0 0 0 units(2px) color($theme-focus-color);

}

@mixin range-track {

background-color: color("base-lightest");
border-radius: radius("pill");
border: units(1px) solid color("base");
cursor: pointer;
height: units(2);
width: 100%;

}

@mixin range-thumb {

@include u-circle($theme-input-select-size);
background: color("base-lightest");
border: none;
box-shadow: 0 0 0 units($theme-input-select-border-width) color("base");
cursor: pointer;

}

@mixin range-ms-fill {

background-color: color("base-lightest");
border-radius: radius("pill");
border: units(1px) solid color("base");

}

.usa-range {

@extend %block-input-general;
@extend %block-input-styles;

}

.usa-range {

appearance: none;
border: none;
padding-left: 1px;
width: 100%;

&:focus {
  outline: none;

  &::-webkit-slider-thumb {
    @include range-focus;
  }

  &::-moz-range-thumb {
    @include range-focus;
  }

  &::-ms-thumb {
    @include range-focus;
  }
}

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

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

&::-ms-track {
  @include range-track;
}

&::-webkit-slider-thumb {
  @include range-thumb;
  appearance: none;
  margin-top: px-to-rem(-3px); // magic number
}

&::-moz-range-thumb {
  @include range-thumb;
}

&::-ms-thumb {
  @include range-thumb;
}

&::-ms-fill-lower {
  @include range-ms-fill;
}

&::-ms-fill-upper {
  @include range-ms-fill;
}

}