$ambassador-name-max-width: 228px;
$ambassador-name-max-width-md: 100px;
$ambassador-name-max-width-lg: 140px;
$distance-to-close-ambassador-text-gap: -3px;

.dropdown-ambassador {
  .dropdown-toggle {
    padding-top: 0 !important; // overriding .navbar .nav.navbar-nav > li > a
  }
  .fa-chevron-down {
    @media (max-width: $grid-float-breakpoint-max) {
      top: $offcanvas-padding;
    }
  }
  .dropdown-ambassador-container {
    @media (max-width: $grid-float-breakpoint-max) {
      width: $offcanvas-width - $offcanvas-padding;
      padding-left: 15px;
    }
  }
  .dropdown-menu-nav {
    @media (max-width: $grid-float-breakpoint-max) {
      box-shadow: none;
    }
  }
  .btn.btn-ambassador.btn-lg {
    //preferring redunant button styling to redundant mobile markup for this one instance
    @media (max-width: $grid-float-breakpoint-max) {
      display: block;
      height: $btn-size;
      padding: $padding-default-vertical $btn-padding-default-horizontal;
      font-size: $font-size-300;
      line-height: 1.3;
    }
  }

  @media (max-width: $grid-float-breakpoint-max) {
    @include nav-border(bottom);
    border-color: color('gray-600');
  }
}
.dropdown-ambassador-text_container {
  display: inline-block;
}
.dropdown-ambassador-intro_text {
  margin-bottom: $distance-to-close-ambassador-text-gap * 2;
  color: inherit;
  font-family: $font-face-gotham;
  font-size: $font-size-xsmall !important; // override in web app .area-settings p
  font-weight: $font-weight-normal;
  text-transform: capitalize;

  @media (max-width: $grid-float-breakpoint-max) {
    margin-bottom: $distance-to-close-ambassador-text-gap;
  }

  @media (min-width: $grid-float-breakpoint) {
    text-align: center;
  }
}
.dropdown-ambassador-primary_text {
  max-width: $ambassador-name-max-width; // managing points at which ambassador name is ellipsized
  font-family: $font-face-gotham;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  @media (min-width: $grid-float-breakpoint) {
    max-width: $ambassador-name-max-width-md;
  }
  @media (min-width: $screen-md_to_lg) {
    max-width: $ambassador-name-max-width-lg;
  }
}
.dropdown-ambassador-edit_btn {
  display: block;

  @media (min-width: $grid-float-breakpoint) {
    margin-top: -30px;
  }
}
.dropdown-ambassador-basic_info {
  overflow: hidden;

  .dropdown-ambassador-name{
    margin-top: 2px;
    margin-bottom: 0;
    font-size: $font-size-500;
  }
  .dropdown-ambassador-rank {
    margin-bottom: 0;
  }
  .dropdown-ambassador-city {
    margin-top: -5px;
  }
}
.dropdown-ambassador-contact_btn {
  &:hover,
  &:active,
  &:focus {
    color: color('secondary')!important;
    text-decoration: underline!important;
  }
  .btn-action-icon {
    margin-right: 8px;
  }
}