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

.pro-layout-menu-fold-list {
  padding-top: 4px;
  overflow-y: auto;

  li {
    width: 100%;
    min-height: 48px;
    padding: 12px;
    overflow: hidden;
    text-overflow: ellipsis;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--zaui-text, #343434);

      .pro-layout-icon {
        flex: 0 0 20px;
        width: 20px;
        min-width: 20px;
        height: 20px;
        color: #fff;
      }

      .anticon {
        flex: 0 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      h2 {
        display: none;
        flex-grow: 1;
        margin-bottom: 0;
        opacity: 1;
        transition:
          opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
          margin 0.3s,
          color 0.3s;
      }
    }

    &:hover {
      background: transparent;
    }

    i {
      display: inline-block;
      width: 19px;
      color: #909090;
    }

    h2 {
      display: inline-block;
      padding-left: var(--zaui-space-size-sm, 8px);
      color: var(--zaui-base-bg, #ffffff);
      font-weight: normal;
      font-size: var(--zaui-font-size-md, 14px);
    }

    &.active {
      background-color: var(--zaui-brand, #006aff);

      a {
        h2 {
          color: var(--zaui-base-bg, #ffffff);
        }
      }
    }
  }
}

.pro-layout-menu-tooltip {
  top: 64px !important;
  transform: none !important;
  transition: none !important;
  .@{ant-prefix}-popover-container {
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    box-shadow: 2px 0px 8px 0px rgba(0, 55, 93, 0.15);
  }
}

.pro-layout-menu-tooltip.pro-layout-menu-tooltip-has-notice {
  top: 96px !important;
}

.pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.@{ant-prefix}-popover-placement-rightBottom,
.pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.@{ant-prefix}-popover-placement-rightTop {
  left: 220px !important;
}

.pro-layout-menu-tooltip.@{ant-prefix}-popover-placement-rightBottom,
.pro-layout-menu-tooltip.@{ant-prefix}-popover-placement-rightTop {
  position: fixed;
  left: 49px !important;
  z-index: 99;
  padding-left: 0;

  .@{ant-prefix}-popover-arrow {
    display: none;
  }
}

.pro-layout-menu-tooltip .@{ant-prefix}-popover-content {
  padding: 0;
}

.pro-layout-menu-tooltip .@{ant-prefix}-popover-content > .@{ant-prefix}-popover-arrow {
  display: none;
}

.pro-layout-menu-tooltip .@{ant-prefix}-popover-content .@{ant-prefix}-popover-container {
  padding: 0;
  box-shadow: 2px 0px 5px 0px rgba(0, 55, 93, 0.1);
}