@import "../../next-core/lib/next.scss";
@import "./scss/variable.scss";

#{$menu-prefixCls} {
    @include box-sizing;
    @include global-font;

    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    border: $menu-border-width $menu-border-style $menu-border-color;
    border-radius: $menu-border-radius;
    box-shadow: $menu-shadow;
    color: $menu-color;
    font-size: $menu-font-size;
    line-height: $menu-line-height;
    padding: $menu-padding-vertical 0;
    min-width: 100px;
    background: $menu-background;
    position: relative;

    &.multiple-col {
        display: inline-block;
        width: (120 * 4 + $menu-padding-vertical * 2 + $menu-border-width * 2);
        padding-left: $menu-padding-vertical;
        padding-right: $menu-padding-vertical;
        ul {
            overflow: hidden;
        }
        #{$menu-prefixCls}-item {
            float: left;
            width: 120px;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    &:focus {
        outline: 0;
    }

    .#{$css-prefix}checkbox, .#{$css-prefix}radio {
        margin-right: $menu-icon-margin;
    }

    #{$menu-prefixCls} {
        &-content {

        }

        &-item {
            padding: 0 $menu-padding-horizontal;
            position: relative;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.2s ease;
            &-helper {
                color: #999;
                font-style: normal;
                float:right;
            }

            &.selected {
                color: $menu-color-selected;
                background: $menu-background-selected;
            }

            &:hover {
                color: $menu-color-hover;
                background: $menu-background-hover;
            }

            &.focused {
                color: $menu-color-focused;
                background: $menu-background-focused;
                outline: 0;
            }

            &:focus {
                outline: 0;
            }

            &.disabled {
                color: $menu-color-disabled;
                cursor: not-allowed;
                background: $color-white;
            }
            &.opened {
                > #{$menu-prefixCls}-submenu-title .#{$css-prefix}icon-arrow-down {
                    @include icon-size(
                        $size: $menu-icon-size,
                        $transform: rotate(180deg)
                    );
                }
            }
            a {
                display: block;
            }
        }
        &-divider {
            margin: $menu-divider-margin-ver $menu-divider-margin-hoz;
            border-bottom: $menu-border-width $menu-border-style $menu-divider-border-color;
        }

        &-icon-select {
            position: absolute;
            left: 4px;
            top: 0;
            color: $menu-icon-selected-color;
        }

    }

    &.hoz {
        margin: 0;
        padding: 0;
        box-shadow: none;
        #{$menu-prefixCls} {
            &-item {
                display: inline-block;
                height: 44px;
                line-height: 44px;
                vertical-align: top;
            }
        }
    }

    #{$menu-prefixCls}-popup-item{
        &.opened {
            background: $menu-background-focused;
        }
    }

    &-popup-item {

        .#{$css-prefix}icon-arrow-right {
            position: absolute;
            right: 5px;
            top: 0;
            color: $menu-arrow-color;
            @include icon-size($menu-icon-size);
        }
        .#{$css-prefix}icon-arrow-down {
            color: $menu-arrow-color;
            font-size: $menu-icon-size;
            margin-left: 5px;
            transition: all ease 0.3s;
        }
        &.opened .#{$css-prefix}icon-arrow-down {
            @include icon-size(
                $size: $menu-icon-size,
                $transform: rotate(180deg)
            );
        }
    }

    #{$menu-prefixCls}-submenu-item {
        position: relative;
        z-index: 2;
        padding: 0;
        &.focused {
            background: $color-transparent;
        }
        #{$menu-prefixCls} {
            border: 0;
            box-shadow: none;
            padding: 0;
            .selected {
                .next-icon-select {
                    left: 24px;
                }
            }
        }
        &:hover {
            background: #fff;
        }

    }

    #{$menu-prefixCls}-submenu-item-popup {
        position: relative;
        z-index: 2;
        padding: 0;
        &.outside {
            position: static;
              > #{$menu-prefixCls}-wrapper {
                bottom: -1px;
                top: -1px;
                > #{$menu-prefixCls} {
                    height: 100%;
                }
            }
        }
        > #{$menu-prefixCls}-wrapper {
            position: absolute;
            left: 100%;
            top: 0;
            margin-left: 2px;
        }

        #{$menu-prefixCls}-submenu-title {
            background: $menu-background;
            transition: background 0.2s ease;
        }

        &.opened > #{$menu-prefixCls}-submenu-title {
            background: $menu-background-focused;
        }
    }

    &-submenu-title {
        padding: 0 $menu-padding-horizontal;
        font-size: $menu-submenu-title-size;
        position: relative;
        background: $menu-background;
        color: $menu-color;
        cursor: pointer;

        &:hover {
            .#{$css-prefix}icon-arrow-down {
                color: $menu-arrow-color-hover;
            }
        }

        .#{$css-prefix}icon-arrow-down,
        .#{$css-prefix}icon-arrow-up,
        .#{$css-prefix}icon-arrow-right {
            position: absolute;
            right: 10px;
            top: 0;
            color: $menu-arrow-color;
            @include icon-size($menu-icon-size);
            transition: all ease 0.3s;
        }
        .#{$css-prefix}icon-arrow-down.opened{
            @include icon-size(
                $size: $menu-icon-size,
                $transform: rotate(180deg)
            );
        }
    }

    &-group {
        #{$menu-prefixCls} {
            border: none;
            box-shadow: none;
            padding: 0;
        }
        &-title {
            padding: 0 $menu-padding-title-horizontal;
            color: $color-text1-2;
        }
    }
    &-cascade {
        #{$menu-prefixCls} {
            display: inline-block;
            width: 180px;
        }
    }
}
#{$menu-prefixCls}.out-screen{
    position: absolute;
    top:-9999px;
    left:-9999px;
}

