// Common to all message-items
layer-message-item-sent, layer-message-item-received {
  .layer-list-item {
    padding: 0px 4px 0px 30px;
    align-items: flex-end;
  }

  .layer-parsed-image {
    height: 200px;
  }

  .layer-message-item-content-outer {
    .layer-message-item-content {
      display: inline-block;
    }
  }
  layer-avatar:not(.layer-has-user),
  &:not(.layer-list-item-first) layer-avatar  {
    height: 0px;
    margin-right: 10px;
    & * {
      display: none;
    }
  }

  .layer-sender-info {
    display: none;
  }

  .layer-message-text-plain-after-text {
    margin-top: 6px;
  }

  layer-delete {
    opacity: 0;

  }
  &:hover layer-delete {
    cursor: pointer;
    opacity: 0.2;
    &:hover {
      opacity: 1;
    }
  }

  &.layer-message-preview {
    .layer-message-text, layer-message-image canvas, layer-message-video video {
      opacity: 0.5;
    }
    layer-message-status, layer-date {
      display: none;
    }
  }
}

// First message in group
layer-message-item-sent.layer-list-item-first, layer-message-item-received.layer-list-item-first {
  .layer-list-item {
    margin-top: 8px;
  }
  layer-avatar {
    margin-right: 10px;
    & * {
      display: block;
    }
  }

  .layer-sender-info {
    display: block;
    margin-top: 4px;
    margin-bottom: 5px;

    layer-message-status {
      .layer-text-fine-print();
    }

    layer-message-status:after {
      content: '-';
      margin-left: 5px;
    }
    layer-date {
      display: inline-block;
      margin-left: 5px;
      .layer-text-fine-print();
      font-weight: @fontweight-lighter;
    }

    .layer-sender-name {
      color: black;
      font-size: 1.0rem;
      display: inline-block;
      font-weight: bold;
      margin-right: 15px;
    }
  }


}