body.theme-default {
  @mixin menuSelectedBeforeMixin {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    height: 100%;
    z-index: 1;
    background-color: var(--el-color-primary);
  }

  // 菜单区域
  // 图标为图片的时候图片垂直居中对齐文字
  .amenu-title .selector-dialog > .svg-img {
    vertical-align: middle;
  }
  .sidebar-container {
    .ant-menu {
      // 一级菜单样式
      // 含子菜单的
      .ant-menu-submenu {
        .ant-menu-submenu-title {
          background-color: transparent;
          color: var(--color-text-main);
          // fix: 新版是overflow. 所以只要超出就只有... 没有其他的了。
          overflow: inherit;

          .svg-icon {
            color: var(--el-color-primary-light-4);
          }

          .ant-menu-submenu-arrow {
            &::before,
            &::after {
              background: var(--color-text-icon-base);
              height: 1px;
            }
          }
          .el-badge__content {
            top: 7px;
            right: -4px;
          }
        }

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

        &.ant-menu-item-selected {
          position: relative;
          color: var(--el-color-primary-light-9);;
          background-color: var(--el-color-primary-light-9);

          &::before {
            @include menuSelectedBeforeMixin;
          }

          .ant-menu-submenu-title {
            color: var(--el-color-primary);
          }

          .svg-icon {
            color: var(--el-color-primary);
          }
        }
      }

      // 无子菜单
      .ant-menu-item {
        .amenu-title {
          color: var(--color-text-main);
        }

        .svg-icon {
          color: var(--el-color-primary-light-4);
        }

        &.ant-menu-item-active {
          background: var(--el-color-primary-light-9) !important;
        }

        &.ant-menu-item-selected {
          position: relative;
          background-color: var(--el-color-primary-light-9);

          &::before {
            @include menuSelectedBeforeMixin;
          }
        }

        &.ant-menu-selected {
          background: var(--el-color-primary);

          .amenu-title {
            color: var(--color-white);
          }

          .svg-icon {
            color: var(--color-white);
          }
        }
      }

      &.ant-menu-light.ant-menu-inline .ant-menu-sub.ant-menu-inline {
        background-color: #fff;
      }
      // &.ant-menu-light:not(.ant-menu-horizontal)
      //   .ant-menu-item:not(.ant-menu-item-selected):hover {
      //   background-color: var(--el-color-primary-light-9) !important;
      // }
    }
  }

  // 二级菜单区域
  .ant-menu-submenu-popup {
    // 鼠标悬停需要把二级菜单的边距去掉，不然icon对不齐
    .ant-menu-vertical .ant-menu-submenu-title {
      background-color: transparent;
      color: var(--color-text-main);
      margin-block: 0px;
      margin-inline: 0px;
      overflow: inherit; // fix:是overflow. 所以只要超出就只有... 没有其他的了
    }
    // fix：好像elementPlus 没有这个.ant-menu-submenu-content 先注释掉
    .ant-menu-vertical.ant-menu-sub {
      max-height: 100%;
      background-color: #fff;
      .ant-menu-submenu-arrow {
        &::before,
        &::after {
          color: var(--color-text-icon-base);
          height: 1px;
        }
      }

      // 含子菜单
      .ant-menu-submenu {
        &.ant-menu-submenu-active {
          .ant-menu-submenu-title {
            color: var(--el-color-primary);
            .menu-title {
              color: var(--el-color-primary);
            }
            .svg-icon {
              color: var(--el-color-primary);
            }
          }
        }
        .el-badge__content {
          top: 7px;
          right: -4px;
        }
      }

      // 不含子菜单
      // .menu-title {
      //   margin-left: 4px;
      // }

      .ant-menu-item:hover,
      .ant-menu-item-active {
        color: var(--el-color-primary);
      }
    }
    // todo: 样式结构变化
    .ant-menu-item:hover,
    .ant-menu-item-active {
      color: var(--el-color-primary);
    }
  }

  // 修改二级菜单的样式 11-22
  .ant-menu {
    .ant-menu-sub {
      .ant-menu-item-selected {
        background-color: transparent;
        color: var(--el-color-primary);
      }
    }
    .ant-menu-submenu-selected {
      .selector-dialog .svg-icon {
        color: var(--el-color-primary);
      }
      .ant-menu-submenu-title {
        background-color: transparent;
        color: var(--el-color-primary);
        .ant-menu-submenu-arrow {
          &::before,
          &::after {
            color: var(--color-text-icon-base);
            height: 1px;
          }
        }
      }
    }
  }
}