/* navbar: the bar across the top of a page, with its links.

   <header class="navbar">
     <div class="navbar__inner">
       <a href="/">Logo</a>
       <nav class="navbar__links" aria-label="Primary">
         <a href="/work">Work</a>
         <a href="/about" aria-current="page">About</a>
       </nav>
     </div>
   </header>

   A product adds its own logo, and its own phone menu inside the header.

   Needs: reset.css, tokens.css */

.navbar {
  background-color: var(--navbar-color-background-default);
  border-block-end: var(--navbar-border-width-default) solid var(--navbar-color-border-default);
}

.navbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--navbar-spacing-nav-links-gap);
  padding: var(--navbar-spacing-padding-y) var(--navbar-spacing-padding-x);
}

.navbar__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--navbar-spacing-nav-links-gap);
}

.navbar__links a {
  display: inline-flex;
  align-items: center;
  color: var(--navbar-color-content-default);
}

.navbar__links a:hover {
  color: var(--navbar-color-content-hover);
}

.navbar__links a:focus-visible {
  color: var(--navbar-color-content-focus);
}

.navbar__links a[aria-current] {
  color: var(--navbar-color-content-active);
}

.navbar__links a[aria-disabled="true"] {
  color: var(--navbar-color-content-disabled);
}