.slider
  position: relative
  display: flex
  align-items: center
  box-sizing: border-box
  margin-bottom: $margin

  .input
    display: none
    margin-bottom: 0
    max-width: 100px
    width: 25%
    text-align: center

  &-track
    position: relative
    flex: 1
    margin: 10px
    width: auto
    height: 5px
    background-color: $mainColor

  &-handle
    position: absolute
    top: 50%
    margin-top: -7.5px
    margin-left: -7.5px
    width: 15px
    height: 15px
    border: 4px solid $white
    border-radius: 70px
    background-color: $mainColor

  &-label
    position: absolute
    top: -30px
    left: 3px
    z-index: 999
    visibility: hidden
    padding: 6px
    min-width: 40px
    border: 2px solid $black
    border-radius: 4px
    background-color: $white
    color: $black
    text-align: center
    font-size: $fontTiny
    line-height: 1em
    opacity: 0
    transform: translate3d(-50%, 0, 0)

    &:before
      position: absolute
      bottom: -7px
      left: 50%
      display: block
      width: 0
      height: 0
      border-width: 7px 7px 0 7px
      border-style: solid
      border-color: $black transparent transparent transparent
      content: ''
      transform: translate3d(-50%, 0, 0)

    &:after
      position: absolute
      bottom: -5px
      left: 50%
      display: block
      width: 0
      height: 0
      border-width: 7px 7px 0 7px
      border-style: solid
      border-color: $white transparent transparent transparent
      content: ''
      transform: translate3d(-50%, 0, 0)

  &-fill
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    height: 100%
    background-color: $gray

  &:hover,
  &.is-dragging
    .slider-label
      visibility: visible
      opacity: 1

  &.is-editable
    .input
      display: block

  &.is-reverse
    flex-direction: row-reverse