.logged-in {
  .main-header {
    @apply
      top-[30px];
  }
}

.main-header {
  @apply
    fixed
    text-primary-500
    bg-white
    z-10
    top-0
    left-0
    right-0;

  .wrapper {
    @apply
      relative
      z-[9999]
      shadow-md

      lg:z-0
      lg:static;
  }

  .overlay-search {
    @apply
      pointer-events-none
      bg-white
      bg-opacity-80
      fixed
      z-[-2]
      h-full
      w-full
      inset-0
      transition-all
      duration-300
      transform-gpu
      opacity-0;

    &.active {
      @apply
        opacity-100
        pointer-events-auto;
    }
  }

  .brand {
    @apply
      text-2xl
      text-primary-500
      font-bold;

    svg {
      @apply
        w-auto
        h-7.5

        lg:h-15;
    }
  }

  .header {
    @apply
      flex
      flex-wrap
      justify-between
      items-center
      py-4.5

      lg:py-3;
  }

  .navbar {
    @apply
      hidden
      items-center
      absolute
      justify-center
      left-0
      w-full
      right-0
      text-lg

      lg:flex;

    ul {
      @apply
        flex;

      li {
        @apply
          relative
          py-4
          flex
          items-center
          opacity-100

          pr-10
          xl:pr-17
          last:pr-0

          hover:translate-y-0
          hover:transition-all
          hover:visible;

        a {
          @apply
            text-sm
            font-medium

            hover:opacity-50;

          &.active {
            @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-primary-800
            shadow-lg
            rounded-md
            right-0
            opacity-0
            flex
            flex-col
            absolute
            bg-white
            top-[100%]
            min-w-[270px]
            z-10
            invisible
            translate-y-[10px]
            transition-all;

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

            a {
              @apply
                block
                px-4
                py-2

                hover:text-white;
            }
          }
        }
      }
    }
  }

  .logo {
    @apply
      z-10;
  }

  .utils {
    @apply
      flex
      z-10
      justify-center
      items-center;

    .language-selector {
      @apply
        flex
        items-center
        text-lg
        lg:text-sm
        -mx-2;

      li {
        @apply
          px-2;
      }

      &.mobile {
        @apply
          flex
          lg:hidden;
      }

      &.desktop {
        @apply
          hidden
          lg:flex;
      }

      .wpml-ls-current-language {
        @apply
          text-primary-250;
      }
    }

    .logout {
      @extend .has-sm-font-size;
      @apply
        ml-8;
    }

    .search-icon {
      @apply
        flex
        justify-end
        mr-5
        lg:mr-0
        lg:ml-8;

      img {
        @apply
          h-4.5
          w-4.5;
      }
    }
  }
}
