// jQuery UI Slider
.ui-slider
  @extend .progress
  margin-bottom: 20px
  position: relative

.ui-slider-handle
  background-color: scale-color($firm, $lightness: -15%)
  border-radius: 50%
  cursor: pointer
  height: 18px
  margin-left: -9px
  position: absolute
  top: -3px
  width: 18px
  z-index: 2
  +transition(background .25s)

  &[style*='100']
    margin-left: -15px

  &:hover,
  &:focus
    background-color: scale-color($firm, $lightness: 20%)
    outline: none
  &:active
    background-color: scale-color($firm, $lightness: -15%)

.ui-slider-range
  background-color: $firm
  border-radius: 30px 0 0 30px
  display: block
  height: 100%
  position: absolute
  z-index: 1

.ui-slider-segment
  background-color: scale-color(desaturate($base, 15%), $lightness: 80%)
  border-radius: 50%
  float: left
  height: 6px
  margin: 3px -6px 0 25%
  width: 6px