@require('./variables.styl')

.k-transfer
    font-size $transfer-font-size
    .k-panel
    .k-arrows
        display inline-block
        vertical-align middle
    .k-panel
        width $transfer-panel-width
        border $transfer-panel-border 
        border-radius $transfer-panel-border-radius 
        height $transfer-panel-height
        display inline-flex
        flex-direction column

    // title
    .k-title
        line-height $transfer-title-line-height 
        background $transfer-title-bg-color
        padding $transfer-title-padding
        .k-checkbox
            color $transfer-title-color 
            font-size $transfer-title-font-size
            display block
        .k-count
            float right
            margin-left $transfer-title-count-margin-left
    .k-list
        overflow auto
        position relative
        flex 1
    .k-item
        color $transfer-item-color 
        background $transfer-item-bg-color 
        user-select none
        display table
        width 100%
        &:not(.k-disabled):hover
            if $transfer-item-hover-bg-hover != transparent
                background $transfer-item-hover-bg-color 
            color $transfer-item-hover-color
            p
                color $transfer-item-hover-color
        .k-checkbox
            padding $transfer-item-padding
            display table-cell
            height $transfer-item-height
            vertical-align middle
            white-space nowrap
        p
            margin 0
            color $transfer-item-desc-color
        &.k-disabled
            p
                color $disabled-color
    .k-input
        width auto
        margin $transfer-search-margin

    .k-arrows
        .k-btn
            display block
            margin $transfer-arrow-margin 
            font-size $transfer-arrow-font-size


requireTheme('transfer')