@require('./variables.styl')
@require('../../styles/mixin.styl')

types = primary warning danger active success
sizes = large small mini

.k-btn
    cursor pointer
    display inline-block
    height $btn-height
    // line-height s('calc(%s - 2px)', $btn-height)
    padding $btn-padding
    outline none
    // border none
    vertical-align middle
    color $btn-color
    background-color $btn-bg-color
    text-align center
    border-radius $btn-border-radius
    transition all $transition 
    border 1px solid $btn-border-color
    font-size $btn-font-size
    white-space nowrap
    button& > span
        vertical-align middle
        line-height s('calc(%s - 2px)', $btn-height)
    &:hover
    &:focus
        border-color $btn-hover-border-color
        color $btn-hover-color
    &:active
        background-color palette($primary-color, -4)
    for type in types 
        &.k-{type}
            background-color lookup('$btn-' + type + '-bg-color')
            color lookup('$btn-' + type + '-color')
            border-color lookup('$btn-' + type + '-border-color')
            &:hover
            &:focus
                background-color palette(@background-color, -1)
                border-color lookup('$btn-' + type + '-hover-border-color')
            &:active
                background-color palette(@background-color, 1)
                border-color palette(@border-color, 1) 
    // secodary type
    &.k-secondary
        color $btn-secondary-color
        border-color $btn-secondary-border-color
        &:hover
        &:focus
            background-color $btn-secondary-hover-bg-color
        &:active
            background-color $btn-secondary-active-bg-color
    // disabled
    &.k-disabled
        &, &:hover
            color $btn-disabled-color 
            background-color $btn-disabled-bg-color 
            border-color $btn-disabled-border-color 
            cursor not-allowed

    // none & link
    &.k-none
    &.k-link
        &, &:hover
            border none
            background-color transparent
        &.k-active
            color $primary-color
    &.k-link
        color $link-color
        &:hover
            color $link-hover-color


    // size
    for size in sizes 
        &.k-{size}
            font-size lookup('$btn-' + size + '-font-size')
            height lookup('$btn-' + size + '-height')
            padding lookup('$btn-' + size + '-padding')
            .k-icon
                line-height s('calc(%s - 2px)', lookup('$btn-' + size + '-height'))
                // line-height lookup('$btn-' + size + '-height')
            &.k-btn-icon
                width @height
            button& > span
                line-height s('calc(%s - 2px)', lookup('$btn-' + size + '-height'))

    // icon
    .k-icon
        // font-size inherit
        vertical-align middle
        line-height s('calc(%s - 2px)', $btn-height)
        // for IE10 and above
        /_:-ms-lang(x), &
            line-height $btn-height
        // line-height $btn-height
        &:before
            font-size inherit
        + span
            margin-left $btn-icon-margin-right 
            // vertical-align middle
    &.k-icon-right
        .k-icon
            margin-left $btn-icon-margin-right 
    &.k-btn-icon
        width @height
        padding 0
        .k-icon
            margin 0
            // font-size $btn-btn-icon-font-size

    // fluid
    &.k-fluid
        width 100%
        padding 0

    // shape
    &.k-circle
        border-radius unit($btn-large-height / 2, rem)

    // loading
    &.k-loading
        &, &:hover
            background-color palette($btn-bg-color, -2)
            color palette($btn-color, -2)
            border-color palette($btn-border-color, -2)
        .k-icon:not(.icon-loading)
            display none
        for type in types 
            &.k-{type}
                &, &:hover
                    background-color palette(lookup('$btn-' + type + '-bg-color'), -2)
                    color palette(lookup('$btn-' + type + '-color'), -2)
                    border-color palette(lookup('$btn-' + type + '-border-color'), -2)
        &:not(.k-btn-icon):not(.k-icon-left):not(.k-icon-right)
            padding-left s("calc(%s + 1em)", getLeft($btn-padding))
            .icon-loading
                margin-left -1em
            for size in sizes 
                &.k-{size}
                    padding-left s("calc(%s + 1em)", getLeft(lookup('$btn-' + size + '-padding')))

    // radio
    input
        position absolute
        opacity 0
        width 0
        height 0

    // let non-button element vertical align middle
    &:not(button)
        display inline-flex
        align-items center
        justify-content center
        // it will cause icon can not vertical align middle with text 
        // .k-icon
        //     line-height inherit

    // ghost
    &.k-ghost
        background transparent
        color $btn-ghost-color
        &:hover
        &:active
            background transparent
        &:hover
            color $btn-ghost-hover-color
        &:active
            color $primary-color
        &.k-default
            border-color $btn-default-ghost-border-color
            &:hover
                border-color $btn-default-ghost-hover-border-color
            &:active
                border-color $primary-color
        for type in types
            &.k-{type}
                color lookup('$btn-' + type + '-ghost-color')
                &:hover
                    color palette(@color, -1)
                    border-color palette(@color, -1)
                &:active
                    color palette(@color, 1) 
                    border-color palette(@color, 1)
        // disabled
        &.k-disabled
            &, &:hover
                color $btn-disabled-color 
                border-color $btn-disabled-ghost-border-color 
                background-color transparent

