/*! Dropdown common styling */

.dropdown-header {
  font-weight: $font-weight-bold;
  border-top: 1px solid $gray-200;

  .dropdown-menu > li:first-child > & {
    border-top: 0 none;
  }
}


// Mega Dropdown
.flyout {

  .flyout-toggle {
    @include icon('icon', $icons, 'right-open');

    &:before {
      width: 1em;
      margin-right: .2em;
      text-align: center;
    }

  }
}

.menu-aim--delaying .menu-aim__item-name:hover {
  color: white;
  background-color: magenta;
}

.flyout-menu {

  @extend .dropdown-menu;
  left: 100%;
  top: -3px;
  min-width: 500px;
  font-size: $font-size-sm;

  :hover > &, :focus > &, .open > & {
    display: block;
  }

  &, & .flyout-narrow {
    min-width: 350px;
    @include media-breakpoint-up(lg) {
      min-width: 420px;
    }
  }

  & .flyout-wide {
    min-width: 420px;
    @include media-breakpoint-up(lg) {
      min-width: 560px;
    }
  }

  background-color: $primary;
  color: #fff;
}


.flyout-inner {
  padding: $spacer $spacer*2;
}


.flyout-header {
  font-size: $h3-font-size;
  margin-bottom: $spacer* .5;
  margin-top: $spacer* .5;
  margin-left: -$spacer;
  @media (min-width: map-get($grid-breakpoints, lg)) {
    margin-left: (-$font-size-base*2);
  }

  .backline {
    color: $primary;
    background-color: #fff;
    padding: $spacer*.5 $spacer $spacer*.5 $spacer*2;
  }
}


.flyout-row {
  @include make-row();
  margin-top: $spacer;
  margin-bottom: $spacer;
}


.flyout-fullcol, .flyout-col1, .flyout-col2 {
  //flex: 1 0 50%;
  @include make-col-ready();
  @include make-col();

}


.flyout-link {
  display: block;
  color: #fff;
  padding: 4px 0px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);

  .link-title {
    color: rgba(255, 255, 255, 0.9);
  }

  .link-text {
    font-size: 11px;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.7);
  }

  &:hover, &:focus {
    text-decoration: none;

    .link-title {
      color: rgba(255, 255, 255, 1);
    }

    .link-text {
      color: rgba(255, 255, 255, 1);
    }
  }
}


// custom menu
.flyout-inner {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url('../Images/mnu_nres.jpg');
  background-color: #37000d;

  //@media screen and (max-width: @grid-float-breakpoint) {
  //  padding: $grid-gutter-width;
  //}
}


.flyout-inner {
  @media screen and (max-width: map-get($grid-breakpoints, lg)) {
    padding: ($grid-gutter-width* .5) $grid-gutter-width;
    background-color: $gray-200;
  }
}
