@basic-menu-prefix-cls: ~'@{namespace}-basic-menu';

.app-top-menu-popup {
  min-width: 150px;

  .ant-menu-sub {
    border-radius: 16px;
  }
}

.ant-menu-submenu {
  & > .ant-menu {
    border-radius: 16px;
  }
}

.ant-menu-dark .ant-menu-sub,
.ant-menu.ant-menu-dark .ant-menu-sub {
  background: #102642;
}

.ant-menu-vertical {
  &.ant-menu-dark {
    background: #102642;
  }

  .ant-menu-submenu-selected,
  .ant-menu-item-selected {
    background: linear-gradient(90deg, @primary-color 0%, #102642 100%);
    color: #fff !important;

    &:hover {
      color: #fff;
    }

    &.light {
      background: linear-gradient(90deg, @primary-color 0%, #fff 100%);
      color: #fff;

      &:hover .ant-menu-submenu-title {
        color: #fff;
      }
    }
  }

  .ant-menu-submenu-popup.ant-menu-light {
    .ant-menu-item-selected {
      background: linear-gradient(90deg, @primary-color 0%, #fff 100%);
    }
  }

  .ant-menu-submenu .ant-menu-submenu-title,
  .ant-menu-item {
    margin: 0 !important;
    height: 50px;
    line-height: 50px;
    padding-left: 25px;
  }

  .ant-menu-submenu-arrow {
    right: 12px;
  }
}

.@{basic-menu-prefix-cls} {
  width: 100%;

  .ant-menu-item {
    transition: unset;
  }

  &__sidebar-hor {
    &.ant-menu-horizontal {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      &.ant-menu-dark {
        background-color: transparent;
        color: #c3c8cf;

        .ant-menu-submenu:hover,
        .ant-menu-item-open,
        .ant-menu-submenu-open,
        .ant-menu-item-selected,
        .ant-menu-submenu-selected,
        .ant-menu-item:hover,
        .ant-menu-item-active,
        .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
        .ant-menu-submenu-active,
        .ant-menu-submenu-title:hover {
          color: #fff;
          background: linear-gradient(180deg, #102642 0%, #1c8dff 100%);

          .iconfont-svg {
            fill: #fff !important;
          }
        }

        .ant-menu-item:hover,
        .ant-menu-item-active,
        .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
        .ant-menu-submenu-active,
        .ant-menu-submenu-title:hover {
          background-color: @top-menu-active-bg-color;
        }

        .@{basic-menu-prefix-cls}-item__level1 {
          background-color: transparent;

          &.ant-menu-item-selected,
          &.ant-menu-submenu-selected {
            background-color: @top-menu-active-bg-color !important;
          }
        }

        .ant-menu-item,
        .ant-menu-submenu {
          padding: 0;
          border-color: transparent;

          &.ant-menu-overflow-item-rest {
            max-width: none;
            min-width: 100px;
          }
          &.@{basic-menu-prefix-cls}-item__level1,
          .ant-menu-submenu-title {
            height: @header-height;
            line-height: @header-height;
            transition: none;
            padding: 0 24px;

            .anticon + span {
              margin-left: 0;
              max-width: 96px;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }

  .ant-menu-submenu,
  .ant-menu-submenu-inline {
    transition: unset;
  }

  .ant-menu-inline.ant-menu-sub {
    box-shadow: unset !important;
    transition: unset;
  }
}

.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
  background-color: unset !important;
}
