
// @require ../chat.scss
// @require core/widget/widget.scss
// @require decorators/target/target.scss

/* CHAT */

.chat-message {

  @extend %widget;
  @include children-no-gutter ();
  display: flex;
  width: 100%;

  /* TARGET */

  &:target > .chat-message-content {
    @extend %target;
  }

  /* IMAGE */

  .chat-message-img {
    @extend %widget;
  }

  .chat-message-img,
  .chat-message-img img {
    @include dimension-force ( $chat-message-img-size );
    border-radius: if( $chat-message-img-rounded, $circular-border-radius, $chat-message-img-border-radius );
    overflow: hidden;
  }

  img.chat-message-img,
  .chat-message-img img {
    border-width: $chat-message-img-border-width;
    border-style: $chat-message-img-border-style;
    border-color: $chat-message-img-border-color;
    // Transitioning `filter`  in order to support `blurred`
    // Transitioning `box-shadow`  in order to support `raisable`
    transition: opacity $chat-message-animation-duration,
                filter $blurred-animation-duration,
                box-shadow $raisable-animation-duration;
  }

  a.chat-message-img:hover,
  .chat-message-img a:hover {

    img {
      opacity: $chat-message-img-hover-opacity;
    }

    .overlay + img {
      opacity: 1;
    }

  }

  /* CONTENT */

  .chat-message-content {
    flex: 1 1 0%; // IE-10/11 misinterprets a unitless 0
  }

}
