$dropdown-height: 345px; // Allows for entire hero_simple text to display from $screen-md and up
$nav-icon-width: 60px;
$dropdown-spacer-height: 51px;

@mixin dropdown-content-style {
  display: inline-block;
  color: color('gray-300');
  font-family: $font-face-light;
  font-size: $font-size-large;
}

@mixin active-style($color) {
  @media (min-width: $grid-float-breakpoint) {
    box-shadow: inset 0 3px 0 0 $color;
  }
  @media (max-width: $grid-float-breakpoint-max) {
    box-shadow: inset 3px 0 0 0 $color;
  }
}

@mixin mobile-active-dropdown-bg($color) {
  color: color('white');
  background-color: $color;
  border-top-color: $color;
}

// Behavior
.nav .dropdown.open {
  & > .dropdown-menu-nav {
    opacity: 1;
    visibility: visible;
    @include transition(opacity 0.2s ease-in-out);

    @media (min-width: $grid-float-breakpoint) {
      height: $dropdown-height;
    }
  }
  &.dropdown-full_width {
    position: static;

    .dropdown-menu-nav {
      right: 0;
      left: 0;
    }
  }
  .dropdown-menu-nav {
    @media (max-width: $grid-float-breakpoint-max) {
      padding-bottom: 20px;
    }
  }
}

.dropdown {
  &:last-child {
    @media (max-width: $grid-float-breakpoint-max) {
      @include nav-border(bottom);
      border-color: color('gray-600');
    }
  }
}

// Override bootstrap default to show dropdowns at custom breakpoint
@media (max-width: $grid-float-breakpoint-max) {
  .navbar-nav .open .dropdown-menu {
    position: static;
  }
}

// Active State for 3 primary product side navs
.dropdown-toggle {
  &.dropdown-toggle-my_forever.active {
    @include active-style($color-primary);
  }
  &.dropdown-toggle-products.active {
    @include active-style($color-secondary);
  }
  &.dropdown-toggle-community.active {
    @include active-style($color-accent);
  }
}

.navbar-deals {
  //ugly cousin active state
  &.active {
    @include active-style($color-forever_orange);
  }

  @media (min-width: $grid-float-breakpoint) {
    color: $color-forever-orange !important;
  }
}

// Mega Menu Expanded Styles
.navbar .dropdown.open > .dropdown-toggle {
  color: color('gray-400');
  background-color: $nav-bg-color;

  @media (max-width: $grid-float-breakpoint-max) {
    &.dropdown-toggle-my_forever {
      @include mobile-active-dropdown-bg($color-primary);
    }
    &.dropdown-toggle-products {
      @include mobile-active-dropdown-bg($color-secondary);
    }
    &.dropdown-toggle-community {
      @include mobile-active-dropdown-bg($color-accent);
    }
    &.dropdown-toggle-account {
      @include mobile-active-dropdown-bg($color-forever_services);
    }
    &.dropdown-toggle-ambassador {
      @include mobile-active-dropdown-bg($color-forever_ambassador);
    }
    &.dropdown-toggle-help{
      @include mobile-active-dropdown-bg($color-primary);
    }
  }
}

.dropdown-menu-nav {
  display: block;
  opacity: 0;
  visibility: hidden;
  border: none;
  border-radius: 0;

  @media (max-width: $grid-float-breakpoint-max) {
    padding-left: 5px;
  }

  .dropdown-menu-nav-container {
    @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-min) {
      width: $grid-float-breakpoint;
    }
  }
}

.dropdown-menu-nav-spacer {
  margin-top: $dropdown-spacer-height;
}

.dropdown-menu-nav-extra_column {
  @media (max-width: $grid-float-breakpoint-max) {
    margin-top: -10px; // compensate for l-padded-thin
    padding-top: 0;
  }
}

a.dropdown-menu-nav-link {
  @include dropdown-content-style;

  &:not(.dropdown-menu-nav-link-no_margin) {
    margin-top: 8px;
  }
  &.dropdown-menu-nav-link-sm {
    @media (min-width: $grid-float-breakpoint) {
      font-size: $font-size-200;
    }
  }
  .fa {
    margin-right: 10px;
  }
}
.dropdown-menu-account-item {
  .dropdown-menu-nav-link {
    @media (max-width: $grid-float-breakpoint-max) {
      margin-top: $padding-small-vertical;
    }
  }
}

.dropdown-menu-nav-link-subhead {
  display: block;
  margin-top: -5px;
  color: $color-gray-500;
  font-size: $font-size-200;
}
.dropdown-menu-nav-bullets {
  @media (max-width: $grid-float-breakpoint-max) {
    margin-left: 10px;
  }
  a.dropdown-menu-nav-link {
    font-size: $font-size-200 !important;
  }
}
.dropdown-menu-nav-description {
  @include dropdown-content-style;

  @media (max-width: $grid-float-breakpoint-max) {
    font-size: $font-size-300;
  }
}
.dropdown-menu-nav-title {
  margin-top: 10px;
  font-size: $font-size-400;

  @media (min-width: $screen-md-min) {
    margin-top: 15px;
  }
  @media (min-width: $screen-lg) {
    font-size: $font-size-500;
  }
}