@root-entry-name: 'default';
@import (reference) '~antd/es/style/themes/index.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;
        height   : 20px;
        min-width: 20px;
        color    : #fff;
      }

      h2 {
        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;
        display: none;
      }
    }

    &:hover {
      background: var(--ant-primary-8, #003eb3);
    }

    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       : 48px !important;
  transform : none !important;
  transition: none !important
}

.pro-layout-menu-tooltip.pro-layout-menu-tooltip-has-notice {
  top: 80px !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;
  z-index     : 1001;
  left        : 49px !important;
  padding-left: 0
}

.pro-layout-menu-tooltip .@{ant-prefix}-popover-inner-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-inner {
  padding   : 0;
  box-shadow: 2px 0px 5px 0px rgba(0, 55, 93, 0.1);
}