@require('./variables.styl');

.k-checkbox
    display inline-flex
    align-items center
    cursor pointer
    vertical-align middle
    .k-wrapper
        display inline-block
        width $checkbox-width
        height $checkbox-width 
        vertical-align middle
        border 1px solid $checkbox-border-color 
        border-radius $checkbox-border-radius 
        position relative
        transition all $transition
        background $checkbox-bg-color
        flex 0 0 auto
        // inner
        &:before
            content ""
            display block
            position absolute
            width $checkbox-inner-width 
            height $checkbox-inner-height 
            top $checkbox-inner-top 
            left $checkbox-inner-left 
            border $checkbox-inner-border 
            border-top 0
            border-left 0
            transform rotate(45deg) scale(0)
            transition all $transition 

    input
        width 100%
        height 100%
        opacity 0
        cursor pointer
        position absolute
        left 0
        top 0
    .k-text
        vertical-align middle
        margin-left $checkbox-text-margin-left
        display inline-block
        flex 0 1 auto

    // indeterminate
    // checked
    &.k-checked
    &.k-indeterminate
        .k-wrapper
            border-color $checkbox-checked-border-color
            background $checkbox-checked-bg-color
    &.k-indeterminate
        .k-wrapper
            &:before
                transform rotate(90deg) scale(1) 
                border-bottom 0
                left $checkbox-indeterminate-inner-left
    &.k-checked
        .k-wrapper
            &:before
                transform rotate(45deg) scale(1) 

    // focus
    &:focus
        outline none
        .k-wrapper
            border-color $checkbox-checked-border-color 

    // disabled
    &.k-disabled
        color $checkbox-disabled-color
        cursor not-allowed
        .k-wrapper
            border-color $checkbox-disabled-border-color
            background $checkbox-disabled-bg-color
            // checked
            &:before
                border-color $checkbox-disabled-inner-color 
        
requireTheme('checkbox')