.slider
    position: relative
    display: flex
    margin-bottom: $margin

    input
        position: relative
        display: none
        -webkit-appearance: none
        border: 1px solid $gray
        border-radius: 4px
        background-color: $white
        padding: 5px 10px
        width: 100px
        margin-{$start-direction}: 20px
        text-align: center
        color: $dark

        &:focus
            outline: none

    input[type=number]::-webkit-inner-spin-button
    input[type=number]::-webkit-outer-spin-button
        appearance: none
        margin: 0;

    &.is-editable
        input
            display: block

    &-body
        position: relative
        flex: 1
        margin: 10px
        width: auto
        height: 5px
        background-color: $mainColor
        &:hover
        &.is-dragging
            .slider-label
                opacity: 1
                visibility: visible

    &-handle
        position: absolute
        width: 15px
        height: 15px
        margin-left: (@width / -2)
        margin-top: -5px
        border: 4px solid $white
        border-radius: 70px
        background-color: $mainColor
        box-shadow: 0 2px 4px $shadow

    &-label
        position: absolute
        top: -40px
        text-align: center
        background-color: $white
        color: $dark
        border: 1px solid $gray
        border-radius: 4px
        padding: 7px
        opacity: 0
        box-sizing: border-box
        font-size: 10px
        z-index: 999
        width: 50px
        left: -21.5px
        visibility: hidden
        &:before
            position: absolute
            display: block
            content: ''
            {$start-direction}: 0
            bottom: -7px
            left: 18px
            width: 0
            height: 0
            border-style: solid
            border-width: 7px 7px 0 7px
            border-color: $gray transparent transparent transparent
        &:after
            position: absolute
            display: block
            content: ''
            {$start-direction}: 0
            bottom: -6px
            left: 18px
            width: 0
            height: 0
            border-style: solid
            border-width: 7px 7px 0 7px
            border-color: $white transparent transparent transparent

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