.menu-mobile-brand {
  @apply bg-primary text-white pb-8;

  @screen lg {
    @apply hidden;
  }

  #mobile-menu-toggle {
    @apply underline underline-offset-4  flex gap-2 items-center;
    &[aria-expanded] {
      &::after {
        @apply block w-4 h-4;
        content: '';
        background-image: url('../resources/img/close_menu_icon.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
  }
  &__inner-elements {
    @apply flex justify-between items-center px-6 gap-12;
  }

  .website_logo {
    @apply shrink;
  }
  .tools-container {
    @apply flex w-fit gap-2;

    .search-button,
    .subscribe-button {
      @apply w-6 h-6 border-2 flex border-white rounded-full p-2 justify-center items-center shrink-0;
      box-sizing: content-box;
    }
  }
}
.secondary-menu-container {
  @apply w-full;
}

body:has(.menu-mobile-brand) {
  @screen lg {
    /* @apply hidden; */
  }
}

header.nav-open {
  .secondary-menu-container,
  .primary-menu-container,
  #primary-menu {
    @apply !block opacity-100;
  }
  .menus-wrapper {
    @apply bg-primary;
    min-height: calc(100vh - 100px);
    @screen lg {
      min-height: auto;
    }
  }

  #primary-menu {
    @apply w-full;

    ul {
      @apply mx-0;
    }
  }
}