/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../custom.less';
@import './vars.less';

@nav-menu-prefix-cls: ~'@{css-prefix}nav-menu';

.@{nav-menu-prefix-cls} {
  .inject-NavMenu-vars();
  @import '../grid-system/index.less';

  background: var(--tv-NavMenu-bg-color);
  height: var(--tv-NavMenu-height);
  position: relative;
  padding: 0 var(--tv-NavMenu-padding);
  box-shadow: var(--tv-NavMenu-box-shadow);

  > .slot-logo {
    float: left;
    fill: var(--tv-NavMenu-slot-logo-icon-color);
    overflow: hidden;
    font-size: var(--tv-NavMenu-slot-logo-icon-size);
    padding: 0 48px 0 16px;
    line-height: var(--tv-NavMenu-height);
  }

  > .slot-toolbar {
    float: right;
  }

  .menu {
    float: left;
    height: var(--tv-NavMenu-height);
    line-height: var(--tv-NavMenu-height);
    overflow: hidden;

    > li {
      float: left;

      > span,
      > a {
        margin: 0 var(--tv-NavMenu-item-li-margin);
        font-size: var(--tv-NavMenu-item-font-size);
        text-align: center;
        color: var(--tv-NavMenu-item-text-color);
        cursor: pointer;
        display: block;
        height: var(--tv-NavMenu-height);
        line-height: var(--tv-NavMenu-height);
        box-sizing: border-box;

        &.active,
        &:hover {
          // 规范选中后，背景色修改
          color: var(--tv-NavMenu-item-text-color);
          text-decoration: none;
          font-weight: var(--tv-NavMenu-item-text-font-weight);
        }

        &.selected {
          position: relative;
          font-weight: var(--tv-NavMenu-item-text-font-weight);

          &:after {
            content: ' ';
            width: 100%;
            height: 2px;
            background: var(--tv-NavMenu-item-selected-underline-bg-color);
            border: 1px solid var(--tv-NavMenu-item-selected-underline-bg-color);
            border-radius: 0;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
  }

  > .more {
    padding: 0 12px;
    font-size: var(--tv-NavMenu-item-font-size);
    text-align: center;
    color: var(--tv-NavMenu-item-text-color);
    cursor: pointer;
    display: inline-block;
    height: var(--tv-NavMenu-height);
    line-height: var(--tv-NavMenu-height);

    &.active,
    &:hover {
      // 规范选中后，背景色修改
      color: var(--tv-NavMenu-item-text-color);
      text-decoration: none;
      font-weight: var(--tv-NavMenu-item-text-font-weight);
    }

    &.selected {
      position: relative;
      font-weight: var(--tv-NavMenu-item-text-font-weight);

      &:after {
        content: ' ';
        width: 100%;
        height: 2px;
        background: var(--tv-NavMenu-item-selected-underline-bg-color);
        border: 1px solid var(--tv-NavMenu-item-selected-underline-bg-color);
        border-radius: 0;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  > .popmenu {
    position: absolute;
    background: var(--tv-NavMenu-popmenu-bg-color);
    width: 100%;
    box-shadow: var(--tv-NavMenu-popmenu-box-shadow);
    max-height: calc(100vh - var(--tv-NavMenu-height));
    overflow-y: auto;
    left: 0;
    margin-top: 2px;
    border-bottom-left-radius: var(--tv-NavMenu-popmenu-box-radius);
    border-bottom-right-radius: var(--tv-NavMenu-popmenu-box-radius);

    > .more-menu {
      float: left;
      width: 160px;
      height: 100%;
      border-right: 1px solid var(--tv-NavMenu-popmenu-more-menu-border-color-right);
      box-sizing: border-box;

      > ul {
        list-style: none;

        > li {
          height: var(--tv-NavMenu-popmenu-more-item-height);
          line-height: var(--tv-NavMenu-popmenu-more-item-height);
          padding: 0 12px 0 24px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: var(--tv-NavMenu-popmenu-more-item-text-color);
          cursor: pointer;

          .more-icon {
            fill: var(--tv-NavMenu-popmenu-more-item-icon-color);
          }

          &.active,
          &.selected,
          &:hover {
            color: var(--tv-NavMenu-popmenu-more-item-hover-text-color);
            font-weight: 700;

            > a {
              color: var(--tv-NavMenu-popmenu-more-item-hover-text-color);
            }

            .more-icon {
              fill: var(--tv-NavMenu-popmenu-more-item-hover-icon-color);
            }
          }

          &.selected {
            position: relative;

            &:before {
              content: '';
              width: var(--tv-NavMenu-popmenu-more-item-before-width);
              height: 12px;
              background: #5167f1;
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
            }
          }

          > a {
            color: var(--tv-NavMenu-popmenu-more-item-text-color);
          }

          > span,
          > a {
            display: block;
            height: var(--tv-NavMenu-popmenu-more-item-height);
            line-height: var(--tv-NavMenu-popmenu-more-item-height);
            font-size: var(--tv-NavMenu-popmenu-more-menu-font-size);
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            &.showicon {
              width: calc(100% - 12px);
            }
          }

          > .more-icon {
            font-size: var(--tv-NavMenu-popmenu-more-menu-icon-size);
          }
        }
      }
    }

    > .sub-menu {
      float: left;
      width: calc(100% - 160px);
      padding-left: 14px;
      box-sizing: border-box;

      &.full-width {
        width: 100%;
        padding: 32px 82px;
      }

      > ul {
        list-style: none;
        overflow: hidden;

        .group {
          list-style: none;
          margin-left: 10px;

          > .@{nav-menu-prefix-cls}__sub-menu-title {
            padding-bottom: 0;
            color: var(--tv-NavMenu-popmenu-text-color);
            font-size: var(--tv-NavMenu-popmenu-node-title-font-size);
            font-weight: bold;
            word-break: break-all;
            height: var(--tv-NavMenu-popmenu-text-height);
            line-height: var(--tv-NavMenu-popmenu-text-height);
            display: flex;

            > a,
            > span {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              flex: 1;
            }

            > span.selected,
            > a.selected {
              color: var(--tv-NavMenu-popmenu-selected-text-color);
            }

            &:only-child {
              border-bottom: none;
            }
          }

          .sub-item {
            font-size: var(--tv-NavMenu-popmenu-node-item-font-size);
            height: var(--tv-NavMenu-popmenu-text-height);
            line-height: var(--tv-NavMenu-popmenu-text-height);
            margin-top: 4px;

            &.third-title {
              > a,
              > span {
                color: var(--tv-NavMenu-popmenu-text-color);
                font-weight: 700;
              }

              &:hover {
                background: unset;
              }
            }

            &:hover {
              color: var(--tv-NavMenu-popmenu-text-color);
              text-decoration: underline;
            }

            &.active,
            &:active {
              color: var(--tv-NavMenu-popmenu-text-color);
              background: var(--tv-NavMenu-popmenu-more-item-active-bg-color);
            }

            > span,
            > a {
              display: inline-block;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: var(--tv-NavMenu-popmenu-text-color-normal);
              word-break: break-all;
              text-decoration: none;
              font-size: var(--tv-NavMenu-popmenu-text-font-size);
              cursor: pointer;

              &.selected {
                color: var(--tv-NavMenu-popmenu-selected-text-color);
                position: relative;

                &:after {
                  content: '';
                  position: absolute;
                  left: 0;
                  bottom: 0;
                  width: 100%;
                  height: 1px;
                  background: var(--tv-NavMenu-item-selected-underline-bg-color);
                  z-index: 1;
                }
              }

              &:hover {
                color: var(--tv-NavMenu-popmenu-text-color);
              }

              &.active,
              &:active {
                color: var(--tv-NavMenu-popmenu-text-color);
              }
            }

            &.only-secondary-title {
              > span,
              > a {
                color: var(--tv-NavMenu-popmenu-text-color);
                font-size: var(--tv-NavMenu-popmenu-node-title-font-size);
              }
            }
          }

          &:has(.only-secondary-title) {
            .@{nav-menu-prefix-cls}__sub-menu-title-blank {
              display: none;
            }
          }
        }
      }
    }
  }

  > .single {
    width: auto;
    height: auto;
    padding: 0;

    > .sub-menu.full-width {
      padding: 0;

      > ul .group {
        margin: 0;

        .@{nav-menu-prefix-cls}__sub-menu-title {
          padding: 18px 35px 0 12px;

          &.@{nav-menu-prefix-cls}__sub-menu-title-blank {
            padding: 0 35px 0 12px;
          }
        }

        > .title {
          margin: 0;
          line-height: 40px;
          padding: 0 35px 0 12px;
        }

        > .sub-item {
          height: 40px;
          line-height: 40px;
          padding: 0 35px 0 12px;
          margin: 0;
        }
      }
    }
  }

  > .more-button {
    float: left;
    text-align: center;
    margin: 0 var(--tv-NavMenu-item-li-margin);
    height: var(--tv-NavMenu-height);
    line-height: var(--tv-NavMenu-height);
    overflow: hidden;
    fill: var(--tv-NavMenu-item-more-button-fill);
    font-size: var(--tv-NavMenu-item-font-size);

    &:hover {
      background: var(--tv-NavMenu-item-hover-bg-color);
    }

    &.float-right {
      float: right;
      margin-left: 10px;
    }
  }

  > .slot-mobile-menu {
    display: none;
  }

  @media (max-width: 768px) {
    > .more-button.mobile {
      display: none;
    }

    > .slot-mobile-menu {
      display: block;
    }

    > .menu {
      display: none;
    }

    > .popmenu {
      .sub-menu .full-width {
        padding: 0;
      }
    }
  }
}