/* stylelint-disable selector-type-no-unknown */

.bixi-layout-menu {
  .ant-menu-item .ant-menu-item-icon + span,
  .ant-menu-submenu-title .ant-menu-item-icon + span,
  .ant-menu-item .anticon + span,
  .ant-menu-submenu-title .anticon + span {
    margin-left: 8px;
  }

  backface-visibility: hidden;
  transition: width 0.2s @default-ease, translate 0.2s @default-ease;
  -webkit-overflow-scrolling: touch;

  .bixi-layout-sider {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: @layout-fontSize;
    background-color: @menu--bg;

     // toggle 按钮样式
    .bixi-menu-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 27px;
      color: @menu-toggle-color;
      border-top: 1px solid @menu-border-color;
      border-radius: 0 2px 2px 0;
      cursor: pointer;
      .anticon {
        margin: 0;
        font-size: 10px !important;
      }
      &:hover {
        color: @menu-active-color;
      }
    }

    // 滚动条样式
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-thumb {
      width: 8px;
      background-color: rgba(65, 80, 123, 0.9) !important;
      border-radius: 5px;
    }
    .ant-menu {
      background-color: transparent;
    }

    & > ul {
      flex: 1;
      width: 100% !important;
      padding: 8px 4px 8px 8px;
      overflow-x: hidden;
      overflow-y: auto;
      li {
        outline: none;
      }
    }

    .ant-menu-item,
    .ant-menu-submenu-title {
      height: @menu-item-height !important;
      line-height: @menu-item-height !important;
    }

    .bixi-menu-item-container {
      width: calc(100% + 12px);
      border-radius: 4px;
    }

    .ant-menu-item-selected {
      .bixi-menu-item-container {
        background-color: rgba(77, 103, 190, 0.5);
      }
    }
  }


  &-opened {
    width: @large-width;
    .ant-menu-item,
    .ant-menu-submenu-title {
      width: 100%;
      margin: 2px 0 !important;
      color: @menu-color;
      font-size: @layout-fontSize;
      outline: none;
      transition: none;
      user-select: none;
      &:hover {
        color: @menu-active-color;
        background: transparent;
      }
    }
    .ant-menu-item-group {
      .ant-menu-item-group-title {
        padding-left: 16px;
        color: @menu-group-title-color;
        font-size: @layout-fontSize;
      }
    }
    span {
      user-select: none;
    }
  }

  &-collapsed {
    width: @small-width;
    .ant-menu-inline-collapsed {
      width: 100%;
      padding: 8px 0 !important;
      overflow-y: auto;

      .ant-menu-item,
      .ant-menu-submenu,
      .ant-menu-submenu-title {
        width: 100%;
        margin: 2px 0 !important;
        padding: 0 !important;
        line-height: inherit;
        text-align: center;
        span {
          overflow: hidden;
        }

        .anticon {
          margin-right: 0;
        }
        .bixi-menu-item-container {
          .anticon {
            // 修复 icon 不居中
            & +span  {
              display: none !important;
            }
          }
        }
        &:hover {
          color: @menu-active-color;
          background: transparent;
          .bixi-menu-item-container {
            color: @menu-active-color;
            background: rgba(77, 103, 190, 0.5) !important;
          }
        }
      }



      .bixi-submenu-selected,
      .ant-menu-item-selected {
        color: @menu-active-color;
        background: transparent !important;
        transition: none;
        span {
          color: @menu-active-color;
          background-color: transparent;
          border-radius: 4px;
        }

        .bixi-menu-item-container {
          color: @menu-active-color;
          background: rgba(77, 103, 190, 0.5) !important;
        }
      }

      .ant-menu-submenu-title {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .bixi-menu-item {
        display: flex;
        align-items: center;
        justify-content: center;
        &-container {
          width: 32px;
          height: 32px;
          margin: 0 !important;
          padding: 0 !important;
          color: @menu-color;

          & > span {
            width: 0;
            height: 0;
          }
          & > .ant-badge {
            display: none;
          }
        }
      }

      // 收起状态下 group 不可见
      .ant-menu-item-group {
        .ant-menu-item-group-title {
          display: none;
        }
      }

      .ant-menu-submenu-vertical {
        &:hover {
          background: transparent;
        }
        .ant-menu {
          display: none;
        }
      }
    }
  }

  .ant-menu-item-base {
    &:hover {
      color: @menu-active-color;
      background-color: transparent;
    }
  }

  .anticon {
    margin-right: 0;
    font-size: @layout-fontSize;
  }
  .ant-badge-multiple-words {
    padding: 0 4px;
  }
  .ant-badge-count {
    height: 18px !important;
    line-height: 18px !important;
    box-shadow: none !important;
  }

  // ant-menu-vertical为菜单收起状态
  .ant-menu-inline,
  .ant-menu-vertical,
  .ant-menu-vertical-left {
    border-right: none;
  }

  .ant-menu-submenu {
    & > .ng-trigger {
      // fix ie 11 menu background white
      background-color: transparent;
    }
    // 子菜单
    .ant-menu-sub {
      background-color: transparent;
    }

    .ant-menu-submenu-title {
      // 保证文字不溢出
      padding-right: 25px;
      &:hover {
        // 父级菜单右侧折叠箭头 hover 样式
        .ant-menu-submenu-arrow {
          &::before,
          &::after {
            height: 1px;
            background-color: @menu-active-color !important;
            background-image: linear-gradient(to right, @menu-active-color, @menu-active-color);
          }
        }
      }
    }

    // 父级菜单右侧折叠箭头样式
    .ant-menu-submenu-arrow {
      &::before,
      &::after {
        height: 1px;
        background-color: @menu-color !important;
        background-image: none;
      }
    }

    .ant-menu {
      color: @menu-color;
      font-size: 14px;
      line-height: 22px;
    }
  }

  .ant-menu-submenu-open,
  .ant-menu-submenu-selected {
    position: relative;
    & > .ant-menu-submenu-title {
      color: @menu-active-color;
      .ant-menu-submenu-arrow {
        &::before,
        &::after {
          height: 1px;
          background-color: @menu-active-color !important;
        }
      }
    }
  }

  .ant-menu{
    .ant-menu-item-selected::after {
      border: none;
      transition: none;
    }

    .bixi-submenu-selected,
    .ant-menu-item-selected {
      color: @menu-active-color;
      background: transparent !important;
      transition: none;
      span {
        color: @menu-active-color;
        background-color: transparent;
        border-radius: 4px;
      }
    }
  }
}

