@mixin menu-item($gap: 8px, $margin: 0 8px 4px) {
  gap: $gap;
  margin: $margin;
  border-radius: var(--app-round);
}

ul.el-menu {
  --menu-base-size: 40px;
  --el-menu-item-height: var(--menu-base-size);
  --el-menu-sub-item-height: var(--menu-base-size);
  --el-menu-base-level-padding: calc(var(--menu-base-size) - var(--el-menu-level-padding));

  /* 子菜单 */
  .el-sub-menu {
    &__title {
      @include menu-item;
    }

    /* 菜单Item项 */
    & ul.el-menu {
      li.el-menu-item {
        @include menu-item;
      }
    }

    /* 子菜单选中状态 */
    &.is-active {
      .el-sub-menu__title {
        color: var(--el-menu-active-color);
      }

      ul.el-menu {
        li.el-menu-item.is-active {
          background-color: var(--el-color-primary-light-9);
        }
      }
    }

    /* 子菜单展开状态 */
    &.is-opened {
      .el-sub-menu__title {
        .el-icon.el-sub-menu__icon-arrow {
          transform: rotateX(180deg) !important;
        }
      }
    }
  }

  div .el-menu-item {
    @include menu-item;

    &.is-active {
      background-color: var(--el-color-primary-light-9);
    }
  }

  /* 收缩菜单 */
  &--collapse {
    --menu-margin: 8px;

    display: flex;
    flex-direction: column;
    gap: 4px;
    width: calc(var(--el-aside-width) - var(--menu-margin) * 2);
    margin: 8px;

    .el-sub-menu {
      border-radius: var(--app-round);

      div.el-sub-menu__title {
        @include menu-item(0, 0);

        align-items: center;
        justify-content: center;
        padding: 0;
      }

      &.is-active {
        background-color: var(--el-color-primary-light-9);
      }
    }

    div .el-menu-item {
      @include menu-item(0, 0);
    }
  }

  /* 弹窗 */
  &--popup {
    border-radius: var(--app-round);
  }
}
