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

.k-menu
    width $menu-width
    transition width $transition
    background $menu-bg-color
    font-size $menu-font-size
    overflow hidden
    // nested menu
    .k-menu
        width auto
        background $menu-sub-bg-color 
        .k-menu-item
            > .k-title
                padding-left $menu-item-padding-left 
        .k-menu
            .k-menu-item
                > .k-title
                    padding-left $menu-item-padding-left + $menu-item-icon-left * 2
    .k-icon
        display inline-block
        width $menu-item-icon-width
        text-align center
        margin-left -($menu-item-icon-width - $menu-item-padding-left + getLeft($menu-item-padding))
        vertical-align middle

    // header
    .k-header
        height $menu-header-height
        line-height @height
        font-size $menu-header-font-size
        font-weight bold
        padding $menu-header-padding
        border-bottom $menu-header-border-bottom 
        position relative
        color $menu-item-color
        overflow hidden
        .k-icon
            line-height $menu-header-height

    // light theme
    &.k-light
        background $menu-light-bg-color
        .k-header
            color $menu-light-item-color 
            border-bottom $menu-light-header-border-bottom
        .k-menu-item
            > .k-title
                color $menu-light-item-color 
                &:hover
                    color $menu-light-item-hover-color 
            &.k-highlighted
                > .k-title
                    color $menu-light-item-hover-color
            // disabled
            &.k-disabled
                > .k-title
                    color $menu-light-item-disabled-color !important
        .k-menu
            background $menu-light-sub-bg-color 

    // size
    generate(size)
        &.k-{size}
            width lookup('$menu-' + size + '-width')
            if lookup('$menu-' + size + '-font-size')
                font-size lookup('$menu-' + size + '-font-size')
            // &.k-collapsed
            //    width $menu-collapsed-width 
            .k-menu
                if lookup('$menu-' + size + '-font-size')
                    font-size lookup('$menu-' + size + '-font-size')
    for size in large small
        generate(size)

    // collapse
    .k-menu-item > .k-title span
    .k-header :not(.k-icon)
        transition opacity $transition
    &.k-collapsed
        width $menu-collapsed-width 
        .k-menu-item
            > .k-title
                span
                .k-arrow
                    opacity 0
        .k-header 
            :not(.k-icon):not(intact-content)
                opacity 0
    &.k-horizontal.k-collapsed
        .k-menu-item
            > .k-title
                span
                .k-arrow
                    display none
        .k-header 
            :not(.k-icon)
                display none

    // horizontal
    &.k-horizontal
        width auto
        .k-header
            display inline-block
            vertical-align middle
            border-bottom none
            border-right $menu-header-border-bottom
            height $menu-item-height
            line-height $menu-item-height
            .k-icon
                line-height $menu-item-height
        > .k-menu-item
            display inline-block
            vertical-align middle
        &.k-collapsed
            width auto
        // light
        &.k-light
            .k-header
                border-right $menu-light-header-border-bottom


.k-menu-item
    > .k-title
        padding $menu-item-padding
        cursor pointer
        height $menu-item-height
        line-height @height
        color $menu-item-color
        white-space nowrap
        position relative
        overflow hidden
        transition all $transition
        // padding-left 46px
        &:hover
            color $menu-item-hover-color
        .k-arrow
            float right
            transition all $transition
            margin-left $menu-item-arrow-margin-left
            &:before
                vertical-align top
        .k-icon
            line-height $menu-item-height

    // expanded
    &.k-expanded
    &.k-show
        > .k-title 
            color $menu-item-hover-color
            .k-arrow
                transform rotate(180deg)

    // highlighted
    &.k-highlighted
        > .k-title 
            color $menu-item-hover-color

    // .c-expand-enter
    // .c-expand-leave
        // opacity 1

    // active
    &.k-active
        > .k-title
            color $menu-item-hover-color !important
            background $primary-color

    // disabled
    &.k-disabled
        > .k-title
            color $menu-item-disabled-color !important
            cursor not-allowed

    // dot
    .k-dot
        display inline-block
        vertical-align top
        &:before
            font-size $menu-item-dot-font-size
            vertical-align top
            transform scale(.4)

// dropdown menu
.k-dropdown-menu.k-menu
    width auto
    min-width $menu-dropdown-min-width
    .k-menu-item
        > .k-title
            padding 0 getRight($menu-item-padding)
            .k-arrow
                transform rotate(-90deg)


requireTheme('menu')