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

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

  align-items: center;

  &__title {
    @include flex-grid-size(10);
    @include flex-grid-row;

    align-items: center;
    margin-left: map_get($co-margin_, 'xsmall');
    color: $co-color__fg__text--high;

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

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

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

    margin-right: map_get($co-margin_, 'xsmall');
  }

  &__contact {
    @include flex-grid-size(9);

    overflow: hidden;
  }

  &__tags {
    min-height: $co-font__size;
    white-space: nowrap;
  }

  &__info {
    @include flex-grid-column(12);

    order: 3;
    padding-top: map_get($co-margin_, 'xsmall');
    color: $co-color__fg__text--higher;
    text-align: right;
  }

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

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

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

  &__interactions-nb {
    font-weight: bold;
    text-decoration: underline;
  }

  @include breakpoint(medium) {
    &__title {
      @include flex-grid-column(6);
    }

    &__info {
      @include flex-grid-column(4);

      order: 0;
      padding-top: 0;
    }

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

      margin-left: map_get($co-margin_, 'xsmall');
    }
  }
}
