@import (reference) "avatars";
@import (reference) "colors";
@import (reference) "fonts";

.message.list-item {
  align-items: flex-start;
  .message__message { .content--small; }

  .time { .content--extra-small; }

  .list-item__extra {
    .content--extra-small;
    color: @color--gray;
  }

  .message__options {
    display: none;
    [class^="icon-"]:before, [class*=" icon-"]:before {
      font-size: 12px;
      margin: 3px;
    }
  }
}

.message.m--has-previous.list-item {
  padding-left: calc(@avatar-size-sm + 24px);
  border-top: none;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  .list-item__avatar { display: none; }
  .list-item__name { display: none; }
}

.message.m--has-next.list-item {
  border-bottom: none;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.message.message--mine.list-item {
  .message__options { display: block; }
}