@import 'assets/scss/fonts.scss';
@import 'assets/scss/colors.scss';

.textMessage {
  display: inline-block;
  overflow-wrap: break-word;
  max-width: 500px;
  word-break: break-word;
  white-space: pre-wrap;
  padding: 10px;
  margin-top: 5px;
  border-radius: 8px;
  @include font-base;
}

.activeStory {
  display: flex;
  align-items: center;
}

.expiredStory {
  font-style: italic;
}

.contactContent {
  @extend .textMessage;
  background: var(--color-background-blue);
  color: var(--color-text-contrast);
}

.linkContactContent:link,
.linkContactContent:hover,
.linkContactContent:visited,
.linkContactContent:active {
  color: var(--color-text-contrast);
  font-style: italic;
}

.iconContactContent {
  fill: var(--color-text-contrast);
}

.memberContent {
  @extend .textMessage;
  background: var(--color-airy-blue);
  color: white;
}

.linkMemberContent:link,
.linkMemberContent:hover,
.linkMemberContent:visited,
.linkMemberContent:active {
  color: white;
  font-style: italic;
}

.iconMemberContent {
  fill: white;
}
