/**
 * 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-color);
  box-shadow: 0px 1px 0 var(--nav-border-color);

  a {
    border-radius: 0;
  }

  svg {
    vertical-align: text-bottom;
  }

  // Band & Title
  ul:first-of-type li {
    // Brand
    &:first-of-type {
      a {
        width: 3.5rem;
        height: 3.5rem;
        margin-left: calc(var(--spacing) * -1);
        padding: 0;
        background: var(--h1-color);
        color: var(--nav-logo-color);

        svg {
          height: 3.5rem;
        }
      }
    }

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

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