// This `nav` tag is from the apollographql.com site. https://git.io/vAO3k
nav {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  position: relative !important;

  .nav-header {
    display: none;
  }
}

.panel {
  #sidebar-panel-nav {
    .nav-menu {
      display: block;
    }

    .nav-header {
      display: none;
    }
  }
}

.nav-group.left {
  .nav-item {
    display: inline-block;
    line-height: 3rem;
  }
}

.nav {
  .std-xpadding;
  .transform(translate3d(0, 0, 0));
  .position(relative, 0, 0, auto, 0, auto, 4rem);
  text-align: center;
  z-index: 3;

  &.dark {
    color: @color-darker;
    border-bottom: 1px solid @color-mediumlight;

    a {
      .link(@color-darker);
    }

    svg {
      fill: @color-darkest;
    }

    .nav-item {
      cursor: pointer;
      display: inline-block;
      line-height: 3rem;
      height: 3rem;
      vertical-align: top;
      position: relative;

      & + .nav-item {
        margin-left: .75rem;
        @media screen and (min-width: @breakpoint) {
          margin-left: 1.875rem;
        }
      }

      &.show-mobile + .nav-item {
        @media screen and (min-width: @breakpoint) {
          margin-left: 0;
        }
      }


      .link {
        .font-s2;
        line-height: 1;

        .type-semibold;
      }

      .btn {
        vertical-align: middle;
      }

      .icon-menu {
        .font-s3;
        line-height: 1;
        vertical-align: text-top;
      }
    }
  }

  &.light {
    color: @color-lightest;
    border-bottom: 1px solid rgba(255, 255, 255, .1);

    a {
      .link(@color-lightest);
    }

    svg {
      fill: @color-lightest;
    }
  }

  .nav-group {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    .std-xpadding;
    z-index: 1;

    .nav-item.mobile-button:first-child {
      padding-right: 0.75rem;
    }

    &.left {
      display: flex;
      left: 0;
    }

    &.right {
      right: 0;
    }

    .nav-item-logo {
      display: flex;

      a {
        display: flex;

        align-items: center;
        .logo {
          height: 24px;
          width: auto;

          margin-right: 10px;
        }

        .logo-subbrand {
          display: none;
        }
      }

    }
  }
}