@use "sass:math";

[type="range"] {
    $height-track: .25rem;
    $height-thumb: 1.25rem;
    $border-thumb: 2px;
  
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: block;
    width: 100%;
    height: $height-thumb;
    background: transparent;
  
    &::-webkit-slider-runnable-track {
        width: 100%;
        height: $height-track;
        border-radius: var(--border-radius);
        background-color: var(--range-border-color);
    
        @if $enable-transitions {
            transition:
                background-color var(--transition),
                box-shadow var(--transition);
        }
    }
  
    &::-moz-range-track {
      width: 100%;
      height: $height-track;
      border-radius: var(--border-radius);
      background-color: var(--range-border-color);
  
      @if $enable-transitions {
        transition:
          background-color var(--transition),
          box-shadow var(--transition);
      }
    }
  
    &::-ms-track {
      width: 100%;
      height: $height-track;
      border-radius: var(--border-radius);
      background-color: var(--range-border-color);
  
      @if $enable-transitions {
        transition:
          background-color var(--transition),
          box-shadow var(--transition);
      }
    }
  
    &::-ms-fill-lower {
      background-color: var(--border-radius);
    }
  
    &::-webkit-slider-thumb,
    &::-moz-range-thumb,
    &::-ms-thumb {
      -webkit-appearance: none;
      width: $height-thumb;
      height: $height-thumb;
      margin-top: #{(- math.div($height-thumb, 2) + math.div($height-track, 2))};
      border: $border-thumb solid var(--range-thumb-border-color);
      border-radius: 50%;
      background-color: var(--range-thumb-color);
      cursor: pointer;
  
      @if $enable-transitions {
        transition:
          background-color var(--transition),
          transform var(--transition);
      }
    }
  
    &:hover,
    &:focus {
      --range-border-color: var(--range-active-border-color);
      --range-thumb-color: var(--range-thumb-hover-color);
    }
  
    &:active {
      --range-thumb-color: var(--range-thumb-active-color);
  
      &::-webkit-slider-thumb {
        transform: scale(1.25);
      }
  
      &::-moz-range-thumb {
        transform: scale(1.25);
      }
  
      &::-ms-thumb {
        transform: scale(1.25);
      }
    }
}