.menu-mobile-brand {
  @apply py-4 
  px-3
	lg:hidden
  xl:px-8 
  relative
   flex
   flex-wrap 
   items-center
   justify-between
   shadowed
	 lg:justify-center
   xl:container
   xl:mx-auto;
  .website_logo {
    max-width: 140px;
  }
  &__interaction_toggles {
    @apply order-2 lg:order-3 flex items-center justify-start gap-2 md:gap-4 xl:ml-auto;
  }

  &__mobile-menu-toggle {
    @apply lg:hidden flex items-center gap-4 px-4 md:px-8;
    .toggle-icon {
      /* transform: translate(0, 7px); */
      @apply w-6 h-4 relative opacity-80;
      &__bar {
        @apply bg-black w-full absolute;

        height: 3px;
      }
      &__bar--top {
        top: 0;
        transition: all 0.3s ease-in-out;
      }
      &__bar--middle {
        top: 50%;
        transform: translateY(-50%);
      }
      &__bar--bottom {
        bottom: 0;
        transition: all 0.3s ease-in-out;
      }
    }

    /* &:after {
      @apply block w-8 h-8;
      content: url('../resources/images/menu.svg');
    } */
  }
  &__mobile-menu-toggle[aria-expanded='true'] {
    .toggle-icon {
      @apply relative;
      &__bar--top {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
      }
      &__bar--middle {
        opacity: 0;
      }
      &__bar--bottom {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
      }
    }
  }

  &__search-module-toggle {
    @apply h-fit;
  }
}

header#main-header {
  @apply flex-col;
}

.menu-renovateur__interaction_toggles,
.menu-renovateur .website_logo {
  @apply hidden;
  @screen lg {
    display: revert;
  }
}

@media screen and (max-width: 960px) {
  .menu-renovateur:not([opened]) {
    @apply h-0 opacity-0;
    transition: all 0.3s ease-in-out;
  }
}
