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

.pro-layout-sider-menu {
  width: 220px;
  background: #fff;
  border-radius: 8px;

  h2 {
    margin-bottom: 0;
    padding: 16px 16px 8px;
    color: var(--zaui-text, #343434);
    font-weight: 500;
    font-size: var(--zaui-font-size-lg, 16px);
    line-height: inherit;
    text-align: left;
  }

  .pro-layout-open-menu {
    &.pro-layout-sider-menu-list {
      overflow-y: auto;

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

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

        &::after {
          display: none;
        }
      }

      .@{ant-prefix}-menu {
        .@{ant-prefix}-menu-item-only-child {
          .@{ant-prefix}-menu-title-content .pro-layout-open-menu-lv1 h2 {
            padding-right: 0;
          }
        }
        .@{ant-prefix}-menu-title-content {
          div h2 {
            padding: 0;
            padding-right: 12px;
            color: var(--zaui-text);
          }

          .pro-layout-open-menu-lv1 {
            h2 {
              padding-right: 26px;
              color: var(--zaui-text);
              font-weight: 500;
            }
          }
        }

        .@{ant-prefix}-menu-title-content div .pro-layout-icon {
          margin-right: 12px;

          &.pro-layout-icon-empty {
            display: none;

            & ~ h2 {
              margin-left: 32px;
            }
          }
        }

        // ProIcon 渲染为 .anticon 包裹层，需单独处理间距和颜色锁定
        .@{ant-prefix}-menu-title-content div .anticon {
          flex: 0 0 20px;
          width: 20px;
          height: 20px;
          margin-right: 12px;
          color: var(--zaui-text, #343434) !important;
        }

        .pro-layout-icon {
          color: var(--zaui-text, #343434) !important;
          fill: currentcolor;
        }

        &.@{ant-prefix}-menu-sub {
          overflow: hidden;
          background: #fff;
        }

        overflow-x: hidden;
        overflow-y: auto;

        // 与展开态一致：hover 使用透明背景 + 左侧品牌色半透明条
        .@{ant-prefix}-menu-submenu-title:hover,
        .@{ant-prefix}-menu-item:hover,
        .@{ant-prefix}-menu-item-selected {
          position: relative;
          background-color: transparent !important;

          &::before {
            position: absolute;
            left: var(--zaui-space-size-sm, 8px);
            right: var(--zaui-space-size-sm, 8px);
            width: auto;
            min-height: 38px;
            height: 80%;
            background-color: var(--zaui-brand, #006aff);
            border-radius: var(--zaui-border-radius, 8px);
            opacity: 0.08;
            content: '';
          }
        }

        .@{ant-prefix}-menu-item {
          margin: 0;
        }

        .anticon-caret-down {
          color: #909090;
        }

        .@{ant-prefix}-menu-submenu-title,
        &.@{ant-prefix}-menu-root > .@{ant-prefix}-menu-item-only-child,
        &.@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline > .@{ant-prefix}-menu-item {
          min-height: 40px;
          padding-top: 8px;
          padding-bottom: 8px;
          width: 100%;
          border-radius: 0;
        }
      }
    }
  }
}