@import '../default/var';

.#{$prefix} {
    &-menu {
        user-select: none;
        border-radius: 4px;
        &__icon {
            margin-right: 4px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            display: inline-block;
        }
        &-item {
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            transition: all .3s;
            position: relative;
            &.is-top {
                display: inline-block;
            }
            &.is-disabled {
                color: $menu-color-disabled;
            }
            &.is-active {
                color: $menu-color-active-fore;
                border-color: $menu-color-active-fore;
                &:after {
                    content: "";
                    display: block;
                    position: absolute;
                    background: $menu-color-active-fore;
                }
            }
        }
        &--popup {
            overflow: hidden;
            min-width: 200px;
            box-shadow: 0 0 10px 1px rgba($base-color-dark, .2);
            .#{$prefix}-menu-item {
                margin: 10px 0;
                &.is-active {
                    &:after {
                        content: none;
                    }
                }
            }
        }
        &--vertical {
            width: 200px;
            box-shadow: 0 0 10px 1px rgba($base-color-dark, .2);
            overflow: hidden;
            &.#{$prefix}-menu--collapse {
                width: 68px;
                .#{$prefix}-menu-item {
                    margin: 14px 0;
                    span:not(.#{$prefix}-menu__icon) {
                        display: none;
                    }
                    &.is-active {
                        &:after {
                            content: none;
                        }
                    }
                }
                &>.#{$prefix}-submenu {
                    &>.#{$prefix}-submenu__title {
                        &>.#{$prefix}-menu-arrow {
                            display: none;
                        }
                    }
                }
            }
            .#{$prefix}-menu-item {
                margin: 14px 0;
                &.is-active {
                    &:after {
                        height: 100%;
                        width: 3px;
                        top: 0;
                        right: 0;
                    }
                }
            }
            .#{$prefix}-submenu__title {
                margin: 14px 0;
            }
        }
        &--horizontal {
            &>.is-active {
                &>.#{$prefix}-submenu__title {
                    border-color: $menu-color-active-fore;
                }
                &.#{prefix}-menu-item {
                    border-color: $menu-color-active-fore;
                }
            }
        }
        &--light {
            background: $menu-color-dark-fore;
            color: $menu-color-light-fore;
            .#{$prefix}-menu-item {
                background: $menu-color-dark-fore;
                &.is-active,
                &:not(.is-disabled):hover {
                    background: $menu-color-active-back;
                }
            }
            .#{$prefix}-menu__icon {
                color: $menu-color-icon;
            }
            .#{$prefix}-submenu__title {
                &:hover {
                    background: $menu-color-active-back;
                }
            }
            &>.is-active {
                &>.#{$prefix}-submenu__title {
                    // background: $menu-color-active-back;
                }
                .#{$prefix}-menu__icon {
                    color: $menu-color-active-fore;
                }
            }
        }
        &--dark {
            background: $menu-color-dark-back;
            color: $menu-color-dark-fore;
            .#{$prefix}-menu-item {
                background: $menu-color-dark-back;
                &.is-active,
                &:not(.is-disabled):hover {
                    background: rgba($menu-color-active-back, .1);
                }
            }
            .#{$prefix}-submenu__title {
                &:hover {
                    background: rgba($menu-color-active-back, .1);
                }
            }
            .#{$prefix}-menu__icon {
                color: $menu-color-icon;
            }
            &>.is-active {
                &>.#{$prefix}-submenu__title {
                    // background: rgba($menu-color-active-back, .1);
                }
                .#{$prefix}-menu__icon {
                    color: $menu-color-active-fore;
                }
            }
        }
    }
    &-submenu {
        &.is-top {
            display: inline-block;
        }
        &.is-opened {
            &>.#{$prefix}-submenu__title {
                &>.#{$prefix}-menu-arrow {
                    transform: rotate(180deg) scale(.6);
                }
            }
        }
        &.is-active {
            &>.#{$prefix}-submenu__title {
                color: $menu-color-active-fore;
            }
        }
        .#{$prefix}-menu-arrow {
            right: 6px;
            transition: all .3s;
            font-size: smaller;
            float: right;
            margin-left: 10px;
            line-height: 38px;
            cursor: pointer;
            transform: scale(.6);
            color: #9297A7;
            font-weight: bold;
        }
        &__title {
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            padding-right: 10px;
            overflow: hidden;
        }
    }
}