hextra/assets/css/components/navbar.css

nav {
  .search-wrapper {
    @apply hx:hidden hx:md:inline-block;
  }
}

@supports (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .nav-container-blur {
    @apply hx:backdrop-blur-md hx:bg-white/[.85] hx:dark:bg-dark/80!;
  }
}

/* Hamburger Menu - Flattened Structure */
.hamburger-menu svg g {
  @apply hx:origin-center hx:transition-all hx:duration-100 hx:ease-out;
}

.hamburger-menu svg path {
  @apply hx:opacity-100 hx:transition-all hx:duration-100 hx:ease-out hx:delay-100;
}

.hamburger-menu svg.open path {
  @apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-0;
}

.hamburger-menu svg.open g {
  @apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-100;
}

.hamburger-menu svg.open > path {
  @apply hx:opacity-0;
}

.hamburger-menu svg.open > g:nth-of-type(1) {
  @apply hx:rotate-45;
}

.hamburger-menu svg.open > g:nth-of-type(1) path {
  @apply hx:translate-y-1;
}

.hamburger-menu svg.open > g:nth-of-type(2) {
  @apply hx:-rotate-45;
}

.hamburger-menu svg.open > g:nth-of-type(2) path {
  @apply hx:-translate-y-1;
}