@require('./variables.styl')

.k-scroll-select
    text-align center
    overflow hidden
    max-height 100%
    height $scroll-select-height 
    user-select none
    position relative
    .k-wrapper
        transition transform $transition
    &.k-dragging
        .k-wrapper
            transition none

    // disabled
    &.k-disabled
        .k-item
            color $scroll-select-item-disabled-color

    .k-scroll-item
        line-height $scroll-select-item-height 
        color $scroll-select-item-color 
        cursor pointer
        white-space nowrap
        &.k-active
            color $scroll-select-item-active-color 
            font-size $scroll-select-item-active-font-size 
        &.k-disabled
            color $scroll-select-item-disabled-color

    // append
    > .k-append
        position absolute
        top 50%
        right 0
        transform translateY(-50%)

    // border
    .k-border
        position absolute
        width 100%
        top 50%
        margin-top -($scroll-select-item-height / 2)
        height $scroll-select-item-height
        border-top $scroll-select-border 
        border-bottom $scroll-select-border 
        pointer-events none


requireTheme('scrollSelect')