/* Navigation */

nav a,
nav input[type=submit]
{
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}
nav form
{
  display: flex;
}

/* Bar-style navigation in header or footer */

nav.bar
{
  display: flex;
}
body > header nav.bar a,
body > header nav.bar input[type=submit]
{
  padding-top: var(--inset-top);
}
body > footer nav.bar a,
body > footer nav.bar input[type=submit]
{
  padding-bottom: var(--inset-bottom);
}
body > header nav.bar a.current
{
  background: var(--main);
  color: var(--control-primary);
}
body > footer nav.bar a.current
{
  background: var(--border);
  color: var(--inverse);
}
body > header nav.bar a[href]:hover,
body > header nav.bar input[type=submit]:hover
{
  background: var(--control-primary-hover);
  color: var(--inverse);
}
body > footer nav.bar a[href]:hover,
body > footer nav.bar input[type=submit]:hover
{
  background: var(--control-primary);
  color: var(--inverse);
}
body > header nav.bar a[href]:active,
body > header nav.bar input[type=submit]:active,
body > footer nav.bar a[href]:active,
body > footer nav.bar input[type=submit]:active
{
  background: var(--control-primary-active);
  color: var(--inverse);
}

/* Menu-style navigation. Works for a single items list and for items lists in a groups list */

nav.menu
{
  anchor-scope: --menu-anchor;
}
nav.menu > button
{
  anchor-name: --menu-anchor;
}
nav.menu a
{
  padding-left: 1rem;
  padding-right: 1rem;
}
body > header nav.menu > button:not(.icon)
{
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: inherit;
  line-height: inherit;
  background: inherit;
  border-radius: inherit;
}
body > header nav.menu > button:not(.icon):not(.bordered):not(:disabled):hover
{
  background: var(--control-primary-hover);
  color: var(--inverse);
}
body > header nav.menu > button:not(.icon):not(.bordered):not(:disabled):active
{
  background: var(--control-primary-active);
  color: var(--inverse);
}
nav.menu > div:not(:popover-open)
{
  display: none;
}
nav.menu > div:popover-open
{
  position-anchor: --menu-anchor;
  position: absolute;
  inset: anchor(bottom) auto auto anchor(left);
  padding: 0.5rem 0;
  border: none;
  background: none;
  overflow: visible;
}
nav.menu > div > ul
{
  margin: 0 0.5rem 0 calc(-0.25rem - 1px);
  background: var(--inverse);
  color: var(--control);
  border: 1px solid var(--control);
  border-radius: 0.375rem;
  box-shadow: 0 0 3rem var(--shadow);
  overflow: hidden;
}
nav.menu ul ul
{
  margin: 0
}
@media (max-width: 24rem)
{
  nav.menu li:first-child > a
  {
    padding-top: 0.75rem;
  }
  nav.menu li:last-child > a
  {
    padding-bottom: 0.75rem;
  }
  nav.menu li:has(ul) + li
  {
    border-top: 1px solid var(--control);
  }
}
@media not (max-width: 24rem)
{
  nav.menu ul:has(ul)
  {
    display: flex;
  }
  nav.menu li:first-child > a
  {
    padding-top: 0.75rem;
  }
  nav.menu:not(:has(ul ul)) li:last-child > a,
  nav.menu ul.longest li:last-child > a
  {
    padding-bottom: 0.75rem;
  }
}
nav.menu a[href]
{
  color: var(--control);
}
nav.menu a:not([href]),
nav.menu li.current a
{
  color: var(--text);
  font-weight: bold;
}
nav.menu a[href]:hover
{
  background: var(--control-hover);
  color: var(--inverse);
}
nav.menu a[href]:active
{
  background: var(--control-active);
  color: var(--inverse);
}