<nav
  :aria-label="label"
  @html="eleventyNavigationToHtml(eleventyNavigation($data.collections[collection]), {
    listClass: 'list',
    listItemClass: 'item',
    listItemHasChildrenClass: 'hasChildren',
    activeListItemClass: 'item-active',

    anchorClass: 'link',
    activeAnchorClass: 'link-active',

    activeKey: $data.eleventyNavigation.key,

    showExcerpt: false
  })"
></nav>

<style>
  nav {
    --nav-spacing: 1em;
    display: flex;
    flex-flow: row nowrap;
    justify-content: end;
    font-size: 0.75em;

    @media (min-width: 30em) {
      --nav-spacing: 1.5em;
      font-size: 0.875em;
    }

    @media (min-width: 64em) {
      --nav-spacing: 2em;
      font-size: 1em;
    }

    & ul {
      flex: 0 0 0;
      display: flex;
      flex-flow: row nowrap;
      gap: var(--nav-spacing);

      width: fit-content;

      background-color: var(--clr-nav-background);
      list-style: none;

      margin: 0;
      border-inline-start: var(--border-thin) solid var(--clr-box-border);
      border-block-end: var(--border-thin) solid var(--clr-box-border);
      border-radius: 0 0.75em;
      padding-inline: var(--nav-spacing);
    }

    & .link {
      display: block;

      font-weight: 500;
      text-decoration: none;
      color: var(--clr-nav-link, inherit);

      padding-block: calc(var(--nav-spacing) / 2);

      transition: color 0.4s ease;

      &:hover {
        color: var(--clr-nav-link-hover, #888);
      }
    }

    & .link-active {
      color: var(--clr-nav-link-active, red);
    }
  }
</style>
