@require('./variables.styl')

.k-switch
    display inline-block
    vertical-align middle
    background $switch-bg-color
    position relative
    cursor pointer
    user-select none
    overflow hidden
    input
        opacity 0
        position absolute
    .k-bar
        position absolute
        text-align right
        overflow hidden
    .k-wrapper
        display inline-block
        position relative
        z-index 1
        border-radius $switch-handle-border-radius 
    .k-bar
    .k-wrapper
        height 100%
        background $switch-bg-color
        transition all $transition
    .k-handle
        border-radius $switch-handle-border-radius 
        background $switch-handle-bg-color 
        height 100%
        cursor pointer
        transition left $transition 
        display inline-block
        img
            height 100%
            visibility hidden

    // text
    .k-on
    .k-off
        position absolute
        font-size $switch-font-size
        color $switch-color
        text-align center

    // dragging
    &.k-dragging
        .k-bar
        .k-wrapper
            background $switch-checked-bg-color
            transition background $transition 
    &:focus
        outline none
        .k-bar
        .k-wrapper
            background $switch-checked-bg-color

    // size
    for size in large default small mini
        $left = (lookup('$switch-' + size + '-height') / 3)
        &.k-{size}
        &.k-{size} .k-on
        &.k-{size} .k-off
            width lookup('$switch-' + size + '-width')
            height lookup('$switch-' + size + '-height')
        &.k-{size}
            border-radius lookup('$switch-' + size + '-border-radius')
            .k-bar
                width lookup('$switch-' + size + '-height')
                border-radius lookup('$switch-' + size + '-border-radius')
            .k-wrapper
                padding lookup('$switch-' + size + '-padding')
            .k-on
            .k-off
                line-height lookup('$switch-' + size + '-line-height')
                left 0
            .k-on
                padding 0 lookup('$switch-' + size + '-height') 0 $left 
            .k-off
                padding 0 $left 0 lookup('$switch-' + size + '-height')

    // checked
    &.k-checked
        .k-bar
        .k-wrapper
            background $switch-checked-bg-color
        .k-bar
            width 100%

    // disabled
    &.k-disabled
        background $switch-disabled-bg-color
        cursor not-allowed
        .k-bar
        .k-wrapper
            background $switch-disabled-bg-color


requireTheme('switch')