.shrinkable-menu {
    height: 100%;
    width: 100%;
}

// 收缩 默认暗蓝
.shrink-menu-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .shrink-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        min-width: 60px;
        width: 100%;
        height: 45px;
    }

    .ivu-select-dropdown {
        margin: 0 0 0 5px;

        .ivu-dropdown-item {
            padding: 10px 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

// 激活颜色
.shrink-menu-icon-darkblue,
.shrink-menu-icon-dark {
    .active {
        color: #fff !important;
    }
}

.shrink-menu-icon-light {
    .active {
        color: #2d8cf0 !important;
    }
}

// 默认暗蓝
.darkblue-menu {

    // 背景色
    .ivu-menu-darkblue {
        background: #17233d;
    }

    // 一级和二级 字体色
    .ivu-menu-item,
    .ivu-menu-submenu-title {
        color: hsla(0, 0%, 100%, .65);

        &:hover {
            color: #fff;
        }
    }

    // 打开 变深
    .ivu-menu-opened {
        background: #001529;
    }

    // 一级打开 不变
    .ivu-menu-opened {
        .ivu-menu-submenu-title {
            color: #fff;
            background: #17233d;
        }
    }

    .ivu-menu-submenu-title {
        &:hover {
            color: #fff;
            background: #17233d;
        }
    }

    // 单个
    .ivu-menu-item-active:not(.ivu-menu-submenu),
    .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) {
        color: #2d8cf0;
    }

    .ivu-menu-item-active:not(.ivu-menu-submenu),
    .ivu-menu-item-active:not(.ivu-menu-submenu):hover,
    .ivu-menu-submenu-title-active:not(.ivu-menu-submenu),
    .ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover {
        background: #001529;
    }

    // 激活
    .ivu-menu-submenu .ivu-menu-item-active,
    .ivu-menu-submenu .ivu-menu-item-active:hover {
        color: #fff;
        background: #2d8cf0;
    }

    // 激活
    .ivu-menu-item-active .ivu-menu-submenu-title {
        color: #fff;
    }

    // 收缩
    .shrink-menu-content {
        .shrink-icon {
            color: hsla(0, 0%, 100%, .65);
            transition: all .2s ease-in-out;

            &:hover {
                color: #fff;
                background: #001529;
            }
        }

        .ivu-select-dropdown {
            background: #17233d;

            .ivu-dropdown-item {
                color: hsla(0, 0%, 100%, .65);
                transition: all .2s ease-in-out;

                &:hover {
                    color: #fff;
                    background: #17233d;
                }
            }

            .ivu-dropdown-item-selected,
            .ivu-dropdown-item-selected:hover {
                color: #fff;
                background: #2d8cf0;
            }
        }
    }
}

// 分割线--------------------------------------------

// light
.light-menu {

    // 一级打开 变蓝
    .ivu-menu-opened {
        .ivu-menu-submenu-title {
            color: #2d8cf0;
        }
    }

    // 激活
    .ivu-menu-item-active .ivu-menu-submenu-title {
        color: #2d8cf0;
    }

    // 收缩
    .shrink-menu-content {
        .shrink-icon {
            transition: all .2s ease-in-out;

            &:hover {
                color: #2d8cf0;
                background: #f3f3f3;
            }
        }

        .ivu-select-dropdown {

            // f3f3f3
            .ivu-dropdown-item {
                transition: all .2s ease-in-out;

                &:hover {
                    color: #2d8cf0;
                    background: #fff;
                }
            }
        }
    }
}

// 分割线--------------------------------------------

// dark灰蓝
.dark-menu {

    // 收缩
    .shrink-menu-content {
        .shrink-icon {
            color: hsla(0, 0%, 100%, .7);
            transition: all .2s ease-in-out;

            &:hover {
                color: #fff;
                background: hsla(0, 0%, 100%, .2);
            }
        }
    }
}

// 分割线--------------------------------------------

// 暗黑
.black-menu {

    // 背景色
    .ivu-menu-black {
        background: #1f1f1f;
    }

    // 一级和二级 字体色
    .ivu-menu-item,
    .ivu-menu-submenu-title {
        color: hsla(0, 0%, 100%, .65);

        &:hover {
            color: #fff;
        }
    }

    // 打开 变深
    .ivu-menu-opened {
        background: #141414;
    }

    // 一级打开 不变
    .ivu-menu-opened {
        .ivu-menu-submenu-title {
            color: #fff;
            background: #1f1f1f;
        }
    }

    .ivu-menu-submenu-title {
        &:hover {
            color: #fff;
            background: #1f1f1f;
        }
    }

    // 单个
    .ivu-menu-item-active:not(.ivu-menu-submenu),
    .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) {
        color: #2d8cf0;
    }

    .ivu-menu-item-active:not(.ivu-menu-submenu),
    .ivu-menu-item-active:not(.ivu-menu-submenu):hover,
    .ivu-menu-submenu-title-active:not(.ivu-menu-submenu),
    .ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover {
        background: #141414;
    }

    // 激活
    .ivu-menu-submenu .ivu-menu-item-active,
    .ivu-menu-submenu .ivu-menu-item-active:hover {
        color: #fff;
        background: #2d8cf0;
    }

    // 激活
    .ivu-menu-item-active .ivu-menu-submenu-title {
        color: #fff;
    }

    // 收缩
    .shrink-menu-content {
        .shrink-icon {
            color: hsla(0, 0%, 100%, .65);
            transition: all .2s ease-in-out;

            &:hover {
                color: #fff;
                background: #141414;
            }
        }

        .ivu-select-dropdown {
            background: #1f1f1f;

            .ivu-dropdown-item {
                color: hsla(0, 0%, 100%, .65);
                transition: all .2s ease-in-out;

                &:hover {
                    color: #fff;
                    background: #1f1f1f;
                }
            }

            .ivu-dropdown-item-selected,
            .ivu-dropdown-item-selected:hover {
                color: #fff;
                background: #2d8cf0;
            }
        }
    }
}