.toolbar-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: transparent;
    font-size: 14px;
    line-height: 22px;
    gap: 10px;
    .seperator {
        display: none;
    }
}

// 向导
.app-wizard {
    background: #fff;
    height: 100%;
    .app-wizard-content{
        height: 100%;
        overflow-y: auto;
    }
    .app-wizard-footer {
        display: flex;
        justify-content: flex-end;
        padding: 10px;
        text-align: right;
        .ivu-btn {
            margin: 0 5px;
        }
    }
}

// 应用菜单样式
.app-menu {

    .app-menu-icon {
        width: 20px;
        font-size: 14px;
        margin-right: 6px;
    }

    &.app-menu--horizontal {
        display: flex;

        >.app-menu-item {
            display: flex;
            height: 64px;
        }

        .el-menu-item,
        .el-submenu__title {
            height: 64px;
            line-height: 64px;
            background-color: var(--app-color-black);
            color: var(--app-color-white) !important;

            .fa {
                color: var(--app-color-white);
            }

            &:hover,
            &.is-active {
                background: #202027;
            }
        }

        .el-menu-item {
            &.is-active {
                border-bottom: 4px solid var(--app-color-yellow);
                border-bottom-color: var(--app-color-yellow);
            }
        }

        .el-submenu {
            &.is-active,
            &.is-opened {
                .el-submenu__title {
                    border-bottom: 4px solid var(--app-color-yellow);
                    border-bottom-color: var(--app-color-yellow) !important;
                }
            }
        }

        .el-submenu {
            &.is-active {
                >.el-submenu__title {
                    background: #202027;
                }
            }
        }

        .el-submenu__icon-arrow {
            display: none;
        }
    }

    &.app-menu--vertical {
        color: var(--app-color-white);
        background-color: #001529;
        border-right: none;

        .el-menu-item,
        .el-submenu__title {
            height: 40px;
            line-height: 40px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: var(--app-color-white);
            background-color: #001529;

            .fa,
            .el-submenu__icon-arrow {
                color: var(--app-color-white);
            }

            &:hover,
            &.is-active {
                background-color: var(--app-color-blue);
            }
        }

        .el-submenu {
            &.is-active {
                >.el-submenu__title {
                    background-color: var(--app-color-blue);
                }
            }
        }
        &.el-menu--collapse {
            .el-menu-item,
            .el-submenu__title { 
                overflow: visible;
            }

            .el-submenu__icon-arrow {
                display: none;
            }
        }
    }
}
.app-popper-menu--horizontal {
    .el-menu--popup {
        padding: 0;

        .el-submenu__icon-arrow {
            display: none;
        }

        .el-menu-item,
        .el-submenu__title {
            height: 40px;
            line-height: 40px;
            padding: 0 12px;
            background-color: var(--app-color-black);
            color: var(--app-color-white) !important;
            border-bottom: 1px solid var(--app-color-gray-250);
            border-bottom-color: var(--app-color-gray-250) !important;
        }

        .el-submenu {
            &.is-active {
                >.el-submenu__title {
                    background: #202027;
                }
            }
        }

        .el-menu-item {
            &.is-active {
                background: #202027;
            }
        }
    }
}
.app-popper-menu--vertical {
    .el-menu--popup {
        padding: 0;

        .el-submenu__icon-arrow {
            display: none;
        }

        .el-menu-item,
        .el-submenu__title {
            height: 40px;
            line-height: 40px;
            padding: 0 12px;
            color: var(--app-color-white) !important;
            background-color: #001529;
            border-bottom: 1px solid var(--app-color-gray-250);
            border-bottom-color: var(--app-color-gray-250) !important;
        }

        .el-submenu {
            &.is-active {
                >.el-submenu__title {
                    background-color: var(--app-color-blue);
                }
            }
        }

        .el-menu-item {
            &.is-active {
                background-color: var(--app-color-blue);
            }
        }
    }
}