@import './token.less';

.@{ns}-NavMenu {
  background-color: var(--color-bg-2);
  li {
    list-style: none;
  }
  .rc-menu {
    border: none;
    box-shadow: none;
  }
  .rc-menu-vertical,
  .rc-menu-vertical-left,
  .rc-menu-vertical-right,
  .rc-menu-inline {
    padding: 0px;
  }

  .rc-menu-inline {
    .rc-menu-submenu-arrow-icon {
      display: flex;
      position: absolute;
      right: 16px;
      transform: rotate(0deg);
      transition: @nav-menu-duration-5;
      transform-origin: center;
    }
    .rc-menu-submenu-open {
      & > .rc-menu-submenu-title {
        .rc-menu-submenu-arrow-icon {
          display: flex;
          position: absolute;
          right: 16px;
          transform: rotate(-180deg);
          transition: @nav-menu-duration-5;
          transform-origin: center;
        }
      }
    }
    .rc-menu-item-group {
      // padding-left: 48px !important;
      .rc-menu-item-group-title {
        padding: @nav-menu-padding;
        border-bottom: none;
      }
      .rc-menu-item-group-list {
        .rc-menu-item {
          padding-left: 24px !important;
        }
      }
    }

    .rc-menu-item {
      padding: @nav-menu-padding;
      &.rc-menu-item-trigger {
        padding: 0;
      }
      .rc-meunitem-trigger {
        padding: @nav-menu-padding;
        display: flex;
        align-items: center;
        width: 100%;
      }
      display: flex;
      align-items: center;
      .rc-meunitem-icon {
        display: flex;
        margin-right: 10px;
      }
      .rc-menuitem-title {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .rc-menu-submenu {
      .rc-menu-sub {
        .rc-menu-item {
          padding: @nav-menu-padding;
        }
      }
      .rc-menu-submenu-title {
        display: flex;
        align-items: center;
        padding: @nav-menu-padding;
        .rc-menusubmenu-icon {
          display: flex;
          margin-right: 10px;
        }
        .rc-menusubmenu-title {
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .rc-menu-submenu-arrow {
          display: none;
        }
      }
      &:hover {
        color: @nav-menu-sel-color;
      }
    }
    .rc-menu-submenu-open {
      .rc-menu-submenu-title {
        .rc-menu-submenu-arrow {
          display: none;
        }
      }
    }

    .rc-menu-submenu-horizontal {
      .rc-menu-item {
        display: inline-flex;
      }
      .rc-menu-submenu-arrow-icon {
        display: flex;
        position: absolute;
        right: 4px !important;
        transform: rotate(0deg);
        transition: 0.3s;
        transform-origin: center;
      }
    }

    .rc-menu-item-active {
      cursor: pointer;
      background-color: @color-transparent;
      color: @nav-menu-sel-color;
    }
    .rc-menu-item-active,
    .rc-menu-submenu-active {
      .rc-menu-submenu-title {
        background-color: @color-transparent;
      }
      .rc-menu-submenu-title:hover {
        cursor: pointer;
        background-color: @color-transparent;
      }
    }

    .rc-menu-item-disabled {
      cursor: not-allowed;
    }
    .rc-menu-submenu-selected {
      background-color: @color-transparent;
      color: @nav-menu-sel-color;
      border-radius: @border-radius*2.5;
    }
    .rc-menu-item-selected {
      color: @nav-menu-sel-color;
      background-color: @nav-menu-sel-bg;

      border-radius: @border-radius*2.5;
    }
    .rc-menu-item.rc-menu-item-disabled,
    .rc-menu-submenu-title.rc-menu-item-disabled,
    .rc-menu-item.rc-menu-submenu-disabled,
    .rc-menu-submenu-title.rc-menu-submenu-disabled {
      color: @nav-menu-disabled-color !important;
    }
  }

  .rc-menu-vertical {
    .rc-menu-submenu-vertical {
      .rc-menu-submenu-title {
        display: flex;
        align-items: center;
        background-color: @color-transparent;
        padding: @nav-menu-vertical-padding;
        .rc-menusubmenu-icon {
          display: flex;
          margin-right: 10px;
        }
        .rc-menu-submenu-arrow-icon {
          display: flex;
          position: absolute;
          right: 16px;
          transform: rotate(0deg);
          transition: 0.3s;
          transform-origin: center;
        }
        .rc-menu-submenu-arrow {
          display: none;
        }
      }
      &:hover {
        cursor: pointer;
        color: @nav-menu-sel-color;
      }
    }
    .rc-menu-submenu-open {
      .rc-menu-submenu-title {
        .rc-menu-submenu-arrow-icon {
          display: flex;
          transform: rotate(-90deg);
          transition: 0.3s;
          transform-origin: center;
        }
      }
    }

    .rc-menu-item {
      background-color: @color-transparent;
      padding: @nav-menu-vertical-padding;
      display: flex;
      .rc-meunitem-icon {
        display: flex;
        align-items: center;
        margin-right: 10px;
      }
      .rc-menuitem-title {
        // background-color: @color-transparent;
      }
      &:hover {
        cursor: pointer;
        color: @nav-menu-sel-color;
      }
    }
    .rc-menu-item-selected,
    .rc-menu-submenu-selected {
      color: @nav-menu-sel-color;
      background-color: @nav-menu-sel-bg;
      border-radius: @border-radius*2.5;
    }
  }

  .rc-menu-horizontal {
    background-color: @nav-menu-horizontal-bg;
    .rc-menu-item {
      border: none;
      display: inline-flex;
      align-items: center;
      .rc-meunitem-icon {
        display: inline-flex;
        margin-right: @nav-menu-icon-gap;
      }
    }
    .rc-menu-submenu {
      border: none;
      .rc-menu-submenu-title {
        display: inline-flex;
        align-items: center;
        .rc-menusubmenu-icon {
          display: inline-flex;
          margin-right: @nav-menu-icon-gap;
        }
        .rc-menu-submenu-arrow-icon {
          display: flex;
          align-items: center;
          margin-left: @nav-menu-icon-gap;
        }
      }
    }
    .rc-menu-submenu-active {
      border: none;
      color: @nav-menu-sel-color;
      // background-color: @color-transparent;
      cursor: pointer;
      .rc-menu-submenu-title {
        background-color: @color-transparent;
      }
    }
    .rc-menu-submenu-open {
      color: @nav-menu-sel-color;
      // background-color: @nav-menu-sel-bg;
    }
    .rc-menu-submenu-selected,
    .rc-menu-item-selected {
      color: @nav-menu-sel-color;
      position: relative;
      // background-color: @nav-menu-sel-bg;
      // border-top: 3px solid ;
      // border-radius: @border-radius*2.5;
      .rc-menuitem-title {
        background-color: @color-transparent;
      }
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: @nav-menu-sel-border;
      }
      &.rc-menu-item-active {
        background-color: @nav-menu-sel-bg;
      }
      &.rc-menu-submenu-active {
        background-color: @nav-menu-sel-bg;
      }
    }
    .rc-menu-item-active {
      border: none;
      color: @nav-menu-sel-color;
      // background-color: @color-transparent;
      cursor: pointer;
    }
  }

  .rc-menu-item-selected,
  .rc-menu-submenu-selected {
    background-color: @nav-menu-sel-bg;
  }
}

.rc-menu-submenu-popup {
  li {
    list-style: none;
  }
  .rc-menu-item-group {
    padding-left: 24px !important;
    .rc-menu-item-group-title {
      padding-left: 0;

      border-bottom: none;
    }
    .rc-menu-item-group-list {
      .rc-menu-item {
        padding-left: 24px !important;
      }
    }
  }

  .rc-menu-vertical {
    .rc-menu-item-group {
      .rc-menu-item-group-title {
        padding-top: 0px;
        padding-bottom: 0px;
      }
    }
    .rc-menu-submenu-title {
      display: flex;
      align-items: center;
      background-color: @color-transparent;
      .rc-menusubmenu-icon {
        display: flex;
        margin-right: 10px;
      }
      .rc-menu-submenu-arrow-icon {
        display: flex;
        position: absolute;
        right: 16px;
        transform: rotate(0deg);
        transition: 0.3s;
        transform-origin: center;
      }
      .rc-menu-submenu-arrow {
        display: none;
      }
      &:hover {
        cursor: pointer;
        color: @nav-menu-sel-color;
      }
    }
    .rc-menu-submenu-open {
      .rc-menu-submenu-title {
        .rc-menu-submenu-arrow-icon {
          display: flex;
          transform: rotate(-90deg);
          transition: 0.3s;
          transform-origin: center;
        }
      }
    }

    .rc-menu-item {
      background-color: @color-transparent;
      display: flex;
      align-items: center;
      padding: @nav-menu-vertical-padding;
      .rc-meunitem-icon {
        display: flex;
        margin-right: @nav-menu-icon-gap;
      }
      &:hover {
        cursor: pointer;
        color: @nav-menu-sel-color;
      }
    }
    .rc-menu-item-selected {
      background-color: @color-transparent;
      color: @nav-menu-sel-color;
      background-color: @nav-menu-sel-bg;
      border-radius: @border-radius*2.5;
    }
    .rc-menu-item-disabled {
      color: @nav-menu-disabled-color !important;
      &:hover {
        cursor: not-allowed;
      }
    }
  }
  .rc-menu-submenu-vertical {
    .rc-menu-submenu-title {
      padding: @nav-menu-vertical-padding !important;
    }
  }
  .rc-menu-submenu-selected {
    background-color: @color-transparent;
    color: @nav-menu-sel-color;
    background-color: @nav-menu-sel-bg;
    border-radius: @border-radius*2.5;
  }
  .rc-menu-item-disabled {
    color: @nav-menu-disabled-color !important;
    &:hover {
      cursor: not-allowed;
    }
  }
}

.rc-menu {
  color: @nav-menu-color;
}