.c-nav {
  padding: 20px 0 60px;
}

.c-nav__list {
  padding: 0;
  list-style: none;
  margin: 0 auto;
}

.c-nav__item {
  @include mq($max: $header-large-bp) {
    & + & {
      margin-top: 40px;
    }
  }
}

.c-nav__link {
  color: palette(text, 300);
  text-decoration: none;

  // When header is in the light state
  .is-header-light &,
  .c-header--sticky & {
    color: palette(text);
  }

  .c-header--compact & {
    @include mq($max: 1080) {
      @include font-size(m-base);
    }
  }

}

.c-nav__link--fake {
  pointer-events: none;
}

.c-nav__icon {
  margin-left: 7px;

  .is-header-light &,
  .c-header--sticky & {
    color: palette(text, 300);
  }
}

.c-nav__icon--external {
  position: relative;
  top: -1px;
  margin-left: 10px;
  color: palette(text, 300) !important;

  svg {
    width: 14px;
  }
}

.c-nav__icon--right {
  position: relative;
  //top: -1px;

  svg {
    transform: rotate(270deg);
  }
}

.c-nav__actions {
  list-style: none;
  margin: 0;

  .c-button {
    @include mq(940, 1200) {
      @include font-size(x2-small);
    }
  }
}



/**
 * -----------------------------------------------------------------------------
 * Wider viewport gets a horizontal navigation with a dropdown menu when hovered
 * -----------------------------------------------------------------------------
 */
@include mq($header-large-bp) {
  .c-nav {
    @include flex(flex-start center);
    height: 100%;
    padding: 0; // reset
  }
  .c-nav__list {
    @include flex(center);
    height: 100%;
  }
  .c-nav__item {
    @include flex(center);
    height: 100%;
    flex: 1 0 auto;
    margin-top: 0;
    margin-right: 30px;

    .c-header--compact & {
      @include mq($max: 1080) {
        margin-right: 20px;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    &:last-child {
      margin-right: 0;
    }
  }
  .c-nav__link {
    @include flex(center);
    height: 100%;
    color: rgba(palette(light), 0.8);
    line-height: 24px;
  }
  .c-nav__actions {
    @include flex(center);
  }
}


/**
 * -----------------------------------------------------------------------------
 * Extra MQ for tweaking some spacing when enough room is available
 * -----------------------------------------------------------------------------
 */
@include mq(1200) {
  .c-nav__list {
    margin-left: 100px; // Limit margin value on fixed size
  }
  .c-nav__actions {
    margin-left: auto; // Push to the side
  }
}