.itemBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.item {
  min-width: 64px;
  height: 48px;
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  border-radius: 4px;
  transition: all 0.3s;
  color: var(--easyv-text-4);
  cursor: pointer;
  &:hover {
    color: var(--easyv-text-3);
    background: linear-gradient(0deg, #3d404c, #3d404c);
  }
  .icon {
    width: 24px;
    height: 24px;
    object-fit: cover;
    margin-bottom: 4px;
    svg {
      width: 100%;
      height: 100%;
    }
  }
  .supernatant {
    position: absolute;
    top: 65px;
    left: 208px;
    display: none;
    border-bottom: 1px solid rgba(36, 38, 46, 0.4);
    z-index: 10;
    ul.moduleList {
      display: inline-block;
      text-align: left;
      background-color: #3d404c;
      // width: calc(100vw - 543px);
      width: 100%;
      // overflow-x: hidden;
      & > li {
        vertical-align: middle;
        display: inline-block;
        font-weight: 500;
        font-size: 12px;
        height: 36px;
        color: #b4b7c1;
        text-align: center;
        order: 0;
        // padding: 0 13px;
        flex-grow: 0;
        margin: 0px 0px;
      }
      .extra {
        line-height: 36px;
        text-align: right;
        position: absolute;
        right: 10px;
      }
    }
  }
}
.active {
  &:hover {
    color: var(--easyv-text-3);
    background: #3a89fe;
  }
  .text {
    color: var(--easyv-text-3);
  }
  .supernatant {
    display: block;
  }
  background: #3a89fe;
}
.lock {
  opacity: 0.5;
  pointer-events: none;
  cursor: none;
}
