@use 'mixins/a11y';

.navigation--lg {
  :where(.menu__link, button.menu__toggle) {
    @apply  w-full
              lg:w-auto
            ps-4
            pe-4
              @lg/navigation:ps-0
              @lg/navigation:pe-0
            h-16
            inline-flex
            justify-between
            items-center
            px-1
            pt-1
            text-sm
            border-b-transparent
            text-zinc-500
              hover:text-zinc-700;

    @include a11y.focusOutlineAndResetHover;
  }

  .navigation__list > .menu__item--level-1 > :where(.menu__link, button.menu__toggle) {
    @apply @lg/navigation:border-b-4 @lg/navigation:hover:border-b-zinc-300
  }

  .menu__item {
    @apply relative;
  }

  .menu__link[aria-current="page"],
  .menu__item--active-trail > :is(.menu__link, .menu__toggle) {
    @apply border-l border-l-4 border-l-sky-500 @lg/navigation:border-l-0 @lg/navigation:border-b-sky-600 @lg/navigation:hover:border-b-sky-600;
  }

  .menu__item--level-1:has(.menu__link[aria-current="page"]) > .menu__toggle:not(.menu__toggle-sm),
  .menu__link[aria-current="page"] {
    @apply font-bold text-zinc-900;
  }

  .navigation__list {
    --menu-item-gap: 0;

    @apply
      divide-y
        @lg/navigation:divide-none
      absolute
        @lg/navigation:static
      border-y
      border-y-zinc-200
      top-12
      left-0
      bg-white
        @lg/navigation:bg-transparent
        @lg/navigation:border-y-0
      hidden
        @lg/navigation:flex
        @lg/navigation:justify-end
        @lg/navigation:[--menu-item-gap:theme(space.8)]
      w-full;
  }

  .navigation__toggle {
    @apply @lg/navigation:hidden w-12 h-12 flex place-items-center leading-none;

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

  .menu__item--has-children {
    @apply flex flex-wrap lg:block;
  }

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

  button.menu__toggle {
    @apply hidden @lg/navigation:flex order-2 flex-none;
  }

  .navigation__sub-menu {
    @apply
      hidden
      order-3
      w-full
        @lg/navigation:w-auto
        @lg/navigation:absolute
      bg-white
      border-t
      border-t-zinc-200
      divide-y
      divide-zinc-200
      bg-zinc-300
      bg-opacity-25
        @lg/navigation:bg-white
        @lg/navigation:bg-opacity-100
        @lg/navigation:shadow-lg;

    .menu__link {
      @apply min-w-[19ch] px-4 hover:bg-zinc-100;

      text-wrap: balance;
    }
  }

  .menu__toggle:is(.menu__toggle-sm) {
    @apply block @lg/navigation:hidden order-2 flex-none w-16 overflow-hidden relative border-b-0 border-l border-zinc-200;

    text-indent: -5000em;

    .material-symbols-sharp {
      @apply block absolute inset-0 h-full w-full;

      text-indent: 0;
      line-height: theme('width.16');
    }
  }

  &:where([data-behavior='hover']) {
    @media (hover: hover) {
      .menu__item:hover > .navigation__sub-menu {
        @apply block;
      }
    }

    .navigation__list .menu__item--level-2 a.menu__toggle-link {
      @apply inline-flex;
    }

    .menu__item--level-2 button.menu__toggle {
      @apply ml-4 hidden;
    }

    .menu__toggle.is-open ~ .navigation__sub-menu {
      @apply block @lg/navigation:hidden;

      button.menu__toggle {
        @apply ml-4;
      }
    }
  }

  &:where([data-behavior='toggle']) {
    .menu__item--parent {
      @apply hidden @lg/navigation:block;

      > .menu__link {
        @apply  bg-zinc-100 font-semibold text-zinc-900 w-full;
      }
    }

    .menu__toggle-link {
      @apply flex @lg/navigation:hidden;

      flex: 1 0 50%;
    }

    .menu__toggle.is-open ~ .navigation__sub-menu {
      @apply block;
    }

    .menu__item--level-2 button.menu__toggle:not(.menu__toggle-sm) {
      @apply hidden;
    }

    .menu__item--level-2 .menu__link.menu__toggle-link {
      @apply @lg/navigation:inline-flex;
    }
  }
}
