input[type='range'] {
  margin: var(--range-margin);
  padding: var(--range-padding);
  width: 100%;
  height: auto;
  font-size: var(--range-height);
  color: var(--range-track-background);
  border: none;
  background: transparent;
  border-radius: var(--input-border-radius);
  box-shadow: none !important;
  -webkit-appearance: none;
  transition: all var(--speed) ease-in-out;

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: calc(0.5em - (var(--range-thumb-height) / 2));
    height: var(--range-thumb-height);
    width: var(--range-thumb-width);
    cursor: pointer;
    background: var(--range-thumb-background);
    border-width: var(--range-thumb-border-width);
    border-style: var(--range-thumb-border-style);
    border-color: var(--range-thumb-border-color);
    border-radius: var(--range-thumb-border-radius);
    box-shadow: var(--range-thumb-box-shadow);
    transition: all var(--speed) ease-in-out;
  }

  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 1em;
    cursor: pointer;
    background: currentColor;
    border-width: var(--range-track-border-width);
    border-style: var(--range-track-border-style);
    border-color: var(--range-track-border-color);
    border-radius: var(--range-track-border-radius);
    box-shadow: var(--range-track-box-shadow);
    transition: all var(--speed) ease-in-out;
  }

  &::-moz-range-thumb {
    height: var(--range-thumb-height);
    width: var(--range-thumb-width);
    cursor: pointer;
    background: var(--range-thumb-background);
    border-width: var(--range-thumb-border-width);
    border-style: var(--range-thumb-border-style);
    border-color: var(--range-thumb-border-color);
    border-radius: var(--range-thumb-border-radius);
    box-shadow: var(--range-thumb-box-shadow);
    transition: all var(--speed) ease-in-out;
  }

  &::-moz-range-track {
    width: 100%;
    height: 1em;
    cursor: pointer;
    background: currentColor;
    border-width: var(--range-track-border-width);
    border-style: var(--range-track-border-style);
    border-color: var(--range-track-border-color);
    border-radius: var(--range-track-border-radius);
    box-shadow: var(--range-track-box-shadow);
    transition: all var(--speed) ease-in-out;
  }

  &::-ms-thumb {
    height: var(--range-thumb-height);
    width: var(--range-thumb-width);
    cursor: pointer;
    background: var(--range-thumb-background);
    border-width: var(--range-thumb-border-width);
    border-style: var(--range-thumb-border-style);
    border-color: var(--range-thumb-border-color);
    border-radius: var(--range-thumb-border-radius);
    box-shadow: var(--range-thumb-box-shadow);
    transition: all var(--speed) ease-in-out;
  }

  &::-ms-fill-lower {
    width: 100%;
    height: 1em;
    cursor: pointer;
    background: currentColor;
    border-width: var(--range-track-border-width);
    border-style: var(--range-track-border-style);
    border-color: var(--range-track-border-color);
    border-radius: var(--range-track-border-radius);
    box-shadow: var(--range-track-box-shadow);
    transition: all var(--speed) ease-in-out;
  }

  &::-ms-fill-upper {
    width: 100%;
    height: 1em;
    cursor: pointer;
    background: currentColor;
    border-width: var(--range-track-border-width);
    border-style: var(--range-track-border-style);
    border-color: var(--range-track-border-color);
    border-radius: var(--range-track-border-radius);
    box-shadow: var(--range-track-box-shadow);
    transition: all var(--speed) ease-in-out;
  }

  &::-ms-track {
    width: 100%;
    height: 1em;
    cursor: pointer;
    background: currentColor;
    border-width: var(--range-track-border-width);
    border-style: var(--range-track-border-style);
    border-color: var(--range-track-border-color);
    border-radius: var(--range-track-border-radius);
    box-shadow: var(--range-track-box-shadow);
    transition: all var(--speed) ease-in-out;
    color: transparent;
  }

  &:hover {
    color: var(--range-track-hover-background);
    background: transparent;

    &::-webkit-slider-thumb {
      background: var(--range-thumb-hover-background);
    }

    &::-webkit-slider-runnable-track {
      border-color: var(--range-track-hover-border-color);
      box-shadow: var(--range-track-hover-box-shadow);
    }

    &::-moz-range-thumb {
      border-color: var(--range-thumb-hover-border-color);
    }

    &::-ms-thumb {
      box-shadow: var(--range-thumb-hover-box-shadow);
    }

    &::-ms-fill-lower {
      border-color: var(--range-track-hover-border-color);
      box-shadow: var(--range-track-hover-box-shadow);
    }

    &::-ms-fill-upper {
      border-color: var(--range-track-hover-border-color);
      box-shadow: var(--range-track-hover-box-shadow);
    }

    &::-ms-track {
      border-color: var(--range-track-hover-border-color);
      box-shadow: var(--range-track-hover-box-shadow);
    }
  }

  &:focus {
    color: var(--range-track-focus-background);
    background: transparent;

    &::-webkit-slider-thumb {
      background: var(--range-thumb-focus-background);
      border-color: var(--range-thumb-focus-border-color);
      box-shadow: var(--range-thumb-focus-box-shadow);
    }

    &::-webkit-slider-runnable-track {
      border-color: var(--range-track-focus-border-color);
      box-shadow: var(--range-track-focus-box-shadow);
    }

    &::-moz-range-thumb {
      background: var(--range-thumb-focus-background);
      border-color: var(--range-thumb-focus-border-color);
      box-shadow: var(--range-thumb-focus-box-shadow);
    }

    &::-moz-range-track {
      background: var(--range-thumb-focus-background);
      border-color: var(--range-thumb-focus-border-color);
      box-shadow: var(--range-thumb-focus-box-shadow);
    }

    &::-ms-thumb {
      background: var(--range-thumb-focus-background);
      border-color: var(--range-thumb-focus-border-color);
      box-shadow: var(--range-thumb-focus-box-shadow);
    }

    &::-ms-fill-lower {
      border-color: var(--range-track-focus-border-color);
      box-shadow: var(--range-track-focus-box-shadow);
    }

    &::-ms-fill-upper {
      border-color: var(--range-track-focus-border-color);
      box-shadow: var(--range-track-focus-box-shadow);
    }

    &::-ms-track {
      border-color: var(--range-track-focus-border-color);
      box-shadow: var(--range-track-focus-box-shadow);
    }
  }

  &.error {
    color: var(--error) !important;
  }

  &.warning {
    color: var(--warning) !important;
  }

  &.success {
    color: var(--success) !important;
  }

  &.info {
    color: var(--info) !important;
  }

  &:disabled {
    pointer-events: none;
  }
}