$menu-prefix: #{$css-prefix}menu;
.#{$menu-prefix} {
    display: block;
    margin: 0;
    padding: 0;
    outline: 0;
    list-style: none;
    color: $text-color;
    font-size: $font-size-base;
    position: relative;
    z-index: $zindex-menu;
    &-item{
        display: block;
        outline: 0;
        list-style: none;
        font-size: $font-size-base;
        position: relative;
        z-index: 1;
        cursor: pointer;
        transition: all .2s ease-in-out; 
        i{
            margin-right: 6px;
        }
        &-disabled{
            opacity: .25;
            cursor: not-allowed;
            background: none!important;
        }
    }
    &-submenu{
        &-title{
            i{
                margin: $menu-icon-margin;

            }
            &-icon{
                margin: $menu-icon-margin;

            }
        }
        &-drop{
            width: inherit;
            overflow: auto;
            padding: $menu-drop-padding;
            background-color: $menu-drop-bg;
            box-sizing: border-box;
            border-radius: $menu-drop-radius;
            box-shadow: $shadow-base;
            position: absolute;
            z-index:$zindex-menu;
        }
        &-disabled{
            opacity: .25;
            cursor: not-allowed;
            background: none!important;
        }

    }
    &-group{
        line-height: normal;
        &-title{
            height: $menu-group-title-height;
            line-height: $menu-group-title-height;
            padding:$menu-group-title-padding;
            font-size: $font-size-small;
            color: $text-color;
        }
    }
    &-horizontal{
        height:$menu-horizontal-height;
        line-height: $menu-horizontal-height;
        .#{$menu-prefix}{
            &-item{
                float: left;
                padding: $menu-horizontal-padding;
                position: relative;
                cursor: pointer;
                z-index: 3;
                transition: all .2s ease-in-out;
                height: inherit;
                line-height: inherit;
                border-bottom: 2px solid transparent;
                &:hover,&-active{
                    color: $primary-color;
                }
            }
            &-underline{
                .#{$menu-prefix}-item{
                    &:hover,&-active{
                        border-bottom: 2px solid $primary-color;
                    }
                } 
            }
            &-hasline{
                &:after{
                    content: "";
                    display: block;
                    width: 100%;
                    height: 1px;
                    background: $border-color-base;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }
            }
            &-submenu{
                height: inherit;
                line-height: inherit;
                border-bottom: 2px solid transparent;
                float: left;
                padding: $menu-horizontal-padding;
                position: relative;
                cursor: pointer;
                z-index: 3;
                transition: all .2s ease-in-out;
                &-drop{
                    width: auto;
                    max-height: none;
                    .#{$menu-prefix}{
                        &-item{
                            float:none;
                            margin: 0;
                            line-height: normal;
                            clear: both;
                            white-space: nowrap;
                            list-style: none;
                            cursor: pointer;
                            transition: background .2s ease-in-out;
                            padding: $menu-drop-item-padding;
                            &:hover{
                                background: $menu-vertical-hover-bg;
                                border-bottom: 2px solid transparent;
                            }
                            &:active{
                                background: $menu-vertical-active-bg;
                            }
                        }
                    }
                }
            }
        }
        
    }
    &-vertical{
        .#{$menu-prefix}{
            &-submenu{
                &-title{
                    padding: $menu-vertical-title-padding;
                    position: relative;
                    cursor: pointer;
                    z-index: 1;
                    transition: all .2s ease-in-out;
                    &-icon{
                        float: right;
                        position: relative;
                        top: 4px;
                        margin: $menu-icon-margin;
                        transition: -webkit-transform .2s ease-in-out;
                        transition: transform .2s ease-in-out;
                        transition: transform .2s ease-in-out,-webkit-transform .2s ease-in-out;
                    }
                    &:hover{
                        background: $menu-vertical-hover-bg;
                    }
                    &:active{
                        background: $menu-vertical-active-bg;
                    }
                }
                &-opened{
                    .#{$menu-prefix}-submenu-title-icon{
                        transform: rotate(180deg);
                    }
                }
                &-active{
                    .#{$menu-prefix}-submenu-title{
                        color: $primary-color;
                        i{
                            color: $primary-color;
                        }
                    }
                }
            }
            &-item{
                padding: $menu-vertical-item-padding;
                position: relative;
                cursor: pointer;
                z-index: 1;
                transition: all .2s ease-in-out;
                &-active{
                    background: $menu-vertical-active-bg;
                    color: $primary-color;
                    z-index: 2;
                }
                &:hover{
                    background: $menu-vertical-hover-bg;
                }
                &:active{
                    background: $menu-vertical-active-bg;
                }
            }
        }
    }
}