@mixin range-track {
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: var(--border-radius-rounded);
  box-shadow: none;
}

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

@mixin range-fill-ms {
  background-color: var(--color-default);
  border: 0;
  border-radius: var(--border-radius-rounded);
  box-shadow: none;
}

@mixin range-thumb {
  width: 20px;
  height: 20px;
  margin: -5px 0 0 0;
  background-color: #fff;
  border: 0;
  border-radius: var(--border-radius-rounded);
  box-shadow: 0 1px 4px -1px #000;
}

@mixin range-thumb-focus {
  border-color: var(--border-color-focus);
  box-shadow: var(--box-shadow-focus);
}

@mixin range-thumb-webkit {
  -webkit-appearance: none;
}

@mixin range-thumb-active {
  transform: scale(1.4);
}

@mixin range-disabled {
  background-color: var(--color-disabled-background);
  cursor: not-allowed;
}

.c-range[type='range'] {
  --range-track-color: var(--color-default);

  width: 100%;
  padding: var(--spacing-small) 0;
  outline: 0;
  -webkit-appearance: none;

  &.c-range--brand {
    --range-track-color: var(--color-brand);
  }

  &.c-range--info {
    --range-track-color: var(--color-info);
  }

  &.c-range--warning {
    --range-track-color: var(--color-warning);
  }

  &.c-range--success {
    --range-track-color: var(--color-success);
  }

  &.c-range--error {
    --range-track-color: var(--color-error);
  }

  &:not(:disabled) {
    &::-webkit-slider-runnable-track {
      background-color: var(--range-track-color);
    }

    &::-moz-range-track {
      background-color: var(--range-track-color);
    }

    &::-ms-track {
      background-color: var(--range-track-color);
    }
  }

  &:not(:disabled):active {
    &::-webkit-slider-thumb {
      transform: scale(1.4);
    }

    &::-moz-range-thumb {
      transform: scale(1.4);
    }

    &::-ms-thumb {
      transform: scale(1.4);
    }
  }

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

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

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

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

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

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

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

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

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

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

.c-range::-webkit-slider-thumb {
  @include range-thumb;
  @include range-thumb-webkit;
}

.c-range::-moz-range-track {
  @include range-track;
}

.c-range::-moz-range-thumb {
  @include range-thumb;
}

.c-range::-ms-track {
  @include range-track;
  @include range-track-ms;
}

.c-range::-ms-fill-lower,
.c-range::-ms-fill-upper {
  @include range-fill-ms;
}

.c-range::-ms-thumb {
  @include range-thumb;
}