.megamenu-root {
  :where(.mega-menu__link, button.mega-menu__toggle) {
    @apply h-16 inline-flex items-center border-transparent border-b-4 px-1 pt-1 text-sm font-medium text-zinc-500 hover:border-zinc-300 hover:text-zinc-700;
  }

  .mega-menu__item {
    @apply relative;
  }

  .mega-menu__link[aria-current],
  .mega-menu__item--active-trail.mega-menu__item--has-children .mega-menu__toggle,
  .menu__item--active-trail:not(.mega-menu__item--parent) > .mega-menu__link {
    @apply border-sky-500 text-zinc-900 font-bold;
  }

  .mega-menu__item--active-trail.mega-menu__item--has-children .mega-menu__toggle,
  .mega-menu__item--parent > .mega-menu__link {
    @apply text-zinc-900 font-semibold;
  }

  .mega-menu__hamburger {
    @apply @lg:hidden w-12 h-12 flex place-items-center leading-none;

    .material-symbols-sharp {
      @apply w-full;
    }
  }


  .mega-menu__toggle {
    @apply order-1 flex-1;

    &:is([aria-expanded="true"]) {
        @apply border-sky-500 text-zinc-900 font-bold;
    }
  }

  button.mega-menu__toggle {
    @apply order-2 flex-none;
  }
}

.mega-menu__list {
    --menu-item-gap: 0;

    @apply text-sm flex-wrap gap-x-[var(--menu-item-gap,theme(space.8))];
    @apply divide-y lg:divide-none;
    @apply absolute lg:static top-12 left-0 bg-[var(--nav-list-bg-override)] bg-white lg:bg-transparent hidden @lg:flex @lg:justify-end @lg:[--menu-item-gap:theme(space.8)] w-full;


}