@import "biovision/base/default";
@import "comunit/base/default";

.follow-user-buttons {
  margin: 0.8rem;
  text-align: center;
}

.list-of-entities {
  .follow-options {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
  }

  .follow-user-buttons {
    text-align: left;
  }
}

.list-of-messages {
  margin: 0;
  padding: 0;

  li {
    display: flex;
    list-style: none;
    margin: 0 0 1.6rem 0;
    padding: 0;

    > div {
      display: flex;
      max-width: calc(50ch + 10rem);
      border-radius: 0.8rem;
      padding: 0.8rem;
      box-sizing: border-box;
      flex-wrap: wrap;
    }

    .heading {
      font-size: $font-size-decreased;
      margin-bottom: 0.8rem;
      width: 100%;
    }

    .image {
      flex-basis: 6.4rem;
      height: 6.4rem;
      text-align: center;

      img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    .message {
      background: rgba(255, 255, 255, .75);
      padding: 0.4rem;
      display: flex;
      flex: 1;

      p {
        &:first-of-type {
          margin-top: 0;
        }

        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }

    &.received {
      > div {
        background: #e7e7f5;

        .message {
          margin: 0 0 0 0.8rem;
        }
      }
    }

    &.sent {
      justify-content: flex-end;
      justify-self: flex-end;

      > div {
        background: #d7f5d7;
      }

      .heading {
        text-align: right;
      }

      .message {
        justify-content: flex-end;
        margin: 0 0.8rem 0 0;
        order: 1;

        textarea {
          font: $font-size-normal $font-family-main;
        }
      }

      .image {
        order: 2;
      }
    }
  }
}