@require('./variables.styl')

.k-dropdown
    display inline-block

.k-dropdown-menu
    position absolute
    min-width $dropdown-min-width 
    background $dropdown-bg-color 
    border-radius $dropdown-border-radius 
    box-shadow $box-shadow
    font-size $dropdown-font-size 
    z-index $dropdown-menu-z-index
    top 0
    left 0

    // nested dropdown
    .k-dropdown
        display block
    .k-item
        padding $dropdown-item-padding 
        cursor pointer
        white-space nowrap
        if $dropdown-item-height != auto
            height $dropdown-item-height
            line-height $dropdown-item-height
        &.k-hover
            background $dropdown-item-hover-bg-color 
            if $dropdown-item-hover-color != inherit
                color $dropdown-item-hover-color 
        &:first-of-type
            border-radius $dropdown-border-radius $dropdown-border-radius 0 0 
        &:last-of-type
            border-radius 0 0 $dropdown-border-radius $dropdown-border-radius 

        // disabled
        &.k-disabled
            background $dropdown-item-disabled-bg-color 
            color $dropdown-item-disabled-color 
            cursor not-allowed

        // checkbox | radio
        .k-checkbox
        .k-radio
            display block
            padding $dropdown-item-padding
            > .k-wrapper
                vertical-align text-bottom
            > .k-text
                vertical-align baseline
        &.k-no-padding
            padding 0

    // tooltip
    .k-tooltip
        display block
    .k-dropdown
        > .k-tooltip
            display block


requireTheme('dropdown')