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

.k-select
    display inline-block
    vertical-align middle
    position relative
    width $select-width
    > .k-wrapper
        width 100%
        cursor pointer
        outline none
        vertical-align middle
        border $select-border 
        background $select-bg-color
        transition border $transition, background $transition, box-shadow $transition 
    .k-prefix
    .k-suffix
        position absolute
        top 50%
        transform translateY(-50%)
        color $select-icon-color
        // line-height 1

    // fluid
    &.k-fluid
        width 100%

    // clearable
    .k-clear
        opacity 0
        transition opacity $transition
        pointer-events none
        position absolute
        z-index 1
        &:hover
            color $primary-color
    // &.k-with-suffix
    //     .k-clear
    //         margin-right $select-clear-margin-right
    &:hover
        > .k-wrapper
            border $select-hover-border
        .k-clear.k-show
            opacity 1
            pointer-events all
    .k-suffix-icon
        display inline-block
        transition opacity $transition
    &.k-clearable
        &:hover
            .k-clear.k-show + .k-suffix-icon
                opacity 0


    // filterable
    .k-input
        .k-inner
            width 100%
            border none !important
            padding 0
            &:focus
                border none

    .k-placeholder
        // display inline-block
        color $select-placeholder-color

    .k-placeholder
    .k-value
        display block

    // arrow
    .k-arrow
        display inline-block
        transition transform $transition

    // show
    &.k-show
        > .k-wrapper
            border $select-focus-border
        .k-arrow
            transform rotate(180deg)
    &:focus
        outline none
        > .k-wrapper
            border $select-focus-border

    // disabled
    &.k-disabled
        > .k-wrapper
            color $select-disabled-color
            cursor not-allowed
            background $select-disabled-bg-color
            border-color $select-disabled-border-color
        .k-input
            color $select-disabled-color
            background $select-disabled-bg-color
            cursor not-allowed

    // multiple
    .k-values
        display inline-block
        line-height 1
    .k-select-tag
        padding $select-multiple-tag-padding 
        background $select-multiple-tag-bg-color
        // border 1px solid $disabled-border-color
        border-radius $select-multiple-tag-border-radius 
        &
        .k-text
        .k-icon
            display inline-block
            vertical-align middle
        .k-icon
            margin-left $select-multiple-tag-delete-icon-margin-left 
            &:before
                font-size $select-multiple-tag-delete-icon-font-size 
            &:hover
                color $select-multiple-tag-delete-icon-hover-color
    // size
    generate(size)
        font-size lookup('$select-' + size + '-font-size')
        > .k-wrapper
            min-height lookup('$select-' + size + '-height')
        .k-input
        .k-placeholder
        .k-value
            line-height s('calc(%s - 2px)', lookup('$select-' + size + '-height'))
        .k-input
            .k-inner
                height s('calc(%s - 2px)', lookup('$select-' + size + '-height'))
        .k-values
            margin-top lookup('$select-' + size + '-multiple-values-margin')
            margin-right -(getRight(lookup('$select-' + size + '-multiple-tag-margin')))
            .k-input
                margin-top -(lookup('$select-' + size + '-multiple-values-margin')) 
        .k-select-tag
            margin lookup('$select-' + size + '-multiple-tag-margin')
        if lookup('$select-' + size + '-padding-left-right')
            .k-main
                padding 0 lookup('$select-' + size + '-padding-left-right')
            .k-prefix
                left lookup('$select-' + size + '-padding-left-right')
            .k-suffix
                right lookup('$select-' + size + '-padding-left-right')
            &.k-with-prefix
                .k-main
                    padding-left lookup('$select-' + size + '-prefix-padding-left')
            &.k-with-suffix
            &.k-clearable
                .k-main
                    padding-right lookup('$select-' + size + '-suffix-padding-right') 
            // &.k-with-suffix.k-clearable
            //     .k-main
            //         padding-right lookup('$select-' + size + '-clearable-suffix-padding-right')
        if lookup('$select-' + size + '-padding-left')
            &.k-clearable
                > .k-wrapper
                    padding-right lookup('$select-' + size + '-clearable-padding-right') 
    for size in large default small mini
        if size != default 
            &.k-{size}
                generate(size)
        else
            generate(size)

    // inline
    &.k-inline
        width auto
        > .k-wrapper
            border none
            min-height 0
            background transparent
        .k-placeholder
        .k-value
            line-height inherit

.k-select-dropdown
    min-width auto
    max-height $select-dropdown-max-height
    overflow auto
    .k-active
        color $select-active-color
    .k-item
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
    // group
    .k-group
        > .k-label
            color $select-group-label-color
            padding $select-group-label-padding

    // card group
    &.k-card
        display flex
        height $select-card-group-height
        .k-tabs
            border none
        .k-groups
            flex 1
            overflow auto
        .k-item.k-hover
            background $select-card-group-item-hover-bg-color 
            color $select-card-group-item-hover-color 
        .k-tab
            padding $select-card-group-tab-padding

    // multiple
    .k-checkmark
        float right
        height 100%
        &:before
            font-size $select-multiple-checkmark-font-size

    // no data
    .k-no-data
        padding $select-no-data-padding
        color $select-no-data-color 
        text-align center

requireTheme('select')