#app {
  .sidebar-container {
    transition: width 0.28s;
    width: $base-sidebar-width !important;
    background-color: #fafbff;
    height: 100%;
    position: relative;
    font-size: 0;
    overflow: hidden;
    box-shadow: none;

    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }

    .el-scrollbar {
      height: 100%;
    }

    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
    }

    .el-menu-item.is-active {
      color: #4f46e5 !important;
      background-color: #ede9fe !important;
    }
  }

  .hideSidebar {
    .sidebar-container {
      width: 54px !important;
    }
  }

  .mobile {
    .sidebar-container {
      transition: transform 0.28s;
      width: $base-sidebar-width !important;
    }

    &.hideSidebar {
      .sidebar-container {
        pointer-events: none;
        transition-duration: 0.3s;
        transform: translate3d(-$base-sidebar-width, 0, 0);
      }
    }
  }

  .withoutAnimation {
    .sidebar-container {
      transition: none;
    }
  }
}

.el-menu--vertical {
  .el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;
  }
}
