// 00 helpers
@import '../00_helpers/__helpers';

.speech-bubble {
  @include font-style('body--m');
  hyphens: auto;
  min-height: $baseline * 4.7;
  padding: $spacing--xs 15px 12px 15px;
  position: relative;
  word-break: break-word;
  @include viewport--m {
    max-width: $baseline * 29;
  }
}

.speech-bubble--user {
  background-color: returnColorCSSVar('brand-primary');
  border-radius: 12px 12px 3px 12px;
  color: returnColorCSSVar('white');
}

.speech-bubble--bot {
  background-color: returnColorCSSVar('gray-10');
  border-radius: 3px 12px 12px 12px;
}

.speech-bubble__wrapper {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  padding-bottom: $spacing--xxs;
  padding-top: $spacing--xxs;
  position: relative;
}

.speech-bubble__avatar {
  left: 0;
  position: absolute;
}