.range-input {
  appearance: none; // Hides the slider so that custom slider can be made
  width: 100%; // Specific width is required for Firefox.
  background: transparent; // Otherwise white in Chrome
  border-radius: 5px;
  height: 4px;
}

.range-input[disabled] {
  opacity: 0.7;
  background: var(--range-input-background);
  cursor: not-allowed;
}

.range-input--error {
  height: 4px;
  background: @input-background-error;
  border-radius: 5px;
}

.range-input:focus {
  outline-offset: 0;
}

// THUMB
.range-input::-webkit-slider-thumb {
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: url('../../icons/svg/slider-thumb.svg');
  cursor: pointer;
  margin-top: 1px; // You need to specify a margin in Chrome, but in Firefox and IE it is automatic
}

.range-input[disabled]::-webkit-slider-thumb {
  background: var(--range-input-background);
  cursor: not-allowed;
  box-shadow: none;
}

// All the same stuff for Firefox
.range-input::-moz-range-thumb {
  border-width: 0;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: url('../../icons/svg/slider-thumb.svg');
  cursor: pointer;
}

.range-input[disabled]::-moz-range-thumb {
  background: var(--range-input-background);
  cursor: not-allowed;
  box-shadow: none;
}

// All the same stuff for IE
.range-input::-ms-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: url('../../icons/svg/slider-thumb.svg');
  cursor: pointer;
}

.range-input[disabled]::-ms-thumb {
  background: var(--range-input-background);
  cursor: not-allowed;
  box-shadow: none;
}

// TRACK
.range-input::-webkit-slider-runnable-track {
  width: 100%;
  height: 20px;
  cursor: pointer;
}

.range-input::-moz-range-track {
  width: 100%;
  height: 20px;
  cursor: pointer;
  background-color: transparent;
}

.range-input::-ms-track {
  width: 100%;
  height: 20px;
  cursor: pointer;
  color: transparent;
}

.range-input::-ms-fill-lower {
  background: var(--range-input-background);
}

.range-input:focus::-ms-fill-lower {
  background: var(--range-input-background);
}

.range-input::-ms-fill-upper {
  background: var(--range-input-background);
}

.range-input:focus::-ms-fill-upper {
  background: var(--range-input-background);
}