@require('./variables.styl')

.k-slider
    position relative
    outline none
    display inline-block
    width 100%
    .k-bar-wrapper
        cursor pointer
        padding $slider-margin
    .k-slider-wrapper
        // margin $slider-margin
        .k-wrapper
            height $slider-height
            background-color $slider-bg-color
            border-radius $slider-border-radius
            position relative
            user-select none
        .k-box
            // padding $slider-box-padding
            :last-child
                float right
            span
                cursor pointer
        .k-bar
            background-color $slider-bar-color
            position absolute
            height 100%
            border-radius $slider-border-radius
            transition all $transition 
        .k-handle-wrapper
            position absolute
            top 50%
            margin-top s('-%s', $slider-handle-height / 2)
            margin-left s('-%s', $slider-handle-width / 2)
            transition left $transition 
        .k-handle
            height $slider-handle-height
            width $slider-handle-width 
            // position absolute
            text-align center
            transition all $transition 
            border $slider-handle-border 
            border-radius $slider-handle-border-radius 
            background-color $slider-handle-bg-color 
            transition all $transition 
            outline none
            z-index 1
            &:hover
            &:focus
                transform $slider-handle-hover-transform 
                cursor grab
                background-color $slider-handle-hover-bg-color 

    &.k-show-input
        .k-slider-wrapper
            margin-right $slider-spinner-width

    .k-spinner-wrapper
        position absolute
        top 0
        right 0

    &.k-dragging
        .k-bar
            transition none
        .k-handle-wrapper
            transition none
        .k-handle.k-active
            cursor grabbing
            transform $slider-handle-hover-transform 
            background-color $slider-handle-hover-bg-color 

    &.k-disabled
        .k-wrapper
            cursor not-allowed
        .k-bar
            background-color $slider-disabled-color
        .k-handle
            border-color $slider-disabled-color
            &:hover
            &:focus
                background-color $slider-handle-disabled-bg-color
                cursor not-allowed
                transform none

    // stop point
    .k-point
        position absolute
        top 0
        width $slider-stop-point-width
        height $slider-stop-point-height
        background $slider-stop-point-bg-color
        margin-left -(@width / 2)

    // marks
    .k-marks
        position relative
        height $slider-marks-height
        > span
            position absolute
            transform translateX(-50%) 
            white-space nowrap
            // padding $slider-box-padding 
            cursor pointer
            &:first-child
                transform none
            &:last-child
                transform translateX(-100%)
    // tooltip
    .k-handle-wrapper
        .k-tooltip-content
            white-space nowrap

requireTheme('slider')