#{$menu-prefixCls}.slide-down{
    height: 0;
    overflow: hidden;
    transition: all cubic-bezier(0.23, 1, 0.32, 1) 350ms;
    &.slide-down-active {
    }
}

#{$menu-prefixCls}.slide-up {
    overflow: hidden;
    transition: all cubic-bezier(0.23, 1, 0.32, 1) 250ms;
    &.slide-up-active{
        height: 0;
    }
}

#{$menu-prefixCls}-submenu-item-popup #{$menu-prefixCls}-wrapper.slide-down{
    transition: transform cubic-bezier(0.23, 1, 0.32, 1) 250ms, opacity cubic-bezier(0.23, 1, 0.32, 1) 250ms;
    transform: scale(0);
    opacity: 0;
    transform-origin: left top;
    > #{$menu-prefixCls} {
        transition: transform cubic-bezier(0.23, 1, 0.32, 1) 400ms;
        transform: scale(0);
        transform-origin: left top;
        #{$menu-prefixCls}-item, #{$menu-prefixCls}-submenu-title{
            transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) .1s;
        }
    }
    &.slide-down-active {
       transform: scale(1);
       opacity: 1;
       > #{$menu-prefixCls} {
           transform: scaleY(1);
           #{$menu-prefixCls}-item, #{$menu-prefixCls}-submenu-title{
           }
       }
    }
}

#{$menu-prefixCls}-submenu-item-popup #{$menu-prefixCls}-wrapper.slide-up{
    transition: transform cubic-bezier(0.23, 1, 0.32, 1) 250ms, opacity cubic-bezier(0.23, 1, 0.32, 1) 250ms;
    transform: scale(1);
    opacity: 1;
    transform-origin: left top;
    > #{$menu-prefixCls} {
        transition: transform cubic-bezier(0.23, 1, 0.32, 1) 400ms;
        transform: scaleY(1);
        #{$menu-prefixCls}-item, #{$menu-prefixCls}-submenu-title{
            transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) .1s;
        }
    }
    &.slide-up-active {
       transform: scale(0);
       opacity: 0;
       > #{$menu-prefixCls} {
            transform: scale(0);
            transform-origin: left top;
            #{$menu-prefixCls}-item, #{$menu-prefixCls}-submenu-title{
                font-size:0;
            }
       }
    }
}