@import '@/styles/common.less';
@import '@/styles/variables.less';

.base-message {
  width: 100%;
  .flex-row();
  align-items: flex-start;
  margin-top: 40px;
  padding: 0 32px;
  box-sizing: border-box;

  &.is-sender {
    flex-direction: row-reverse;
  }

  &__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }

  &__content-container {
    flex: 1;
    .flex-column();
    align-items: flex-start;
    margin: 0 16px;

    .is-sender & {
      align-items: flex-end;
    }
  }

  &__content {
    font-size: 28px;
    line-height: 40px;
    font-weight: 400;
    color: #1D2129;
    background: #D9D9D9;
    padding: 20px 24px;
    border-radius: 20px;
  }

  &__status {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: @blHighlightColor;
    margin-top: 8px;

    &.done {
      color: #8D8E99;
    }
  }
}