<nav class="character-nav" :aria-label="label">
  <label for="nav-toggle">
    <icon icon="bars" webc:nokeep></icon>
  </label>
  <input type="checkbox" id="nav-toggle" />
  <template
    webc:nokeep
    @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
  })"
  ></template>
</nav>

<style>
  .character-nav {
    --nav-spacing: 1em;
    --nav-background-color: var(--clr-nav-background);
    --nav-border: var(--border-thin) solid var(--clr-box-border);

    position: sticky;
    top: 0;

    display: grid;
    justify-items: end;

    background-color: var(--nav-background-color);

    border-block-end: var(--nav-border);

    z-index: 2;

    @media (min-width: 35em) {
      --nav-spacing: 1.5em;
      --nav-background-color: transparent;
      --nav-border: none;
    }

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

    &:has(#nav-toggle:checked) {
      & .list {
        opacity: 1;
      }

      & .item {
        height: 100%;
      }
    }

    & label[for='nav-toggle'] {
      width: 1.5em;
      height: 1.5em;
      margin-block: 0.75em;
      margin-inline: 1em;

      &:hover {
        cursor: pointer;
      }

      @media (min-width: 35em) {
        display: none;
      }
    }

    & #nav-toggle {
      display: none;
    }

    & .list {
      --nav-items-position: absolute;
      --nav-items-orientation: column nowrap;

      position: var(--nav-items-position);
      top: 3em;

      display: flex;
      flex-flow: var(--nav-items-orientation);

      text-align: end;
      list-style: none;

      background-color: var(--clr-nav-background);

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

      z-index: 3;
      opacity: 0;
      transition: opacity 0.4s ease-in-out;

      @media (min-width: 35em) {
        --nav-items-position: static;
        --nav-items-orientation: row nowrap;
        align-items: start;
        gap: 1em;
        opacity: 1;
      }
    }

    & .item {
      overflow: hidden;
      height: 0;
      transition: height 0.4s ease-in-out;

      @media (min-width: 35em) {
        height: 100%;
      }
    }

    & .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);
      }
    }

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