.cdk-overlay-container {
  // 菜单折叠时，hover到一级菜单上，弹出的二级菜单的类名
  .ant-menu-vertical.ant-menu-sub {
    background: @menu--bg !important;
    border-radius: 2px;
    box-shadow: 0 0 10px 0 @menu-box-shadow-color;
    .ant-menu-item,
    .ant-menu-submenu,
    .ant-menu-submenu-title {
      color: @menu-color;
      background: transparent;
      outline: none;
      user-select: none;
      .ant-menu-submenu-arrow {
        &::before,
        &::after {
          height: 1px;
          background-color: @menu-color !important;
          background-image: linear-gradient(to right, @menu-color, @menu-color);
        }
      }
      &:hover {
        color: @menu-active-color;
        background: transparent;
        .ant-menu-submenu-arrow {
          &::before,
          &::after {
            height: 1px;
            background-color: @menu-active-color !important;
            background-image: linear-gradient(to right, @menu-active-color, @menu-active-color);
          }
        }
      }
    }
    .bixi-menu-item {
      padding-left: 16px !important;
      .anticon {
        font-size: @layout-fontSize !important;
      }
    }
    .ant-menu-item-selected {
      color: @menu-active-color !important;
    }
  }

  // 二级菜单popup的宽度
  .bixi-layout-menu-item-tooltip {
    .ant-tooltip-content {
      .ant-tooltip-inner {
        max-width: 150px;
        background-color: @menu--bg;
      }
    }
  }
}