@mixin popup-dark {
  & > .#{$ns}Nav-Menu {
    background-color: var(--Menu-dark-backgroundColor);

    .#{$ns}Nav-Menu-item {
      color: var(--Menu-dark-fontColor);

      .#{$ns}Nav-Menu-item-icon,
      .#{$ns}Nav-Menu-item-label {
        color: var(--Menu-dark-fontColor);
      }

      &-active {
        background-color: var(--Menu-dark-backgroundColor);
        color: var(--Menu-dark-fontColor-onHover);

        .#{$ns}Nav-Menu-item-icon,
        .#{$ns}Nav-Menu-item-label {
          color: var(--Menu-dark-fontColor-onHover);
        }
      }

      &-selected {
        background-color: var(--Menu-dark-backgroundColor);
        color: var(--Menu-dark-ancestor-fontColor-onActive) !important;

        .#{$ns}Nav-Menu-item-icon,
        .#{$ns}Nav-Menu-item-label {
          color: var(--Menu-dark-ancestor-fontColor-onActive) !important;
        }
      }
    }

    .#{$ns}Nav-Menu-submenu-dark {
      .#{$ns}Nav-Menu-submenu-title {
        color: var(--Menu-dark-fontColor);

        .#{$ns}Nav-Menu-item-icon,
        .#{$ns}Nav-Menu-item-label,
        .#{$ns}Nav-Menu-submenu-arrow {
          color: var(--Menu-dark-fontColor);
        }

        &:hover {
          .#{$ns}Nav-Menu-item-label,
          .#{$ns}Nav-Menu-item-icon,
          .#{$ns}Nav-Menu-submenu-arrow {
            color: var(--Menu-dark-fontColor-onHover);
          }
        }
      }
    }

    .#{$ns}Nav-Menu-submenu-active {
      .#{$ns}Nav-Menu-submenu-title {
        background-color: var(--Menu-dark-backgroundColor);
        color: var(--Menu-dark-fontColor-onActive);

        .#{$ns}Nav-Menu-item-icon,
        .#{$ns}Nav-Menu-item-label {
          color: var(--Menu-dark-fontColor-onActive);
        }
      }
    }

    .#{$ns}Nav-Menu-submenu-selected {
      .#{$ns}Nav-Menu-submenu-title {
        background-color: var(--Menu-dark-backgroundColor);
        color: var(--Menu-dark-ancestor-fontColor-onActive);

        .#{$ns}Nav-Menu-item-icon,
        .#{$ns}Nav-Menu-item-label,
        .#{$ns}Nav-Menu-submenu-arrow {
          color: var(--Menu-dark-ancestor-fontColor-onActive);
        }
      }
    }
  }
}

@mixin selected-indicator($themeColor) {
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-right: 3px solid $themeColor;
    transform: scaleY(1);
    opacity: 1;
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
      opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
      -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}

