.header {
  &.section {
    @extend %p-relative;
    z-index: 999;
  }
  &.sticky {
    @extend %p-absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
  &__main {
    @extend %d-flex, %justify-between, %item-center;
    padding-block: 30px;

    @include breakpoint(max-xl) {
      padding-block: 20px;
    }
    &--wrapper {
      @extend %d-flex, %justify-between, %item-center, %flex-1;
      border-radius: 999px;
      border: 1.2px solid rgba($color-white, 0.14);
      padding: 11px 30px;

      @include breakpoint(max-xl) {
        padding: 5px 10px;
      }
    }
  }
  &__main-menu {
    @include breakpoint(max-lg) {
      display: none;
    }
    nav {
      &.circle {
        border-radius: 999px;
        background: rgba($color-white, 0.08);
        padding: 6px;
      }
      ul {
        line-height: 1;
        &:not(.sub-menu) {
          @extend %d-flex, %justify-between, %item-center;
          // gap: 30px;
        }

        li {
          @extend %p-relative;
          &.active {
            > a {
              background: $color-primary;
              color: $color-1;
            }
          }
          &:not(.active) {
            > a {
              &:hover {
                color: $color-primary;
              }
            }
          }
          a {
            border-radius: 999px;
            white-space: nowrap;
            color: $color-white;
            font-size: $fs-16;
            font-weight: 400;
            line-height: 3;
            padding-inline: 25px;

            @include breakpoint(max-xl) {
              line-height: 2.188;
              padding-inline: 15px;
            }

            @extend %d-flex, %justify-between, %item-center;
            gap: 5px;
            // &:has(i) {
            // }

            i {
              @include transition(inherit);
              transform-origin: center center;
              -ms-transform-origin: center center;
              -webkit-transform-origin: center center;
            }
          }

          .sub-menu {
            @extend %p-absolute;
            @include transform(scale(0));
            @include transition($transition);
            left: 0;
            top: calc(100%);
            border: 1px solid rgba($color-white, 0.1);
            border-radius: 2px;
            min-width: 200px;
            transform-origin: top left;
            -ms-transform-origin: top left;
            -webkit-transform-origin: top left;
            background-color: $color-1;

            li {
              @extend %p-relative;
              @include transition($transition);
              line-height: 1;
              background-color: $color-1;
              z-index: 1;

              &:first-of-type {
                border-top-left-radius: 2px;
                border-top-right-radius: 2px;
              }
              &:last-of-type {
                border-bottom-left-radius: 2px;
                border-bottom-right-radius: 2px;
              }
              &:not(:last-of-type) {
                border-bottom: 1px solid rgba($color-white, 0.1);
              }
              &::before {
                @extend %p-absolute;
                @include transition($transition);
                width: 0%;
                height: 1px;
                left: 0;
                bottom: -1px;
                background-color: rgba($color-primary, 0.5);
                z-index: -1;
              }

              a {
                @extend %d-block;
                padding: 12px 10px;
                line-height: 1;

                &:has(i) {
                  @extend %d-flex, %justify-between, %item-center;
                }
              }

              &:hover {
                &::before {
                  width: 100%;
                }
                > a {
                  margin-left: 10px;
                }
              }
            }

            .sub-menu {
              left: calc(100% + 5px);
              top: 0%;
            }

            &:hover {
              // border-color: rgba($color-primary, 0.3);
              > li {
                // border-color: rgba($color-primary, 0.3);
              }
            }
          }

          &:hover {
            > a {
              i {
                @include transform(rotate(180deg));
              }
            }
            > .sub-menu {
              @include transform(scale(1));
            }
          }
          // &:last-of-type {
          //   > .sub-menu:not(.sub-menu .sub-menu) {
          //     left: unset;
          //     right: 0;

          //     li {
          //       .sub-menu {
          //         left: unset;
          //         right: calc(100% + 5px);
          //       }
          //     }
          //   }
          // }
          &:last-of-type,
          &:nth-last-of-type(2),
          &:nth-last-of-type(3) {
            > .sub-menu:not(.sub-menu .sub-menu) {
              left: unset;
              right: 0;
              transform-origin: top right;

              li {
                .sub-menu {
                  left: unset;
                  right: calc(100% + 5px);
                  transform-origin: top right;
                }
              }
            }
          }
        }
      }
    }
  }
  &__menu-btns {
    .hamburger-menu {
      @extend %d-grid, %place-center, %shrink-0;
      width: 48px;
      height: 48px;
      font-size: 40px;
      border: none;
      border-radius: 5px;
      color: $color-primary;
      background-color: transparent;

      i,
      svg {
        color: inherit;
        font-size: inherit;
      }

      @include breakpoint(max-lg) {
        font-size: 30px;
      }
    }
  }
}
