.navBar {
  background:$veryDarkBlue;
  padding:10px 35px;
  color:#fff;
  ul {
    display:flex;
  }
}

.navBar--secondary {
  background:lighten($veryDarkBlue, 44%);
  .navBar__link.is-active {
    color:$veryDarkBlue;
  }
}

.navBar--tertiary {
  background:#fff;
  border:1px solid lighten($subBlue, 30%);
  border-left:0;
  border-right:0;
  .navBar__link {
    color:$subBlue;
  }
  .navBar__link.is-active {
    color:$veryDarkBlue;
  }

}

.navBar__item:not(:last-child) {
  margin-right:35px;
}

.navBar__link.is-active {
  color:#8abdff;
  font-weight:600;
}

.navBar__item--end {
  margin-left:auto;
}

.navBar__link:hover {
  text-decoration:underline;
}

.navBar__itemCounter {
  background:$red;
  border-radius:4px;
  padding:2px 2px 1px 2px;
  line-height:1;
  font-size:10px;
  vertical-align:1px;
  font-weight:300;
  min-width:20px;
  display:inline-block;
  text-align:center;
  margin-left:5px;
  &.is-empty {
    background-color:$darkBlue;
  }
}