/**
 * @date: 2024/1/24
 * @author: 小红
 * @fileName: nav
 * @Description:导航栏
 */

@use "util";

.nav {
  @keyframes nav-down {
    0% {
      opacity: 0;
      transform: translate3d(0, -50px, 0)
    }

    to {
      transform: translate3d(0, 0, 0);
      opacity: 1
    }
  }

  & {
    width: 100%;
    height: 60px;
    position: absolute;
    top: 0;
    user-select: none;
    padding: 0 38px;
    font-size: 1.15rem;
    animation: nav-down 1.2s;
    z-index: 90;
    transition: .5s;
    will-change: opacity, transform;
    @include util.flex-center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }


  @include util.useResponsive(util.$w-md) {
    padding: 0 16px;
  }

  &-title {
    transition: color .5s;
    color: var(--nav-font-color);

    .link {
      font-weight: 700;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, .15);
    }
  }

  &.style {
    position: fixed;
    z-index: 91;
    top: -60px;
    background-color: var(--nav-active-background-color);
    box-shadow: var(--nav-active-shadow);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
  }

  &.active {
    transition: .5s;
    transform: translate3d(0, 100%, 0);
  }

  &-do {
    @include util.flex-center;
    flex-direction: row;
    color: var(--nav-font-color);

    .link {
      display: block;
      position: relative;
      height: 60px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
      font-size: .85em;
      line-height: 60px;
      text-align: center;


      &::after {
        position: absolute;
        left: 0;
        right: 0;
        opacity: 0;
        bottom: 16px;
        content: "";
        height: 3px;
        transform: scaleX(.25);
        background: var(--theme);
        border-radius: 2px 2px 0 0;
        transition: opacity .5s, transform .5s;
      }

      &:hover {
        color: var(--nav-font-color);

        &::after {
          opacity: 1;
          transform: scaleX(1);
        }

        .fa-chevron-down {
          transform: rotate(180deg);
        }
      }

      i {
        font-size: 1em;
      }

    }

    //操作项
    .controls {
      @include util.flex-center;

      .bars {
        display: none;
      }

      @include util.useResponsive(util.$w-md) {
        .link {
          padding: 0 2px;
          font-size: 1em;

          .name {
            display: none;
          }
        }

        .bars {
          display: block;
          margin-left: 7px;
        }
      }
    }

    //菜单
    .menu {
      @include util.flex-center;

      @include util.useResponsive(util.$w-md) {
        display: none;
      }

      &-item {
        margin-left: 24px;

        .fa-chevron-down {
          transition: transform .3s;
        }

        &:hover .menu-children {
          visibility: visible;
          opacity: 1;
          transform: scaleY(1)
        }
      }

      //二级
      &-children {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        width: max-content;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        background-color: var(--nav-dropdown-background-color);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.3s ease-out, opacity .2s ease-out, visibility .1s ease-out;


        &--item {
          transition: background-color .3s;

          &:first-child {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px
          }

          &:last-child {
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px
          }

          &:hover {
            background-color: var(--theme);
          }
        }

        &--link {
          display: block;
          padding: 8px 18px;
          font-size: .9rem;
          color: var(--nav-dropdown-font-color);
          width: 100%;

          &:hover {
            color: var(--nav-dropdown-hover-font-color);
          }
        }
      }
    }
  }


  &:is(.style) {
    .nav-title, .nav-do {
      color: var(--nav-active-font-color);

      .link {
        text-shadow: none;

        &:hover {
          color: var(--nav-active-hover-font-color);
        }
      }
    }
  }
}
 
 
