@use 'mixins/a11y';

.navigation {
  --nav-item-unpublished-tint: theme('colors.amber.300');
  --nav-item-unpublished-bg: theme('colors.amber.50');
}

.navigation__list {
  @apply text-sm flex-wrap gap-x-[var(--menu-item-gap,theme(space.8))] antialiased;
}

.menu__toggle {
  @apply inline-flex items-center;

  .material-symbols-sharp {
    @apply motion-safe:transition-transform pointer-events-none;
  }

  &.is-open .material-symbols-sharp {
    @apply transform rotate-180;
  }
}

.menu__item {
  @apply relative;

  .menu {
    @apply lg:absolute;
  }
}

.menu__link {
  @include a11y.focusOutlineAndResetHover;
}

.menu[data-behavior='toggle'] {
  .region--content-prefix &,
  .region--content-suffix & {
    .navigation__list .menu__item--level-1 > a.menu__toggle-link {
      @apply flex;
    }
  }
}

.navigation__toggle {
  @apply appearance-none p-0;

  span {
    @apply touch-none pointer-events-none;
  }

  &[aria-expanded='false'] [data-action='close'] {
    @apply hidden;
  }

  &[aria-expanded='true'] [data-action='open'] {
    @apply hidden;
  }

  &[aria-expanded='true'] + .navigation__list {
    display: var(--toggled-display-override, block);
  }
}
