@require('./variables.styl')

.k-input
    display inline-block
    width $input-width
    vertical-align middle
    .k-wrapper
        display inline-block
        width 100%
        position relative
    .k-inner
        display inline-block
        width 100%
        border $input-border 
        background-color $input-bg-color 
        transition border $transition, background $transition, box-shadow $transition 
        outline none
        position relative
        &:hover
            border $input-hover-border
            z-index 1
        &:focus
            border $input-focus-border
            z-index 1
    // fluid
    &.k-fluid
        width 100%

    // prefix & suffix
    .k-prefix
    .k-suffix
        position absolute
        top 50%
        transform translateY(-50%)
        z-index 2

    // clearable
    .k-clear
        display inline-block
        vertical-align top
        cursor pointer
        opacity 0
        transition opacity $transition
        pointer-events none
        color $input-clear-icon-color
        &:hover
            color $primary-color
        + *
            margin-left $input-suffix-clear-margin-right 
    // .k-inner:focus + .k-suffix .k-clear.k-show
    &:hover .k-clear.k-show
        opacity 1
        pointer-events all

    // stack clear icon
    &.k-stack-clear
        .k-clear
            position absolute
            z-index 1
            right 0
        .k-clear.k-show + i
            transition opacity $transition
        &:hover
            .k-clear.k-show + i
                opacity 0

    // group
    &.k-group
        display table
    .k-prepend
    .k-append
        display table-cell
        width 1px
        vertical-align middle
        background $input-group-bg-color 
        border $input-border
        text-align center
        .k-btn
            margin -1px 0
            border-radius 0
        // select
        .k-select
            margin -1px
            text-align left
    .k-prepend
        .k-select
            z-index 1
            > .k-wrapper
                border-radius $border-radius 0 0 $border-radius
    .k-append
        .k-select
            > .k-wrapper
                border-radius 0 $border-radius $border-radius 0
    > .k-padding
        padding 0 $input-group-padding-horizontal
    .k-prepend
        border-right none
        white-space nowrap
    .k-append
        border-left none
        white-space nowrap

    // disabled
    &.k-disabled
        color $input-disabled-color
        cursor not-allowed
        .k-inner
            color $input-disabled-color
            border-color $input-disabled-border-color
            background $input-disabled-bg-color
            cursor not-allowed

    // size
    generate(size)
        font-size lookup('$input-' + size + '-font-size')
        .k-inner
            height lookup('$input-' + size + '-height')
            line-height @height
            font-size lookup('$input-' + size + '-font-size')
            if lookup('$input-' + size + '-padding-left-right')
                padding 0 lookup('$input-' + size + '-padding-left-right')
        if lookup('$input-' + size + '-padding-left-right')
            .k-prefix
                left lookup('$input-' + size + '-padding-left-right')
            .k-suffix
                right lookup('$input-' + size + '-padding-left-right')
            &.k-with-prefix
                .k-inner
                    padding-left lookup('$input-' + size + '-prefix-padding-left')
            &.k-with-suffix
            &.k-clearable
                .k-inner
                    padding-right lookup('$input-' + size + '-suffix-padding-right') 
            &:not(.k-stack-clear).k-with-suffix.k-clearable
                .k-inner
                    padding-right lookup('$input-' + size + '-clearable-suffix-padding-right')
    for size in large default small mini
        if size != default
            &.k-{size}
                generate(size)
        else
            generate(size)

    // textarea
    .k-textarea
        padding $input-textarea-padding
        height auto
        line-height 1.5

    // fake dom for get value's width
    .k-fake
        position absolute
        visibility hidden
        top 0
        white-space nowrap
    &.k-auto-width
        width auto
        .k-inner
            box-sizing content-box


requireTheme('input')