@use './variables.module.scss' as v;

#app {
  .sidebar-container {
    .svg-icon {
      flex-shrink: 0;
      margin-right: 16px;
    }
    
    .el-menu-icon {
      font-size: inherit; // el-menu-icon 的字体大小被element主题css设置为了18px 这里改为集成父元素字体大小 与svg-icon自定义svg保持一致
      width: 1em;
      height: 1em;
      margin-right: 16px;
      transform: scale(1.2);// 由于element的icon其viewBox没有顶边，而自定义的svg都顶边了 so通过缩放来保持大小一致
    }

    .el-menu {
      border: none;
    }

    // menu hover
    .sub-menu-title-noDropdown,
    .el-sub-menu__title {
      &:hover {
        background-color: v.$menuHover !important;
      }
    }

    .is-active>.el-sub-menu__title {
      color: v.$subMenuActiveText !important;
    }

    & .nest-menu .el-sub-menu>.el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
      background-color: v.$subMenuBg !important;
      &:hover {
        background-color: v.$subMenuHover !important;
      }
    }
  }

  .hideSidebar {
    .el-sub-menu__icon-arrow {
          display: none;
    }
    .el-menu--collapse {
      width: auto;
    }
    .el-menu--collapse {
      .el-sub-menu__title {
          &>span {
            display:none
          }
      }
    }
  }
}

// when menu collapsed
.el-menu--vertical {
  .el-menu {
    .svg-icon {
      margin-right: 5px;
    }
    .el-menu-icon {
      font-size: inherit; // el-menu-icon 的字体大小被element主题css设置为了18px 这里改为集成父元素字体大小 与svg-icon自定义svg保持一致
      width:1em;
      transform: scale(1.2);// 由于element的icon其viewBox没有顶边，而自定义的svg都顶边了 so通过缩放来保持大小一致
    }
  }
}
