@import '../../../styles/vendor/bootstrap_foundation-sites';
@import '../../../styles/object/o-form-element';

.m-recipient-list {
  @include o-form-element;
  @include o-form-element--light;
  @include flex-grid-row($size: expand);

  min-height: $co-component__height;
  margin-bottom: 0;

  &__placeholder {
    display: inline-block;
    margin-right: $co-component__spacing;
    line-height: $co-component__height;
  }

  &__recipient {
    @include flex-grid-size(shrink);

    display: inline-block;
    margin-right: $co-component__spacing;
    margin-bottom: $co-component__spacing;
  }

  &__search {
    @include flex-grid-size;

    position: relative;
  }

  &__suggest {
    top: 100%;
    left: 0;
  }

  &__search-input {
    display: block;
    width: 100%;
    min-width: 6rem;
    border: 0;
    background: transparent;
    color: $co-color__fg__text;
    line-height: $co-component__height;
  }

  &__dropdown {
    // XXX: dirty fix when dropdown has no controller then getDropdownStyle() can not be used correctly
    margin-top: $co-component__height;
  }

  &__search-result {
    @include flex-grid-row;

    min-height: $co-component__height;
    padding-top: $co-component__spacing;
    padding-bottom: $co-component__spacing;
    line-height: $co-font__line-height;
    text-align: left; // within a button : force align left
  }

  &__search-result-title {
    @include flex-grid-size(12);

    font-weight: 600;
  }

  &__search-result-info {
    @include flex-grid-column(12);

    font-size: $co-font__size--small;
    font-style: italic;
  }
}
