nav {
  .search-wrapper {
    @apply hx-hidden md:hx-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] dark:!hx-bg-dark/80;
  }
}

.hamburger-menu svg {
  g {
    @apply hx-origin-center;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  }
  path {
    opacity: 1;
    transition:
      transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
      opacity 0.2s ease 0.2s;
  }

  &.open {
    path {
      transition:
        transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0s ease 0.2s;
    }
    g {
      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
    }
  }

  &.open > {
    path {
      @apply hx-opacity-0;
    }
    g:nth-of-type(1) {
      @apply hx-rotate-45;
      path {
        transform: translate3d(0, 4px, 0);
      }
    }
    g:nth-of-type(2) {
      @apply -hx-rotate-45;
      path {
        transform: translate3d(0, -4px, 0);
      }
    }
  }
}