// ============================================================================
// :: Nav
// ============================================================================
/**
 * The main navigation of the brandplatform, simply containing a list to
 * navigate through the site. Used in bp-header component.
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-nav {
  position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-nav__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0;

  list-style-type: none;

  @include respond-at($bp-breakpoint-desktop-base) {
    flex-direction: row;
    align-items: center;
  }
}

.bp-nav__item {

  &:not(:last-child) {
    margin-bottom: 3.5rem;

    @include respond-at($bp-breakpoint-tablet-base) {
      margin-bottom: 5rem;
    }

    @include respond-at($bp-breakpoint-desktop-base) {
      margin-right: 7rem;
      margin-bottom: 0;
    }
  }
}

.bp-nav__link {
  display: block;

  font-weight: $bp-font-weight-bold;
  font-size: $bp-font-size-3x-large;
  line-height: $line-height-normalize;
  text-decoration: none;

  color: $bp-text-color-light;

  @include respond-at($bp-breakpoint-mobile-base) {
    font-size: 6vw;
  }

  @include respond-at($bp-breakpoint-tablet-base) {
    font-size: $bp-font-size-4x-large;
  }

  @include respond-at($bp-breakpoint-desktop-base) {
    font-size: $bp-font-size-base;

    color: $bp-text-color-dark;

    transition: color 0.15s ease-in-out;
  }

  &:hover {

    @include respond-at($bp-breakpoint-desktop-base) {
      color: $bp-primary-color;
    }
  }
}

// ============================================================================
// :: States
// ============================================================================
.bp-nav__item {

  &.is-active {

    .bp-nav__link {
      color: $bp-primary-color;
    }
  }
}