.main-header {
  @apply
    w-full;

  z-index: 99;

  &.active {
    @apply
      h-full;
  }

  &.transparent-bg {
    @apply
      bg-transparent
      absolute
      top-0
      left-0
      right-0;
  }

  &.transparent-bg-fixed {
    @apply
      fixed;
  }

  .items-right {
    @apply
      flex;
  }

  .header-3 {
    .navbar {
      @apply
        relative
        left-0;

      transform: inherit;
    }
  }

  .header-container {
    padding: 18px 1rem;
  }

  .navbar-right div ul {
    @apply
      hidden;

    @screen lg {
      @apply
        flex-wrap
        justify-end
        flex;
    }
  }

  .items-left {
    z-index: 9999;

    .brand {
      @apply
        inline-block
        text-2xl
        top-0
        left-0
        font-bold;

      .logo-invert {
        transition: all 0.4s ease-in-out;

        &.active {
          @apply
            opacity-100;
        }
      }

      .logo {
        &.active {
          opacity: 0;
        }
      }

      img {
        @apply
          py-2
          top-0
          w-auto;

        max-width: 150px;

        @screen lg {
          max-width: 100%;
          max-height: 50px;
        }
      }

      svg {
        @apply h-20 top-0 w-auto;
      }
    }
  }

  .search-icon {
    @apply
      flex
      items-center
      p-0
      mr-2
      ml-8;

    z-index: 9999;

    svg {
      @apply
        h-5
        w-5;
    }
  }

  div.navbar-right ul li {
    @apply
      ml-4
      justify-center
      px-4;

    padding-top: 10px;
    min-width: 100px;
    padding-bottom: 10px;
  }

  .navbar {
    @apply
      absolute;

    left: 50%;
    transform: translateX(-50%);

    #menu-menu-header {
      @apply
        pl-0;

      li {
        &:first-child {
          @apply
            ml-0;
        }
      }
    }
  }

  .navbar,
  .navbar-right {
    @apply
      hidden
      items-center
      text-lg;

    z-index: 9989;

    @screen md {
      @apply
        flex;
    }

    ul {
      @apply
        flex;

      li {
        @apply
          relative
          flex
          justify-center
          items-center
          ml-8;

        a {
          @apply
            text-base
            text-white;

          &:hover {
            @apply
              opacity-50;
          }
        }

        &.menu-item-has-children {
          &::after {
            @apply
              relative
              ml-2
              border-t-4
              border-l-4
              border-r-4
              border-transparent;

            border-top-color: white;
            content: "";
          }
        }

        ul {
          @apply
            text-gray-800
            opacity-0
            flex
            py-2
            flex-col
            absolute
            bg-white;

          top: 100%;
          left: -1rem;
          min-width: 270px;
          z-index: 10;
          visibility: hidden;
          transform: translateY(10px);
          transition: all 0.15s ease;

          li {
            @apply
              block
              p-0
              m-0;

            // &:not(:last-child) {
            //   a {
            //     @apply
            //       border-b
            //       border-gray-500;
            //   }
            // }

            a {
              @apply
                block
                mx-4
                py-1;
            }
          }
        }

        &:hover {
          ul {
            @apply
              opacity-100;

            transform: translateY(0);
            transition-duration: 0.25s;
            visibility: visible;
          }
        }
      }
    }
  }
}

li {
  &.with-icon {
    &.menu-item {
      a {
        @apply
          flex
          items-center
          flex-row-reverse;
      }

      img {
        @apply
          pr-4;

        max-width: 60px;
      }
    }
  }
}

.header-2 {
  @apply
    relative;

  .wrapper {
    @apply
      justify-end;

    @screen md {
      @apply
        justify-between;
    }
  }

  .items-right,
  .navbar {
    @apply
      w-auto;
  }

  .navbar {
    @apply
      relative
      left-0;

    transform: none;

    ul {
      li {
        &:first-child {
          @apply
            ml-0;
        }
      }
    }
  }

  .items-right {
    @apply
      flex-wrap
      justify-end;
  }

  #menu-header {
    @apply
      flex-wrap;

    li {
      @apply
        mr-8
        ml-0;
    }
  }

  .items-left {
    @apply
      absolute;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .brand {
      img {
        @apply
          w-auto;

        max-width: 100px;

        @screen lg {
          max-width: 100%;
          max-height: 80px;
        }
      }
    }
  }
}

.menu {
  @apply
    inline-block;
}

.main-header.scroll-hide {
  transition: transform 0.3s ease-in-out;
}

.main-header.scroll-hide.visible {
  transform: translateY(0);
}

.main-header.scroll-hide:not(.visible) {
  transform: translateY(-100%);
}
