@charset "UTF-8";

// Range inputs

[type='range'] {
  -webkit-appearance: none;
  border: 0;
  padding-left: 0;
  width: 100%;
}

[type='range']:focus {
  box-shadow: none;
  outline: none;
}

[type='range']::-webkit-slider-runnable-track {
  background: $su-color-cool-grey;
  border: 1px solid $su-color-driftwood;
  cursor: pointer;
  height: 1.2rem;
  width: 100%;
}

[type='range']::-moz-range-track {
  background: $su-color-digital-red;
  border: 1px solid $su-color-driftwood;
  cursor: pointer;
  height: 1.2rem;
  width: 100%;
}

[type='range']::-ms-track {
  background: transparent;
  color: transparent;
  cursor: pointer;
  height: 1.2rem;
  width: 100%;
}

[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid $su-color-driftwood;
  height: 2.2rem;
  border-radius: 1.5rem;
  background: $su-color-cool-grey;
  cursor: pointer;
  margin-top: -0.65rem;
  width: 2.2rem;
}

[type='range']::-moz-range-thumb {
  background: $su-color-cool-grey;
  border: 1px solid $su-color-driftwood;
  border-radius: 1.5rem;
  cursor: pointer;
  height: 2.2rem;
  width: 2.2rem;
}

[type='range']::-ms-thumb {
  background: $su-color-cool-grey;
  border: 1px solid $su-color-driftwood;
  border-radius: 1.5rem;
  cursor: pointer;
  height: 2.2rem;
  width: 2.2rem;
}

[type='range']::-ms-fill-lower {
  background: $su-color-cool-grey;
  border: 1px solid $su-color-driftwood;
  border-radius: 2rem;
}

[type='range']::-ms-fill-upper {
  background: $su-color-cool-grey;
  border: 1px solid $su-color-driftwood;
  border-radius: 2rem;
}

[type='range']:focus::-webkit-slider-thumb {
  border: 2px solid $su-color-driftwood;
}

[type='range']:focus::-moz-range-thumb {
  border: 2px solid $su-color-driftwood;
}

[type='range']:focus::-ms-thumb {
  border: 2px solid $su-color-driftwood;
}
