.gui-navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.gui-navigation__item {
  display: inline-block;
  margin-right: $layout-spacing-base;
}

.gui-navigation__item > * {
  display: block;
  font-size: $typo-size-base;
  color: $neutral-dark;
  text-decoration: none;
  padding: $layout-spacing-base * 0.5 0;
  font-weight: $typo-weight-roman;

  [class*='--dark'] & {
    color: $neutral-light;
  }

  &:hover {
    text-decoration: none;
    color: $primary-blue;

    [class*='--dark'] & {
      color: white;
    }
  }
}

.gui-navigation__item--active > * {
  color: $primary-blue;

  [class*='--dark'] & {
    color: white;
  }
}

/* ==========================================================================
   Tabbed Modifier
   ========================================================================== */

.gui-navigation--tabs {
  border-bottom: 1px solid $neutral-light;
}

.gui-navigation--tabs .gui-navigation__item {
  bottom: -1px;
  position: relative;
  margin-right: 0;
}

.gui-navigation--tabs .gui-navigation__item > * {
  padding: $layout-spacing-base;
  color: $neutral-dark;

  &:hover {
    color: $primary-blue;
    text-decoration: none;
  }
}

.gui-navigation--tabs .gui-navigation__item--active {
  border-bottom: 2px solid $primary-blue;
}

.gui-navigation--tabs .gui-navigation__item--active > * {
  color: $primary-blue;
}