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

/* XXX: add a margin if message is on top of the list */
.m-message-list__load-more + .m-instant-message {
  margin-top: 1rem;
}

.m-instant-message {
  $baseName: &;
  @include flex-grid-row($size: expand);

  max-width: 44.5rem;
  margin-right: initial;
  margin-bottom: 1rem;
  margin-left: initial;

  &--from-user {
    flex-direction: row-reverse;
    margin-left: auto;

    #{$baseName}__info {
      background-color: #feffff;
    }

    #{$baseName}__content {
      background-color: #f0faff;
    }

    #{$baseName}__author {
      padding-right: 0.25rem;
      padding-left: 0.25rem;
    }
  }

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

  &__info {
    @include flex-grid-size;

    background-color: #c5e8f6;
    overflow: hidden;
  }

  &__content {
    @include flex-grid-size(12);

    padding: map_get($co-margin_, 'xsmall');
    background-color: #b7e2f4;
  }

  @include breakpoint(medium) {
    &__author {
      @include flex-grid-size(shrink);

      padding-right: 0.5rem;
      padding-left: 0;
    }

    &__info {
      @include flex-grid-size(6);

      flex-basis: 12.125rem;
      padding-bottom: 0.5rem;
    }

    &__content {
      @include flex-grid-size;

      padding: map_get($co-margin_, 'small');
    }
  }
}
