.nav {
  &.is-primary {
    background: linear-gradient(
      to right,
      $nomad-green-darker,
      $nomad-green-dark
    );
    height: 3.5rem;
    color: $primary-invert;
    padding-left: 20px;
    padding-right: 20px;

    .nav-item {
      color: rgba($primary-invert, 0.8);
      text-decoration: none;

      &:hover {
        color: $primary-invert;
      }

      &.is-active,
      &.active {
        color: $primary-invert;
        border-bottom-color: $primary-invert;
      }

      + .nav-item {
        position: relative;

        &::before {
          width: 1px;
          height: 1em;
          background: rgba($primary-invert, 0.5);
          content: " ";
          display: block;
          position: absolute;
          left: 0px;
          top: 1.25em;
        }
      }

      &.is-logo img {
        height: 26px;
        max-height: 26px;
      }
    }
  }

  &.is-secondary {
    background-color: $nomad-green-dark;
    padding: 1.25rem 20px 1.25rem 0;
    height: 4.5rem;
    font-weight: $weight-semibold;
    color: $primary-invert;

    .nav-item {
      font-size: $size-4;
    }
  }

  .nav-item {
    &.is-gutter {
      width: $gutter-width;
    }
  }
}