$menu-height:60px;
$submenu-height:40px;
$dark-bg:#424242;
$dark-o-bg:#212121;
$dark-color:#bdbdbd;
.ct-menu-group {
    position: relative;
    background: #fff;
    //横排样式
    &.ct-menu-horizontal {
        height: $menu-height;
        // line-height: $menu-height;
        .ct-menu-wrap {
            font-size: 0;
            &>* {font-size:14px;}
            .ct-menu {
                position: relative;
                vertical-align: top;
                padding: 0 20px;
                display: inline-block;
                height: $menu-height;
                line-height: $menu-height;
                font-size: 14px;
                cursor: pointer;
                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background: $border-color;
                    display: block;
                }
                &.is-active,&:hover,&:active,&:focus {
                    &::after {
                        background: $primary-o-bg;
                        height: 2px;
                    }
                }
            } 
            .ct-submenu {
                position: relative;
                display: inline-block;  
                font-size: 14px;              
                .ct-submenu-wrap {
                    padding: 0 20px;
                    height: $menu-height;
                    line-height: $menu-height;
                    position: relative;
                    &::after {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 1px;
                        background: $border-color;
                        display: block;
                    }
                    .ct-submenu__inner {
                        display: inline-block;
                        margin-right: 10px;
                    }
                    .ct-icon {
                        vertical-align: text-bottom;
                        transition:.3s ease-in;
                    }
                }
                .ct-submenu-dropdown {
                    position: absolute;
                    top:$menu-height;
                    padding-top: 5px;
                    transition: .3s ease-in-out;
                    width: auto;
                    z-index: 1000;
                    .ct-submenu-dropdow__wrap {
                        background: #fff;
                        border-radius: 3px;
                        box-shadow: 0 1px 6px rgba(0,0,0,.2);
                        width: 100%;
                        transition: .3s ease-in-out;
                        padding-top: 5px;
                        .ct-menu {
                            padding: 0 20px;
                            display: block;
                            height: $submenu-height;
                            line-height: $submenu-height;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            box-sizing: border-box;
                            color: inherit;
                            &::after {
                                background: transparent;
                            }
                            &.is-active,&:hover,&:active,&:focus {
                                background: #f2f2f2;
                                color: $primary-o-bg;
                            }
                        } 
                    }
                }
                &.is-show,&:hover,&:active,&:focus {
                    .ct-submenu-wrap {
                        // color: $primary-o-bg;
                        // &::after {
                        //     background:$primary-o-bg;
                        //     height: 2px;
                        // }
                        .ct-icon {
                            transform: rotate(180deg);
                        }
                    }
                }
                &.is-active {
                    .ct-submenu-wrap {
                        color: $primary-o-bg;
                        &::after {
                            height: 2px;
                            background:  $primary-o-bg;
                         }
                    }
                }
            }
        }        
        //暗色
        &.ct-menu-dark {
            background:$dark-bg;
            color: $dark-color;
            .ct-menu-wrap {
                .ct-menu {
                    &::after {
                        background:  transparent;
                    }
                    &.is-active,&:hover,&:active,&:focus {
                        border-bottom: 2px solid transparent;
                        background: $dark-o-bg;
                        color: $success-o-bg;
                    }
                }
                .ct-submenu {
                    .ct-submenu-wrap {
                        &::after {
                            background:  transparent;
                         }                       
                    }
                    .ct-submenu-dropdown {
                        .ct-submenu-dropdow__wrap {
                            background: $dark-bg;
                            .ct-menu {
                                &.is-active,&:hover,&:active,&:focus {
                                    background:$dark-o-bg;
                                    color: $success-o-bg;
                                    &::after {
                                        background:  transparent;
                                     }
                                }
                            } 
                        }
                    }
                    &.is-show,&:hover,&:active,&:focus,&.is-active {
                        .ct-submenu-wrap {
                            background: $dark-o-bg;
                            color: $success-o-bg;
                        }
                    } 
                }
            }

        }
    }
    //竖排模式
    &.ct-menu-vertical {
        width: 240px;
        .ct-menu-wrap {
            .ct-menu {
                position: relative;
                padding: 0 20px;
                height: $submenu-height;
                line-height: $submenu-height;
                cursor: pointer;
                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 0;
                    height: 100%;
                    width: 1px;
                    background: $border-color;
                }
                &.is-active,&:hover,&:active,&:focus {
                    color: $primary-o-bg !important;
                    &::after {
                        width: 2px;
                        background:$primary-o-bg;
                    }
                }
            } 
            .ct-submenu {
                position: relative;                
                .ct-submenu-wrap {
                    padding: 0 20px;
                    height: $submenu-height;
                    line-height: $submenu-height;
                    display:flex;
                    align-items: center;
                    justify-content: space-between;
                    transition: 0s ease .2s;
                    position: relative;
                    &::after {
                        content: "";
                        position: absolute;
                        top: 0;
                        right: 0;
                        height: 100%;
                        width: 1px;
                        background: $border-color;
                    }
                    .ct-submenu__inner {
                        width: 100%;
                        padding-right: 15px;
                        overflow: hidden;
                    }
                    .ct-icon {
                        position: absolute;
                        right: 20px;
                        vertical-align: text-bottom;
                        transition:.3s ease-in;
                    }
                }
                .ct-submenu-dropdown {
                    transition: .3s ease-in-out;
                    width: 100%;
                    .ct-submenu-dropdow__wrap {
                        width: 100%;
                        transition: .3s ease-in-out;
                        .ct-menu {
                            padding: 0 30px;
                            display: block;
                            height: $submenu-height;
                            line-height: $submenu-height;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            box-sizing: border-box;
                            color: inherit;
                        } 
                    }
                }   
                &.is-active  {
                    .ct-submenu-wrap {
                        color: $primary-o-bg;
                        &::after {
                            width: 2px;
                            background: $primary-o-bg;
                        }
                    }
                }
            }
        }  
        //暗色
        &.ct-menu-dark {
            background:$dark-bg;
            color: $dark-color;
            .ct-menu-wrap {
                .ct-menu {
                    position: unset;
                    &::after {
                        content: "";
                        background:transparent;
                    }
                    &.is-active,&:hover,&:active,&:focus {
                        background: $dark-o-bg;
                        color: $success-o-bg !important;
                    }
                } 
                .ct-submenu {
                    position: relative;   
                    .ct-submenu-wrap {
                        &::after {
                            background: transparent;
                        }
                    }             
                    .ct-submenu-dropdown {
                        transition: .3s ease-in-out;
                        width: 100%;
                        .ct-submenu-dropdow__wrap {
                            width: 100%;
                            transition: .3s ease-in-out;
                            .ct-menu {
                                padding: 0 30px;
                                display: block;
                                height: $submenu-height;
                                line-height: $submenu-height;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                box-sizing: border-box;
                                color: inherit;
                                &.is-active,&:hover,&:active,&:focus {
                                    color:$success-o-bg;
                                    background: $dark-o-bg;
                                }
                            } 
                        }
                    }
                    &.is-active {
                        .ct-submenu-wrap {
                            color: $success-o-bg;
                            background: $dark-o-bg;
                        }
                    }
                }
            }  
        }

    }
}