.#{$ns}Nav-Menu {
  --Menu-width: var(--Layout-aside-width);
  --Menu-width--collapsed: var(--Layout-aside-width-collapsed);
  --Menu-fontSize: var(--Nav-item-fontSize);
  --Menu-fontSize--collapsed: var(--Nav-item-collapsed-fontSize);
  --Menu-fontWeight: var(--Nav-item-fontWeight);
  --Menu-fontColor-onDisabled: var(--Nav-item-fontColor-onDisabled);
  --Menu-item-height--vertical: #{px2rem(40px)};
  --Menu-item-height--horizontal: var(--Nav-Item-height--horizontal);
  --Menu-Submenu-title-paddingX: var(--Layout-paddingX);
  --Menu-Submenu-item-paddingX: var(--Nav-Item-Badge-paddingRight);

  --Menu-icon-size: var(--Layout-icon-size);

  --Menu-light-backgroundColor: var(--Layout-light-backgroundColor);
  --Menu-light-backgroundColor-onHover: var(--Layout-light-bgColor-onHover);
  --Menu-light-fontColor: var(--Layout-light-fontColor);
  --Menu-light-fontColor-onHover: var(--Layout-fontColor--onHover);
  --Menu-light-ancestor-fontColor-onActive: var(--Layout-light-fontColor);
  --Menu-light-fontColor-onActive: var(--Layout-fontColor--onActive);
  --Menu-light-groupTitle-fontColor: #84868c;
  --Menu-light-selectedIndicator-color: var(--Layout-fontColor--info);

  --Menu-dark-backgroundColor: var(--Layout-dark-backgroundColor);
  --Menu-dark-backgroundColor-onHover: var(--Layout-fontColor--info);
  --Menu-dark-fontColor: var(--Layout-dark-fontColor);
  --Menu-dark-fontColor-onHover: var(--Layout-fontColor--onHover);
  --Menu-dark-ancestor-fontColor-onActive: var(--Layout-fontColor--onActive);
  --Menu-dark-fontColor-onActive: var(--Layout-dark-fontColor);
  --Menu-dark-groupTitle-fontColor: #84868c;
  --Menu-dark-selectedIndicator-color: var(--Layout-dark-selected-color);

  outline: none;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0; // Override default ul/ol
  padding-right: 0; // Override default ul/ol in RTL direction
  list-style: none;
  color: var(--Menu-light-fontColor);
  background-color: var(--Menu-light-backgroundColor);
  transition: all 0.3s;
  width: 100%;

  &.#{$ns}Nav-Menu-dark {
    color: var(--Menu-dark-fontColor);
    background-color: var(--Menu-dark-backgroundColor);
  }

  &.#{$ns}Nav-Menu-light {
    color: var(--Menu-light-fontColor);
    background-color: var(--Menu-light-backgroundColor);
  }

  &-horizontal {
    display: flex;
    flex-wrap: nowrap;
  }

  &-submenu {
    &-hidden {
      display: none;
    }
  }

  &-overflow-item {
    flex: none;
  }

  &-rtl {
    direction: rtl;
  }

  &-hidden {
    display: none;
  }

  &-collapse {
    overflow: hidden;
    transition: height 0.3s ease-out;
  }

  &-collapsed {
    width: var(--Menu-width--collapsed);
  }

  &-disabled {
    cursor: not-allowed;
  }

  &-root.#{$ns}Nav-Menu-collapsed {
    .#{$ns}Nav-Menu-item,
    .#{$ns}Nav-Menu-submenu-title {
      padding: 0;
      text-align: center;
    }
  }

  &-item-link {
    display: flex;
    align-items: center;
    height: var(--Nav-Item-height);
    flex-grow: 1;
    overflow: hidden;
  }

  &-item-divider {
    border-bottom: 1px solid #e6e6e8;

    &-dark {
      border-bottom: 1px solid #3a3e47;
    }
  }

  &-item-icon {
    margin-right: var(--gap-sm);
    font-size: var(--Menu-icon-size);
    color: var(--Menu-light-fontColor);

    img {
      height: var(--Tabs-linkFontSize);
      vertical-align: middle;
    }

    &-collapsed {
      font-size: var(--Menu-fontSize--collapsed);
      margin: 0 auto;
    }

    &-svg {
      &-collapsed {
        font-size: var(--Menu-fontSize--collapsed);
        margin: 0 auto;
        height: var(--Menu-item-height--vertical);
      }
    }

    .#{$ns}Nav-Menu-dark & {
      color: var(--Menu-dark-fontColor);
    }

    .#{$ns}Nav-Menu-light & {
      color: var(--Menu-light-fontColor);
    }
  }

  &-item-label {
    opacity: 0.95;
    font-size: var(--Menu-fontSize);
    color: var(--Menu-light-fontColor);
    font-weight: var(--Menu-fontWeight);
    padding: 0;
    text-align: left;
    display: inline-block;
    max-width: var(--Menu-width);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;

    &-collapsed {
      font-size: var(--Menu-fontSize--collapsed);
      margin: 0 auto;
      font-weight: 600;
    }

    .#{$ns}Nav-Menu-dark & {
      color: var(--Menu-dark-fontColor);
    }

    .#{$ns}Nav-Menu-light & {
      color: var(--Menu-light-fontColor);
    }
  }

  &-item-dragBar {
    color: var(--Nav-Item-Drag-color);
    position: absolute;
    left: 0;
    visibility: hidden;
  }

  &-item-group-list {
    margin: 0;
    padding: 0;
  }

  &-item-group-title {
    color: var(--Menu-light-groupTitle-fontColor);
    line-height: px2rem(20px);
    padding: 0 var(--Menu-Submenu-item-paddingX) 0 px2rem(16px);
    font-size: px2rem(12px);
    margin: px2rem(12px) 0 px2rem(4px) 0;

    &.#{$ns}Nav-Menu-dark {
      color: var(--Menu-dark-groupTitle-fontColor);
    }

    &.#{$ns}Nav-Menu-light {
      color: var(--Menu-light-groupTitle-fontColor);
    }
  }

  &-item-active,
  &-submenu-active {
    background-color: var(--Menu-light-backgroundColor);
    color: var(--Menu-light-fontColor-onActive);

    .#{$ns}Nav-Menu-dark & {
      background-color: var(--Menu-dark-backgroundColor);
      color: var(--Menu-dark-fontColor-onActive);
    }

    .#{$ns}Nav-Menu-light & {
      background-color: var(--Menu-light-backgroundColor);
      color: var(--Menu-light-fontColor-onActive);
    }
  }

  &-item-selected {
    background-color: var(--Menu-light-backgroundColor);
    // fix chrome render bug
    transform: translateZ(0);

    .#{$ns}Nav-Menu-item-icon,
    .#{$ns}Nav-Menu-item-label {
      color: var(--Menu-light-fontColor-onActive) !important;
    }

    &.#{$ns}Nav-Menu-dark {
      background-color: var(--Menu-dark-backgroundColor-onHover);

      .#{$ns}Nav-Menu-item-icon,
      .#{$ns}Menu-item-label {
        color: var(--Menu-dark-fontColor-onActive) !important;
      }
    }

    &.#{$ns}Nav-Menu-light {
      background-color: var(--Menu-light-backgroundColor-onHover);

      .#{$ns}Nav-Menu-item-icon,
      .#{$ns}Nav-Menu-item-label {
        color: var(--Menu-light-fontColor-onActive) !important;
      }
    }
  }

  &-item,
  &-submenu {
    .#{$ns}Badge {
      position: static;
      flex: 1;
      width: 0;
      display: flex;
    }
    .#{$ns}Nav-Menu-item-wrap {
      display: flex;
      justify-content: space-between;
    }
  }

  &-item-extra {
    position: relative;

    .#{$ns}DropDown {
      > .#{$ns}Button {
        padding: 0;

        > i {
          margin: 0;
        }
      }
    }
  }

  &-inline {
    .#{$ns}Nav-Menu-item-selected {
      background-color: var(--Menu-light-backgroundColor-onHover);
      @include selected-indicator(var(--Menu-light-selectedIndicator-color));

      .#{$ns}Nav-Menu-item-icon,
      .#{$ns}Nav-Menu-item-label {
        color: var(--Menu-light-fontColor-onActive) !important;
      }
    }

    &.#{$ns}Nav-Menu-dark {
      .#{$ns}Nav-Menu-item-selected {
        background-color: var(--Menu-dark-backgroundColor-onHover);
        @include selected-indicator(var(--Menu-dark-selectedIndicator-color));

        .#{$ns}Nav-Menu-item-icon,
        .#{$ns}Nav-Menu-item-label {
          color: var(--Menu-dark-fontColor-onActive) !important;
        }
      }
    }

    &.#{$ns}Nav-Menu-light {
      .#{$ns}Nav-Menu-item-selected {
        background-color: var(--Menu-light-backgroundColor-onHover);
        @include selected-indicator(var(--Menu-light-selectedIndicator-color));

        .#{$ns}Nav-Menu-item-icon,
        .#{$ns}Nav-Menu-item-label {
          color: var(--Menu-light-fontColor-onActive) !important;
        }
      }

      .#{$ns}Nav-Menu-submenu-selected {
        > .#{$ns}Nav-Menu-submenu-title {
          .#{$ns}Nav-Menu-item-icon,
          .#{$ns}Nav-Menu-item-label,
          .#{$ns}Nav-Menu-submenu-arrow {
            color: var(--Menu-light-fontColor-onActive) !important;
          }
        }
      }
    }
  }

  .#{$ns}Nav-Menu-dark {
    .#{$ns}Nav-Menu-submenu-selected {
      background-color: transparent;

      & > .#{$ns}Nav-Menu-submenu-title {
        color: var(--Menu-dark-ancestor-fontColor-onActive);

        & > .#{$ns}Nav-Menu-item-label,
        & > .#{$ns}Nav-Menu-item-icon {
          color: var(--Menu-dark-ancestor-fontColor-onActive);
        }

        .#{$ns}Nav-Menu-item-label,
        .#{$ns}Nav-Menu-item-icon {
          color: var(--Menu-dark-ancestor-fontColor-onActive);
        }
      }
    }
  }

  .#{$ns}Nav-Menu-light {
    .#{$ns}Nav-Menu-submenu-selected {
      & > .#{$ns}Nav-Menu-submenu-title {
        color: var(--Menu-light-ancestor-fontColor-onActive);

        .#{$ns}Nav-Menu-item-label,
        .#{$ns}Nav-Menu-item-icon {
          color: var(--Menu-light-ancestor-fontColor-onActive);
        }
      }
    }
  }

  & > li.#{$ns}Nav-Menu-submenu {
    padding: 0;
  }

  &-vertical.#{$ns}Nav-Menu-sub {
    min-width: 160px;
    margin-top: 0;
    border-radius: 2px;
    box-shadow: 0 4px 5px 0 rgba(21, 26, 38, 0.06),
      0 1px 10px 0 rgba(21, 26, 38, 0.05), 0 2px 4px -1px rgba(21, 26, 38, 0.04);
  }

  &-item,
  &-submenu-title {
    margin: 0;
    position: relative;
    padding: 0 px2rem(16px);
    line-height: var(--Nav-Item-height);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--Menu-light-fontColor);

    &:hover {
      .#{$ns}Nav-Menu-item-label,
      .#{$ns}Nav-Menu-item-icon,
      .#{$ns}Nav-Menu-submenu-arrow {
        color: var(--Menu-light-fontColor-onHover);
      }

      .#{$ns}Nav-Menu-item-dragBar {
        visibility: visible;
      }
    }

    .#{$ns}Nav-Menu-dark & {
      color: var(--Menu-dark-fontColor);
      background-color: var(--Menu-dark-backgroundColor);

      &:hover {
        .#{$ns}Nav-Menu-item-label,
        .#{$ns}Nav-Menu-item-icon,
        .#{$ns}Nav-Menu-submenu-arrow {
          color: var(--Menu-dark-fontColor-onHover);
        }
      }
    }

    .#{$ns}Nav-Menu-light & {
      color: var(--Menu-light-fontColor);
      background-color: var(--Menu-light-backgroundColor);

      &:hover {
        .#{$ns}Nav-Menu-item-label,
        .#{$ns}Nav-Menu-item-icon,
        .#{$ns}Nav-Menu-submenu-arrow {
          color: var(--Menu-light-fontColor-onHover);
        }
      }
    }

    .#{$ns}Nav-Menu-rtl & {
      padding: 7px 16px 7px 7px;
    }

    // Disabled state sets text to gray and nukes hover/tab effects
    &.#{$ns}Nav-Menu-item-disabled,
    &.#{$ns}Nav-Menu-submenu-disabled {
      color: #777 !important;
    }
  }

  &-item-tooltip-wrap {
    padding: 0;
  }

  &-collapsed > &-item,
  &-collapsed > &-submenu-title,
  &-collapsed > .#{$ns}Nav-Menu-submenu > &-submenu-title {
    text-overflow: initial;
  }

  & > &-item-divider {
    height: 1px;
    margin: 0 16px 4px 16px;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    background-color: #ebebeb;
  }

  &-submenu {
    &-popup {
      position: absolute;
      z-index: 1500;
    }

    > .#{$ns}Nav-Menu {
      background-color: var(--Menu-light-backgroundColor);
    }

    &.#{$ns}Nav-Menu-submenu-dark > .#{$ns}Nav-Menu {
      background-color: var(--Menu-dark-backgroundColor);
    }
  }

  &-submenu-popup-dark {
    @include popup-dark();
  }

  .#{$ns}Nav-Menu-submenu-title,
  .#{$ns}Nav-Menu-item {
    cursor: pointer;

    .anticon {
      width: 14px;
      height: 14px;
      margin-right: 8px;
      top: -1px;

      .#{$ns}Nav-Menu-rtl & {
        margin-right: 0;
        margin-left: 8px;
      }
    }
  }

  &-overflow {
    &-item-rest {
      .#{$ns}Nav-Menu-submenu-title {
        margin: 0;
      }

      .#{$ns}Nav-Menu-item-icon {
        display: initial;
        position: static;
      }
    }
  }

  &-horizontal {
    height: var(--Menu-item-height--horizontal);
    background-color: var(--Menu-light-backgroundColor);
    border: none;
    white-space: nowrap;
    overflow: hidden;
    width: auto;

    .#{$ns}Nav-Menu-item-tooltip-wrap {
      display: inline-block;
      zoom: 1;
      vertical-align: middle;
    }

    .#{$ns}Nav-Menu-overflow-item.#{$ns}Nav-Menu-overflow-item-rest
      > .#{$ns}Nav-Menu-submenu-title {
      .#{$ns}Nav-Menu-overflowedIcon {
        margin-right: 0;
      }
    }

    &.#{$ns}Nav-Menu-dark {
      background-color: var(--Menu-dark-backgroundColor);
    }

    &.#{$ns}Nav-Menu-light {
      background-color: var(--Menu-light-backgroundColor);
    }

    & > .#{$ns}Nav-Menu-item-tooltip-wrap > .#{$ns}Nav-Menu-item,
    & > .#{$ns}Nav-Menu-submenu > .#{$ns}Nav-Menu-submenu-title {
      padding: 0 px2rem(16px);
      height: var(--Menu-item-height--horizontal);

      .#{$ns}Nav-Menu-item-link {
        height: var(--Menu-item-height--horizontal);
      }

      .#{$ns}Nav-Menu-item-icon,
      .#{$ns}Nav-Menu-item-label {
        line-height: var(--Menu-item-height--horizontal);
      }
    }

    .#{$ns}Nav-Menu-item.#{$ns}Nav-Menu-item-selected {
      &:after {
        content: ' ';
        width: 100%;
        height: 2px;
        background: var(--Menu-dark-ancestor-fontColor-onActive);
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }

    & > .#{$ns}Nav-Menu-submenu,
    & > .#{$ns}Nav-Menu-item {
      margin: 0;
      border-bottom: 2px solid transparent;
      display: inline-block;
      vertical-align: bottom;

      &-active {
        background-color: var(--Menu-light-backgroundColor);
        color: var(--Menu-light-fontColor-onActive);
      }

      &-selected {
        border-bottom: 2px solid var(--Menu-light-fontColor-onActive);
        background-color: transparent;

        .#{$ns}Nav-Menu-item-icon,
        .#{$ns}Nav-Menu-item-label {
          color: var(--Menu-light-fontColor-onActive);
        }
      }
    }

    &:after {
      content: '\20';
      display: block;
      height: 0;
      clear: both;
    }

    .#{$ns}Nav-Menu-submenu-arrow {
      display: inline-block;
      font-size: px2rem(9px);
      text-align: center;
      vertical-align: middle;
      text-transform: none;
      text-rendering: auto;
      line-height: px2rem(20px);
      margin-left: 5px;
      color: var(--Menu-light-fontColor);

      & > svg {
        top: auto;
      }
    }

    .#{$ns}Nav-Menu-item-label {
      vertical-align: middle;
    }

    &.#{$ns}Nav-Menu-dark {
      & > .#{$ns}Nav-Menu-submenu,
      & > .#{$ns}Nav-Menu-item {
        &-active {
          background-color: var(--Menu-dark-backgroundColor);
          color: var(--Menu-dark-fontColor-onActive);
        }

        &-selected {
          border-bottom: 2px solid var(--Menu-dark-selectedIndicator-color);

          .#{$ns}Nav-Menu-item-icon,
          .#{$ns}Nav-Menu-item-label {
            color: var(--Menu-dark-fontColor-onActive);
          }
        }
      }

      .#{$ns}Nav-Menu-submenu-arrow {
        color: var(--Menu-dark-fontColor);
      }
    }

    &.#{$ns}Nav-Menu-light {
      & > .#{$ns}Nav-Menu-submenu,
      & > .#{$ns}Nav-Menu-item {
        &-active {
          background-color: var(--Menu-light-backgroundColor);
          color: var(--Menu-light-fontColor-onActive);
        }

        &-selected {
          border-bottom: 2px solid var(--Menu-light-selectedIndicator-color);

          .#{$ns}Nav-Menu-item-icon,
          .#{$ns}Nav-Menu-item-label,
          .#{$ns}Nav-Menu-submenu-arrow {
            color: var(--Menu-light-fontColor-onActive);
          }
        }
      }

      .#{$ns}Nav-Menu-submenu-arrow {
        color: var(--Menu-light-fontColor);
      }
    }
  }

  &-vertical,
  &-vertical-left,
  &-vertical-right,
  &-inline {
    & > .#{$ns}Nav-Menu-item,
    & > .#{$ns}Nav-Menu-submenu > .#{$ns}Nav-Menu-submenu-title {
      .#{$ns}Nav-Menu-rtl & {
        padding: 12px 24px 12px 8px;
      }
    }

    .#{$ns}Nav-Menu-submenu-arrow {
      display: inline-block;
      font-size: px2rem(9px);
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      position: absolute;
      right: var(--Menu-Submenu-item-paddingX);
      top: 0;
      line-height: var(--Menu-item-height--vertical);

      & > svg {
        top: auto;
      }

      .#{$ns}Nav-Menu-rtl &,
      .#{$ns}Nav-Menu-submenu-rtl & {
        right: auto;
        left: 16px;
      }
    }

    &.#{$ns}Nav-Menu-expand-before {
      .#{$ns}Nav-Menu-submenu-title {
        .#{$ns}Nav-Menu-item-wrap {
          padding-right: 0;
          padding-left: px2rem(16px);
        }
      }

      .#{$ns}Nav-Menu-submenu-arrow {
        right: auto;
      }
    }

    &.#{$ns}Nav-Menu-dark {
      .#{$ns}Nav-Menu-submenu-arrow {
        color: var(--Menu-dark-fontColor);
      }
    }

    &.#{$ns}Nav-Menu-light {
      .#{$ns}Nav-Menu-submenu-arrow {
        color: var(--Menu-light-fontColor);
      }
    }
  }

  &-vertical-right {
    .#{$ns}Nav-Menu-submenu-arrow {
      right: px2rem(10px);
    }
  }

  &-inline,
  &-horizontal {
    .#{$ns}Nav-Menu-submenu-arrow {
      cursor: pointer;
      transition: transform 0.3s;
      transform: rotate(90deg);
    }

    & .#{$ns}Nav-Menu-submenu-open > .#{$ns}Nav-Menu-submenu-title {
      .#{$ns}Nav-Menu-submenu-arrow {
        transform: rotate(270deg);
      }
    }
  }

  &-collapsed {
    .#{$ns}Nav-Menu-item {
      &-wrap {
        overflow: hidden;
      }
    }

    .#{$ns}Nav-Menu-submenu-arrow {
      display: none !important;
    }

    .#{$ns}Nav-Menu-item-group-title {
      display: none;
    }

    .#{$ns}Nav-Menu-item-group-list {
      .#{$ns}Nav-Menu-item-divider {
        height: 1px;
        width: 60%;
        margin: 0 auto;
      }
    }
  }

  &-submenu-vertical.#{$ns}Nav-Menu-submenu,
  &-submenu-vertical-left.#{$ns}Nav-Menu-submenu,
  &-submenu-vertical-right.#{$ns}Nav-Menu-submenu {
    padding: 0;

    .#{$ns}Nav-Menu-submenu-rtl & {
      direction: rtl;
    }

    &.#{$ns}Nav-Menu-submenu-selected {
      & > .#{$ns}Nav-Menu-submenu-title {
        color: var(--Menu-light-fontColor-onActive);
      }

      .#{$ns}Nav-Menu-item-icon,
      .#{$ns}Nav-Menu-item-label,
      .#{$ns}Nav-Menu-submenu-arrow {
        color: var(--Menu-light-fontColor-onActive);
      }
    }
  }

  &-sub.#{$ns}Nav-Menu-inline {
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;

    & > .#{$ns}Nav-Menu-item,
    & > .#{$ns}Nav-Menu-submenu > .#{$ns}Nav-Menu-submenu-title {
      padding-top: 0;
      padding-bottom: 0;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      .#{$ns}Nav-Menu-rtl & {
        padding-left: 0;
      }
    }

    &
      > .#{$ns}Nav-Menu-submenu.#{$ns}Nav-Menu-submenu-dark.#{$ns}Nav-Menu-submenu-selected
      > .#{$ns}Nav-Menu-submenu-title {
      color: var(--Menu-dark-ancestor-fontColor-onActive);

      .#{$ns}Nav-Menu-item-label,
      .#{$ns}Nav-Menu-item-icon,
      .#{$ns}Nav-Menu-submenu-arrow {
        color: var(--Menu-dark-ancestor-fontColor-onActive);
      }
    }
  }

  @mixin item-disabled {
    cursor: not-allowed;
    color: var(--Menu-fontColor-onDisabled) !important;
    // pointer-events: none;
  }

  .#{$ns}Nav-Menu-item-disabled,
  .#{$ns}Nav-Menu-submenu-disabled {
    @include item-disabled();

    &.#{$ns}Nav-Menu-item {
      @include item-disabled();

      .#{$ns}Nav-Menu-item-link {
        @include item-disabled();
      }
    }

    .#{$ns}Nav-Menu-submenu-title {
      @include item-disabled();
      & > .#{$ns}Nav-Menu-item-icon,
      & > .#{$ns}Nav-Menu-item-label,
      & > .#{$ns}Nav-Menu-submenu-arrow {
        @include item-disabled();
      }
    }

    .#{$ns}Nav-Menu-item-icon,
    .#{$ns}Nav-Menu-item-label,
    .#{$ns}Nav-Menu-submenu-arrow {
      @include item-disabled();
    }
  }

  @mixin effect {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    transform-origin: 0 0;
  }

  &-open {
    &-slide-up-enter,
    &-slide-up-appear {
      @include effect;
      opacity: 0;
      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
      animation-play-state: paused;
    }

    &-slide-up-leave {
      @include effect;
      opacity: 1;
      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
      animation-play-state: paused;
    }

    &-slide-up-enter &-slide-up-enter-active,
    &-slide-up-appear &-slide-up-appear-active {
      animation-name: rcMenuOpenSlideUpIn;
      animation-play-state: running;
    }

    &-slide-up-leave &-slide-up-leave-active {
      animation-name: rcMenuOpenSlideUpOut;
      animation-play-state: running;
    }

    @keyframes rcMenuOpenSlideUpIn {
      0% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(0);
      }
      100% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
      }
    }
    @keyframes rcMenuOpenSlideUpOut {
      0% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
      }
      100% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(0);
      }
    }

    &-zoom-enter,
    &-zoom-appear {
      opacity: 0;
      @include effect;
      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
      animation-play-state: paused;
    }

    &-zoom-leave {
      @include effect;
      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
      animation-play-state: paused;
    }

    &-zoom-enter &-zoom-enter-active,
    &-zoom-appear &-zoom-appear-active {
      animation-name: rcMenuOpenZoomIn;
      animation-play-state: running;
    }

    &-zoom-leave &-zoom-leave-active {
      animation-name: rcMenuOpenZoomOut;
      animation-play-state: running;
    }

    &-zoom-enter,
    &-zoom-appear,
    &-zoom-leave {
      .#{$ns}Nav-Menu-submenu-rtl &,
      .#{$ns}Nav-Menu-submenu-rtl & {
        transform-origin: top right !important;
      }
    }

    @keyframes rcMenuOpenZoomIn {
      0% {
        opacity: 0;
        transform: scale(0, 0);
      }
      100% {
        opacity: 1;
        transform: scale(1, 1);
      }
    }
    @keyframes rcMenuOpenZoomOut {
      0% {
        transform: scale(1, 1);
      }
      100% {
        opacity: 0;
        transform: scale(0, 0);
      }
    }
  }
}

.#{$ns}Nav-Menu-item-tooltip {
  font-size: var(--Layout-tooltip-fontSize);
  color: var(--Layout-light-fontColor);
  background: var(--Layout-light-backgroundColor);
  border: none;
  border-radius: var(--Tooltip--attr-borderRadius);
  box-shadow: 0px 4px 6px 0px rgb(8 14 26 / 6%),
    0px 1px 10px 0px rgb(8 14 26 / 5%), 0px 2px 4px -1px rgb(8 14 26 / 4%);

  .#{$ns}Tooltip-body {
    &,
    span {
      color: var(--Layout-light-fontColor);
    }
  }

  .#{$ns}Tooltip-arrow {
    &:after {
      left: px2rem(4px);
    }
    &:before {
      display: none;
    }
  }

  &.#{$ns}Nav-Menu-item-tooltip-dark {
    background: var(--Layout-dark-tooltip-backgroundColor);

    .#{$ns}Tooltip-body {
      &,
      span {
        color: var(--Layout-dark-fontColor);
      }
    }
  }
}