@layer components {
  /* Base
  /* -------------------------------------------------------------------------- */

  .nav {
    background-color: var(--color-canvas);
    border-block-end: var(--border);
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline: 0;
    padding-block-start: var(--custom-safe-inset-top);
    position: fixed;
    transition: background-color var(--duration) ease-in-out,
      border-color var(--duration) ease-in-out;
    z-index: var(--z-nav);
  }

  .nav__container {
    align-items: center;
    block-size: var(--nav-height);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    margin-inline: auto;
    max-inline-size: var(--main-width);
    padding-inline:
      calc(var(--main-padding) + var(--custom-safe-inset-left))
      calc(var(--main-padding) + var(--custom-safe-inset-right));
  }

  /* Elements
  /* -------------------------------------------------------------------------- */

  .nav__brand {
    color: var(--color-ink);
    font-size: var(--text-large);
    font-weight: 800;
    justify-self: start;
    letter-spacing: -0.025em;
    line-height: 1;

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-ink-muted);
      }
    }
  }

  .nav__menu {
    align-items: center;
    display: flex;
    gap: var(--inline-space-double);
    justify-self: end;
  }

  .nav__link {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    padding-block: 0.25em;

    &[aria-current] {
      color: var(--color-ink);
    }

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-ink);
      }
    }
  }

  /* The toggle is a plain circular button that swaps glyphs with the theme */
  .nav__theme-toggle {
    --btn-icon-size: 1.25em;
    --btn-size: 2.25em;

    .icon--moon { display: none; }

    html[data-theme="dark"] & {
      .icon--moon { display: inline-block; }
      .icon--sun { display: none; }
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        .icon--moon { display: inline-block; }
        .icon--sun { display: none; }
      }
    }
  }

  @media print {
    .nav { display: none; }
  }
}