@import '../../../../../../style/variables.less';

.pro-layout-open-menu {
  // 展开动画期间（Menu 传入 textVisible=false）隐藏文字，避免”挤压式逐字出现”；宽度过渡结束后再淡入
  &.pro-layout-menu-text-hidden {
    .@{ant-prefix}-menu-title-content {
      div {
        h2 {
          opacity: 0 !important;
          transition: none !important; // 确保隐藏时无过渡动画
        }
      }
    }
  }

  .@{ant-prefix}-menu-root {
    overflow-y: auto !important;

    & > .@{ant-prefix}-menu-submenu > .@{ant-prefix}-menu-submenu-title,
    & > .@{ant-prefix}-menu-item.@{ant-prefix}-menu-item-only-child {
      padding-left: 16px !important;
    }

    & > .@{ant-prefix}-menu-submenu {
      & > .@{ant-prefix}-menu-sub > .@{ant-prefix}-menu-submenu > .@{ant-prefix}-menu-submenu-title,
      & > .@{ant-prefix}-menu-item-only-child,
      & > .@{ant-prefix}-menu-sub > .@{ant-prefix}-menu-item-only-child {
        padding-left: 16px !important;
      }
    }

    & > .@{ant-prefix}-menu-item-only-child {
      height: auto;
      min-height: 48px;
      margin: 0;
      padding-top: 12px;
      padding-bottom: calc(
        var(--zaui-space-size-md; 16px) * var(--zaui-size; 1) - var(--zaui-space-size-xs; 4px) *
          var(--zaui-size; 1)
      );

      h2 {
        height: auto !important;
        line-height: initial !important;
        white-space: pre-wrap;
      }
    }

    .@{ant-prefix}-menu-item {
      padding-left: 30px !important;

      &::after {
        display: none;
      }
    }
  }

  .@{ant-prefix}-menu-inline {
    .@{ant-prefix}-menu-submenu-title {
      margin: 0;
    }
  }

  .@{ant-prefix}-menu-item,
  .@{ant-prefix}-menu-submenu-title {
    &:hover {
      background: transparent;
    }
  }

  .@{ant-prefix}-menu-item-selected {
    background: transparent !important;

    h2 {
      color: var(--zaui-brand, #006aff) !important;
    }
  }

  .@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline > .@{ant-prefix}-menu-item,
  .@{ant-prefix}-menu-submenu-title {
    height: auto !important;
    min-height: 48px;
    margin: 0;
    padding: 12px 0;
    line-height: initial !important;
    white-space: pre-wrap;
  }

  .@{ant-prefix}-menu-title-content {
    div {
      display: flex;
      align-items: center;
      justify-content: left;

      .pro-layout-icon {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        color: var(--zaui-text, #343434);
      }

      h2 {
        display: inline-block;
        flex-grow: 1;
        margin-bottom: 0;
        padding-left: 12px;
        color: var(--zaui-text, #343434);
        font-weight: 400;
        font-size: var(--zaui-font-size-md, 14px);
        opacity: 1;
        // 修改：添加 150ms 的 opacity 淡入动画，消除"突然出现"的卡顿感
        transition:
          opacity 0.15s ease-out,
          margin 0.3s,
          color 0.3s;
      }
    }
  }

  .anticon-caret-down {
    top: auto;
    color: #999;
    transform: rotateZ(0deg);
    transition: all 0.1s ease-in;
  }

  .@{ant-prefix}-menu-submenu-open {
    .anticon-caret-down {
      color: var(--zaui-text, #343434);
      transform: rotateZ(180deg);
    }

    .@{ant-prefix}-menu-submenu-inline {
      .anticon-caret-down {
        color: #999;
        transform: rotateZ(0deg);
      }

      &.@{ant-prefix}-menu-submenu-open {
        .anticon-caret-down {
          color: var(--zaui-text, #343434);
          transform: rotateZ(180deg);
        }
      }
    }
  }

  .@{ant-prefix}-menu-submenu:hover
    > .@{ant-prefix}-menu-submenu-title
    > .@{ant-prefix}-menu-submenu-expand-icon {
    color: var(--zaui-text, #343434);
  }

  .@{ant-prefix}-menu-item-selected {
    .@{ant-prefix}-menu-title-content {
      h2 {
        font-weight: bold !important;
      }
    }
  }

  // 父级菜单不展示选中态，仅最后一级菜单显示选中高亮
  .@{ant-prefix}-menu-submenu-selected {
    & > .@{ant-prefix}-menu-submenu-title {
      background: transparent !important;

      .@{ant-prefix}-menu-title-content div {
        .pro-layout-icon,
        .anticon {
          color: var(--zaui-text, #343434) !important;
        }

        h2 {
          color: var(--zaui-text, #343434);
          font-weight: 400;
        }
      }
    }
  }
}