/**
 * Docs: Navs
 */

body > nav {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 99;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  backdrop-filter: saturate(180%) blur(20px);
  background-color: var(--nav-background);
  box-shadow: 0px 1px 0 var(--nav-border);

  li a {
    border-radius: 0;
  }

  ul:first-of-type li {

    // Brand
    &:first-of-type {
      a {
        width: 3.5rem;
        height: 3.5rem;
        margin-left: -$spacing-gutter;
        padding: 0;
        background: var(--h1);
        color: var(--background);
      }
    }

    // Title
    &:nth-of-type(2) {
      display: none;
      margin-left: $spacing-gutter;
      color: var(--muted-text);

      @media (min-width: map-get($breakpoints, "lg")) {
        display: inline;
      }
    }
  }
}