$menuItemHeight: 48px;

.el-aside {
    transition: all 0.2s;
    .base-side-container {
        background-color: var(--el-menu-bg-color);

        &.collapse {
            .side-logo {
                padding-left: 0;
            }
            .side-logo-title {
                display: none;
            }

            .el-menu-item {
                .base-menu-title {
                    display: none;
                }
            }
        }
        .side-logo {
            height: 54px;
            line-height: 54px;
            transition: all 0.2s ease;
            box-sizing: border-box;
            padding-left: 24px;
            .side-logo-title {
                color: var(--el-menu-active-color);
                font-weight: 600;
                transition: all 0.5s;
                margin-left: 12px;
                font-size: var(--base-menu-logo);
            }
        }
        .el-menu {
            background-color: transparent !important;
            border-right: 0;
            .el-sub-menu__title:hover,
            .el-menu-item:hover {
                color: var(--el-menu-active-color);
            }
            .el-menu-item.is-active {
                background-color: var(--el-color-primary);
            }
            .el-menu-item {
                transition: all 0.2s;
                height: $menuItemHeight;
            }
            .el-sub-menu__title {
                height: $menuItemHeight;
            }
            .base-icon {
                margin-right: 5px;
                width: var(--el-menu-icon-width);
                text-align: center;
                vertical-align: middle;
            }
            .el-sub-menu {
                .el-sub-menu .el-sub-menu__title,
                .el-menu-item {
                    background: var(--el-submenu-bg-color);
                    &.is-active {
                        background-color: var(--el-color-primary);
                    }
                }

                &.is-active {
                    .el-sub-menu__title {
                        color: var(--el-menu-active-color);
                    }
                }
            }
        }
    }
}
