sparkletown/sparkle

@import "scss/constants";

$replies-max-height: 200px;

.ChatMessageReplies {
  background-color: opaque-black(0.14);
  padding: 0 $spacing--lg $spacing--lg $spacing--lg;
  font-size: $font-size--md;
  display: flex;
  flex-flow: column-reverse;

  max-height: $replies-max-height;

  overflow: auto;

  align-items: flex-start;
  text-align: left;

  &__reply {
    // We add padding to single reply instead of margin so that the container has spacing at the top
    // https://stackoverflow.com/questions/13471910/no-padding-when-using-overflow-auto
    padding-top: $spacing--md;
  }

  &__loading {
    margin-top: $spacing--md;
  }
}