// buttons
.k-btns
    display inline-block
    vertical-align middle
    .k-btn
        margin 0
        vertical-align middle
        &:hover
        &:focus
        &.k-active
            z-index 1
            position relative
    // fluid
    &.k-fluid
        width 100%

    // horizontal
    &:not(.k-vertical)
        > .k-btn
            &:not(:first-child)
                margin-left -1px // !important
                &:not(:last-child)
                    border-radius 0
            &:not(:only-child):first-child
                border-top-right-radius 0
                border-bottom-right-radius 0
            &:not(:only-child):last-child
                border-top-left-radius 0
                border-bottom-left-radius 0
            for type in types
                if type != 'active'
                    &.k-{type}:not(:first-child)
                        border-left-color lookup('$btns-' + type + '-border-color')
                    &.k-{type}:not(:last-child)
                        border-right-color lookup('$btns-' + type + '-border-color')

        // for tooltip wrap it in vue
        > .k-tooltip
            &:not(:first-child)
                .k-btn
                    margin-left -1px
                &:not(last-child)
                    .k-btn
                        border-radius 0
            &:not(:only-child):first-child
                .k-btn
                    border-top-right-radius 0
                    border-bottom-right-radius 0
            &:not(:only-child):last-child
                .k-btn
                    border-top-left-radius 0
                    border-bottom-left-radius 0
            for type in types
                if type != 'active'
                    &:not(:first-child)
                        .k-btn.k-{type}
                            border-left-color lookup('$btns-' + type + '-border-color')
                    &:not(:last-child)
                        .k-btn.k-{type}
                            border-right-color lookup('$btns-' + type + '-border-color')

        &.k-fluid
            display flex
            > .k-btn
            > .k-tooltip
                flex 1
            > .k-tooltip .k-btn
                width 100%

    // vertical
    &.k-vertical
        > .k-btn
            display block
            &:not(.k-btn-icon)
                width 100%
            &:not(:first-child)
                margin-top -1px
                &:not(:last-child)
                    border-radius 0
            &:not(:only-child):first-child
                border-bottom-left-radius 0
                border-bottom-right-radius 0
            &:not(:only-child):last-child
                border-top-left-radius 0
                border-top-right-radius 0
            for type in types
                if type != 'active'
                    &.k-{type}:not(:first-child)
                        border-top-color lookup('$btns-' + type + '-border-color')
                    &.k-{type}:not(:last-child)
                        border-bottom-color lookup('$btns-' + type + '-border-color')
        > .k-tooltip
            display block
            .k-btn:not(.k-btn-icon)
                width 100%
            &:not(:first-child)
                margin-top -1px
                &:not(:last-child)
                    .k-btn
                        border-radius 0
            &:not(:only-child):first-child
                .k-btn
                    border-bottom-left-radius 0
                    border-bottom-right-radius 0
            &:not(:only-child):last-child
                .k-btn
                    border-top-left-radius 0
                    border-top-right-radius 0
            for type in types
                if type != 'active'
                    &:not(:first-child)
                        .k-btn.k-{type}
                            border-top-color lookup('$btns-' + type + '-border-color')
                    &:not(:last-child)
                        .k-btn.k-{type}
                            border-bottom-color lookup('$btns-' + type + '-border-color')
            

requireTheme('button')