body > main.site-main > section.site-nav {
  border-top: var(--border-width) solid hsl(var(--color-border));
  border-right: var(--border-width) solid hsl(var(--color-border));
  border-left: var(--border-width) solid hsl(var(--color-border));
  border-top-right-radius: var(--radius-md);
  border-top-left-radius: var(--radius-md);
  border-bottom: var(--border-width) solid hsl(var(--color-border));
  background-color: hsl(var(--color-surface));
  max-width: var(--body-max-width);
  margin: var(--margin-auto-center);
  position: sticky;
  top: calc(0em - var(--radius-sm));
  z-index: 10;
  &> nav.site-links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: var(--nav-spacing-8th) calc(var(--radius-md) * 1.5);
    max-width: calc(var(--body-max-width) - var(--spacing)) ;
    margin: var(--margin-auto-center);
    .current, .matched-namespace {
      outline-color: hsl(var(--color-border));
      outline-style: inset;
      outline-width: calc(var(--border-width) * 5);
      color: hsl(var(--color-link));
      &:hover, &:focus-visible {
        color: hsl(var(--color-link-hover));
      }
    }
    &> .left {
      width: max-content;
      justify-self: left;
      align-items: center;
    }
    &> .center {
      width: max-content;
      justify-self: center;
      align-items: center;
    }
    &> .right {
      width: max-content;
      justify-self: right;
      align-items: center;
    }
    .site-nav-icon {
      display: inline;
      vertical-align: text-bottom;
      &.current {
        fill: hsl(var(--color-link));
        stroke: hsl(var(--color-link));
        &:hover, &:focus-visible {
          fill: hsl(var(--color-link-hover));
          stroke: hsl(var(--color-link-hover));
        }
        path {
          fill: hsl(var(--color-link));
          stroke: hsl(var(--color-link));
          &:hover, &:focus-visible {
            fill: hsl(var(--color-link-hover));
            stroke: hsl(var(--color-link-hover));
          }
        }
      }
    }
  }
}