.navigation {
  height: $navigation-height;
}

.navigation.is-shy {
  height: $navigation-height * .75;
}

.navigation__inner {
  display: flex;
  overflow: visible;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.navigation__item {
  display: flex;
  height: 100%;
  align-items: center;
}

.navigation__link {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;

  border: 0;
  padding-left: $spacing-md;
  padding-right: $spacing-md;
  color: $black;

  &.is-active,
  &:hover {
    color: $white;
    background: $primary;
  }

}

.navigation__form {
  height: 100%;
}

.navigation__button {
  height: 100%;
}