/* 引入自定义滑动条样式 */
@import "./scroll-bar";

.side-menu-wrapper {
  /* el-scrollbar引用自定义滑动 父类必设高度 */
  .el-scrollbar {
    height: 100vh;
    /* 自定义滑条 类位置 */
    .scroll-bar;
    /* el-scrollbar的wrap-class类 */
    .scrollbar {
      height: 100%;
      overflow-x: hidden;
      /* 一级菜单样式 */
      .el-menu {
        border-right: none;
        .side-menu-item {
          .el-submenu__title {
            height: 52px;
            line-height: 52px;
            * {
              vertical-align: top;
            }
          }
          /* 菜单项高度重置 */
          .el-menu-item {
            height: 52px;
            line-height: 52px;
          }
          /* 图标样式 */
          i {
            font-size: 14px;
            color: #fff;
          }
          .icon {
            margin-right: 8px;
          }
          /* 二级菜单颜色 */
          .el-submenu {
            .side-menu-item .el-submenu__title,
            .el-menu-item {
              background: #202b30!important;
            }
            /* 三级菜单颜色 */
            .el-submenu {
              .el-menu-item {
                background: #1d272b!important;
              }
            }
            /* 三级菜单hover样式-较特殊 */
            .el-menu-item,
            .el-submenu__title {
              &:hover {
                background: #2f3e45!important;
              }
            }
          }
          /* 菜单项hover样式 */
          .el-menu-item,
          .el-submenu__title {
            &:hover,
            &.is-active {
              .icon, span {
                color: #409eff;
              }
            }
            &:hover {
              background: #2f3e45!important;
            }
          }
          /* 菜单项active样式 */
          .is-active {
            .icon,
            > .el-submenu__title {
              color: #409eff!important;
            }
          }
        }
      }
      /* 折叠菜单样式 */
      .el-menu--collapse {
        .side-menu-item {
          transition: font-size 0.5s;
          i {
            font-size: 20px;
          }
          span,
          .el-menu--inline,
          .el-submenu__icon-arrow {
            display: none;
          }
        }
      }
    }
  }
}
