@import '../../index.less';
@btri-menu: ~'@{ant-prefix}-btri-menu';
@btri-icon: ~'@{ant-prefix}-btri-icon';
@btri-menu-submenu: ~'@{ant-prefix}-btri-menu-subMenu';
@btri-menu-item: ~'@{ant-prefix}-btri-menu-item';
@btri-dropdown-menu: ~'@{ant-prefix}-btri-dropdown-menu';
@ant-menu: ~'@{ant-prefix}-menu';
@ant-menuItem: ~'@{ant-menu}-item';
@ant-menuSubmenu: ~'@{ant-menu}-submenu';

.@{btri-menu} {
  &-box {
    background: var(--bg-2);
    display: inline-block;

    .@{ant-menu}-inline,
    .@{ant-menu}-vertical {
      border: none;
    }

    .@{ant-menuItem},
    .@{ant-menuSubmenu} {
      border-radius: var(--border-radius-base);

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    .@{ant-menuItem} {
      display: flex;
      align-items: center;
    }

    .@{ant-menuItem}-group {
      &-title {
        color: var(--disable-font);
        font-size: var(--h3-font-size);
        line-height: 22px;
        padding-top: 14px;
      }
    }

    .@{ant-menuSubmenu}:not(.@{ant-menuSubmenu}-vertical),
    .@{ant-menuItem}:not(.@{ant-menuSubmenu}-vertical) {
      .@{ant-menuSubmenu}-title {
        // padding-left: 16px !important;
      }
    }

    .@{ant-prefix}-menu-title-content {
      margin-left: 6px;
    }

    .@{ant-menuSubmenu},
    .@{ant-menuItem} {
      font-size: var(--h3-font-size);
      border-radius: var(--border-radius-base);

      .@{ant-menuSubmenu}-title {
        display: flex;
        align-items: center;
        border-radius: var(--border-radius-base);

        .@{ant-menuSubmenu}-expand-icon {
          color: var(--caption-font);
        }
      }

      .@{ant-menuItem}-icon {
        font-size: var(--h1-font-size) !important;
        color: var(--caption-font);
      }
    }

    .@{ant-menu}-vertical,
    .@{ant-menu}-inline {
      padding: 8px;

      .@{ant-menuItem} {
        min-width: 224px;
      }

      .@{ant-menuSubmenu} {
        .@{ant-menuSubmenu}-title {
          min-width: 224px;
        }
      }

      .@{ant-menuItem},
      .@{ant-menuSubmenu} {
        .@{ant-menu}-sub {
          background: transparent;
        }

        margin-bottom: 4px !important;

        .@{ant-menu}-title-content {
          color: var(--caption-font);
        }
      }

      .@{ant-menuItem}:hover {
        background: var(--gray-blue-2);

        .@{ant-menu}-title-content {
          color: var(--body-font);
        }
      }

      .@{ant-menuSubmenu}-active:hover {
        & > .@{ant-menuSubmenu}-title {
          background: var(--gray-blue-2);
          color: var(--body-font);
        }
      }

      .@{ant-menuSubmenu}:hover {
        .@{ant-menuSubmenu}-expand-icon {
          color: var(--body-font) !important;
        }
      }

      .@{ant-menuItem}-selected {
        background: var(--primary-1);

        .@{btri-icon}-box,
        .@{ant-menu}-title-content {
          color: var(--primary-color);
          font-weight: 600;
        }
      }

      .@{ant-menuSubmenu}-selected {
        & > .@{ant-menuSubmenu}-title {
          font-weight: 600;

          .@{btri-icon}-box {
            color: var(--body-font);
          }

          .@{ant-menu}-title-content {
            color: var(--gray-13);
          }
        }
      }

      .@{ant-menuItem}-selected::after {
        border: none;
        transition: none !important;
      }

      .@{ant-menuSubmenu}:not(.@{ant-menuSubmenu}-vertical) {
        .@{btri-icon}-box {
          .icon-down-small {
            font-size: var(--h2-font-size);
            transform: rotate(0deg);
            transition: all 0.3s;
          }
        }
      }

      .@{ant-menuSubmenu}-vertical {
        .@{btri-icon}-box {
          .icon-down-small {
            font-size: var(--h2-font-size);
            transform: rotate(-90deg) translateX(-50%);
          }
        }
      }

      .@{ant-menuSubmenu}-open:not(.@{ant-menuSubmenu}-vertical) {
        .@{btri-icon}-box {
          .icon-down-small {
            transform: rotate(-180deg) translateX(-50%);
          }
        }
      }
    }

    .@{ant-menu}-horizontal {
      border: none;
      padding: 10px 16px;
      line-height: 36px;

      .@{ant-menuItem},
      .@{ant-menuSubmenu} {
        padding: 0 var(--padding-base) !important;

        .@{ant-menu}-title-content {
          color: var(--caption-font);
        }
      }

      .@{ant-menuItem}::after,
      .@{ant-menuSubmenu}:after {
        border: none !important;
      }

      .@{ant-menuSubmenu}-selected,
      .@{ant-menuSubmenu}-active,
      .@{ant-menuSubmenu}-open {
        color: var(--gray-13);

        .@{ant-menuSubmenu}-title:hover {
          color: var(--body-font);
        }
      }

      .@{ant-menuItem}:hover,
      .@{ant-menuSubmenu}:hover {
        background: var(--gray-blue-2);

        .@{ant-menuSubmenu}-title,
        .@{ant-menu}-title-content {
          color: var(--body-font);

          .@{btri-icon}-box {
            .icon-down-small {
              transform: rotate(-180deg);
              transition: all 0.3s linear;
            }
          }
        }

        border-radius: var(--border-radius-base);
      }

      .@{ant-menuItem}-selected,
      .@{ant-menuSubmenu}-selected {
        .@{ant-menuSubmenu}-title,
        .@{ant-menu}-title-content {
          color: var(--gray-13) !important;
          font-weight: 600;
        }
      }
    }

    .@{ant-menu}-inline .@{ant-menuItem}::after {
      border: none !important;
    }
  }

  &-box:not(.@{btri-menu}-light) {
    .@{ant-menu}-horizontal {
      .@{ant-menuItem}:hover,
      .@{ant-menuSubmenu}:hover {
        background: var(--fill-2) !important;
      }
    }

    .@{ant-menu}-vertical,
    .@{ant-menu}-inline {
      .@{ant-menuItem}:hover {
        background: var(--gray-4);
      }

      .@{ant-menuItem}-selected {
        background: var(--primary-3);

        .@{btri-icon}-box,
        .@{ant-menu}-title-content {
          color: var(--white);
        }
      }

      .@{ant-menuSubmenu}-active:hover {
        & > .@{ant-menuSubmenu}-title {
          background: var(--gray-4);
          color: var(--body-font);
          border-radius: var(--border-radius-base);
        }
      }
    }
  }

  &-item {
    .anticon {
      margin-right: 4px;
    }
  }

  &-divider.@{ant-prefix}-dropdown-menu-item-divider {
    background-color: var(--border-3);
    margin: 0 4px;
  }
}

.@{btri-menu}-Collapsed {
  font-size: 20px;
  margin: 14px 0 14px 26px;
  cursor: pointer;
  color: var(--caption-font);
}

.@{ant-menu}-inline-collapsed {
  .@{ant-menuItem} {
    min-width: 0 !important;
  }

  .@{ant-menuSubmenu}-title {
    min-width: 0px !important;
  }

  .@{ant-menuSubmenu}-expand-icon {
    visibility: hidden;
  }
}

.@{ant-menuSubmenu}-popup {
  & > .@{ant-menu} {
    color: var(--body-font);
  }

  .@{ant-menu}-sub {
    .@{ant-menuItem} {
      margin: 0;
    }

    .@{ant-menuItem}-title,
    .@{ant-menuSubmenu}-title {
      margin: 0;
      display: flex;
      align-items: center;
    }

    .@{ant-menuItem}:hover,
    .@{ant-menuSubmenu}:hover {
      background: var(--gray-blue-2);

      .@{ant-menuSubmenu}-title,
      .@{ant-menu}-title-content {
        color: var(--body-font);
      }
    }
  }

  .@{ant-menuSubmenu},
  .@{ant-menuItem},
  .@{ant-menuSubmenu}-active,
  .@{ant-menuSubmenu}-open {
    font-size: 14px;

    .@{ant-menuItem}-icon {
      font-size: 20px;
    }
  }

  .@{ant-menuItem}-active,
  .@{ant-menuSubmenu}-active,
  .@{ant-menuSubmenu}-open {
    color: var(--body-font) !important;
  }

  .@{ant-menuItem}-selected {
    color: var(--primary-color);

    .@{ant-menuItem}-title-content {
      color: var(--primary-color);
    }
  }

  .@{ant-menuSubmenu}-expand-icon {
    transform: rotate(-90deg) translateX(50%);
    color: var(--body-font) !important;
  }
}

.@{btri-dropdown-menu} {
  border: 1px solid var(--primary-2);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius-base);
  overflow: hidden;

  .@{btri-menu-submenu} {
    overflow: hidden;
  }

  .@{ant-prefix}-dropdown-menu-submenu-selected {
    background-color: var(--primary-1);

    .anticon-right.@{ant-prefix}-dropdown-menu-submenu-arrow-icon {
      color: var(--primary-color);
    }
  }
}

.@{ant-prefix}-dropdown-menu-submenu-popup {
  .@{ant-prefix}-dropdown-menu-vertical {
    border: 1px solid var(--primary-2);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-base);
    overflow: hidden;
  }

  .@{ant-prefix}-dropdown-menu-submenu-selected {
    background-color: var(--primary-1);

    .anticon-right.@{ant-prefix}-dropdown-menu-submenu-arrow-icon {
      color: var(--primary-color);
    }
  }

  .@{btri-menu-item},
  .@{btri-menu-submenu} {
    margin: 4px;
    border-radius: var(--border-radius-base);

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.@{ant-menu}-inline-collapsed {
  width: 56px !important;

  .@{ant-menuItem}-group-title {
    height: 40px;
    color: transparent;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 8px !important;
  }

  .@{ant-menuItem}-group-title::before {
    content: '————';
    height: 1px;
    width: 100%;
    margin: auto;
    background-color: var(--fill-1);
  }
}

.@{btri-menu}-box {
  .@{btri-menu}-CollapseYet {
    margin-left: 19px !important;
  }
}

.@{btri-menu}-NavBox {
  display: flex;
  align-items: center;
  width: 100%;

  .@{btri-menu}-NavMenu {
    flex: 1 1 0%;
  }
}