/* ------------------------------------------------------------------------ *\
   mixins.component.range
\* ------------------------------------------------------------------------ */


c-range()
  u-padding--horizontal--sm()
  width: 100%
  -webkit-appearance: none
  outline: none


c-range__track()
  width: 100%
  height: 10px
  border: 0
  border-radius: 30em
  box-shadow: none
  cursor: pointer


c-range__track--ms()
  background-color: transparent
  border-color: transparent
  color: transparent


c-range__fill--ms()
  background-color: nix.skin.color.primary
  border: 0
  border-radius: 0
  box-shadow: none


c-range__thumb()
  u-size(20px 20px)
  margin-top: -5px
  border: 0
  background-color: nix.skin.color.white
  border-radius: 30em
  box-shadow: 0 1px 4px -1px nix.skin.color.black
  cursor: pointer


c-range__thumb--focus()
  border: 1px solid nix.skin.color.secondary
  box-shadow: inset 0 0 0 2px lighten(nix.skin.color.secondary, 20%)


c-range__thumb--webkit()
  -webkit-appearance: none


c-range__thumb--active()
  transform: scale(1.4)


c-range--disabled()
  background-color: lighten(nix.skin.color.gray, 20)
  cursor: not-allowed


c-range--color(track-color = nix.skin.color.default)
  &:not(:disabled)
    &::-webkit-slider-runnable-track
      background-color: track-color

    &::-moz-range-track
      background-color: track-color

    &::-ms-track
      background-color: track-color