@import '../../../../styles/vendor/bootstrap_foundation-sites';

.m-contact-result-item {
  @include flex-grid-row($size: expanded);

  align-items: center;
  min-height: $co-component__height;
  padding-top: $co-component__spacing;
  padding-bottom: $co-component__spacing;
  background-color: $co-color__fg__back;
  font-size: $co-font__size--small;

  &:hover {
    background-color: $co-color__fg__back;
    color: $co-color__fg__text--lower;
  }

  &:active {
    background-color: $co-color__fg__back--low;
    color: $co-color__fg__text--low;
  }

  &__contact-avatar {
    @include flex-grid-column(shrink);
  }

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

    color: $co-color__primary--lower;
    font-size: $co-font__size;
    font-weight: 600;
  }

  &__col-highlights {
    @include flex-grid-column(shrink);
  }

  &__col-tags {
    @include flex-grid-column(shrink);
  }

  &__contact-title {
    margin-right: $co-component__spacing;
  }

  &__contact-prefix,
  &__contact-suffix {
    margin-right: $co-component__spacing;
    color: $co-color__fg__text--high;
  }
}
