:root {
  --nav-side-padding: 12px;
}

nav ::after {
  clear: both;
}

nav a {
  text-decoration: none;
}

nav a[aria-disabled="true"] {
  opacity: 0.5;
}

nav ul a {
  color: var(--color-neutral-400);
  fill: currentcolor;
  font-size: 1.17em;
}

nav [aria-disabled="true"],
a:disabled {
  pointer-events: none;
}

nav a.active,
nav a:focus,
nav a:hover {
  background-color: var(--color-primary-800);
}

nav a.active {
  color: var(--color-neutral-100);
}

nav ul {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  margin-top: 0;
  margin-left: auto;
  margin-block: 0;
  margin-inline-end: 0;
  padding-inline: 0 var(--nav-side-padding);
}

nav ul.left {
  margin-left: 0;
  padding-inline-start: var(--nav-side-padding);
}

nav li {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
}