sparkletown/sparkle

@import "scss/constants";

$counterparty-bottom-border-radius: 0 0 $spacing--xxl $spacing--xs;
$counterparty-text-border-radius: $spacing--xxl $spacing--xxl $spacing--xxl
  $spacing--xs;
$my-text-bottom-border-radius: 0 0 $spacing--xs $spacing--xxl;
$my-text-border-radius: $spacing--xxl $spacing--xxl $spacing--xs $spacing--xxl;

$replies-max-height: 200px;

$reply-icon-radius: 20px;

.ChatMessage {
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin-bottom: $spacing--lg;

  // @debt This content-visibility: auto line seems to do something that causes constant re-calculations and pins the GPU at high usage
  // content-visibility: auto;

  &:hover {
    .ChatMessage__reply-icon {
      opacity: 1;
    }
  }

  &--me {
    align-self: flex-end;
    align-items: flex-end;

    .ChatMessage__bulb {
      text-align: right;
      background-color: $accent--under;
      border-radius: $my-text-border-radius;
    }

    .ChatMessage__show-replies-button {
      align-self: flex-end;
    }

    .ChatMessage__replies-content {
      border-radius: $my-text-bottom-border-radius;
    }

    .ChatMessage__reply-icon {
      background-color: $primary--light;
      right: unset;
      left: $spacing--sm;

      &:hover {
        background-color: $primary--lightest;
      }
    }
  }

  &--question &__bulb {
    background-color: $dark-green;
  }

  &__bulb {
    margin-bottom: $spacing--sm;
    width: auto;
    border-radius: $counterparty-text-border-radius;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    background-color: $secondary;

    font-size: $font-size--md;
  }

  &__text-content {
    position: relative;
    display: flex;
    flex-flow: column;
    padding: $spacing--md $spacing--lg;
  }

  &__text {
    font-size: $font-size--md;

    // This direct element style is used with RenderMarkdown
    img {
      max-width: 100%;
    }

    // This direct element style is used with RenderMarkdown
    p {
      margin-bottom: 0;
    }
  }

  &__show-replies-button {
    margin-top: $spacing--sm;
    align-self: flex-start;
  }

  &__reply-icon {
    color: $accent--over;
    display: flex;
    opacity: 0;
    justify-content: center;
    align-items: center;
    // Overflow the userAvatar in the replies list
    z-index: z(chatmessage-reply-button);

    position: absolute;

    cursor: pointer;

    @include square-size($reply-icon-radius);

    right: $spacing--sm;

    bottom: calc(-#{$reply-icon-radius / 2});

    border-radius: $border-radius--max;
    background-color: var(--greyscale-lighter-10pp);
    transition: opacity 100ms $transition-function;
    border: none;

    &:hover {
      background-color: var(--greyscale-lighter-20pp);
    }

    &:focus {
      opacity: 1;
    }
  }

  &__replies-content {
    border-radius: $counterparty-bottom-border-radius;
    overflow: hidden;
    max-height: $replies-max-height;
  }
}