@if $css-variable-enabled {
  $primary-transition: var(--primary-transition);
  $range-border-radius: var(--range-border-radius);
  $range-height: var(--range-height);
  $range-thumb-border-radius: var(--range-thumb-border-radius);
  $range-thumb-height: var(--range-thumb-height);
  $range-thumb-width: var(--range-thumb-width);
}

.#{$prefix}range {
  appearance: none;
  background-color: var(--range-bg-color);
  height: $range-height;
  border-radius: $range-border-radius;
  transition: $primary-transition;

  @mixin base {
    appearance: none;
    background-color: var(--primary-color);
    cursor: pointer;
    border-style: none;
    border-radius: 6px;
    height: $range-thumb-height;
    width: $range-thumb-width;
    border-radius: $range-thumb-border-radius;
  }

  &::-webkit-slider-thumb {
    @include base;
  }

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

  &.#{$prefix}rounded {
    &::-webkit-slider-thumb {
      border-radius: 999999px;
    }

    &::-moz-range-thumb {
      border-radius: 999999px;
    }
  }

  &.#{$prefix}disabled, &[disabled] {
    background-color: var(--item-disabled-bg-color);

    &::-webkit-slider-thumb {
      background-color: var(--item-disabled-fg-color);
      cursor: default;
    }

    &::-moz-range-thumb {
      background-color: var(--item-disabled-fg-color);
      cursor: default;
    }
  }

  // Colors
  @each $name, $color in $item-colors {
    @if $name {
      &.#{$prefix}#{$name} {
        &::-webkit-slider-thumb {
          background-color: $color;
        }

        &::-moz-range-thumb {
          background-color: $color;
        }
      }
    }
  }
}