@import '../variables';

.newEventPreview {
  font-weight: normal;
  margin: 24px 0;

  &Message {
    color: #db3737;
    font-weight: bold;
  }
}

.messageTypeBtnGroup {
  margin-top: 8px;
}

.chatPreview {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 0;
  margin: 10px 0;
  border: 1px solid #999;
  border-radius: 1px;
  height: calc(100% - #{$stickyBarHeight});
  overflow-y: scroll;
  background: white;
}

.chatPreviewMessage {
  display: flex;
  flex-direction: row;
  max-width: 60%;
  padding: 10px;
  margin-bottom: 10px;
}

.chatPreviewAvatar {
  flex-grow: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #999;
  color: white;
  font-size: 26px;
  text-align: center;
  line-height: 36px;
}

.chatPreviewText {
  max-width: 60%;
  border-radius: 15px;
  text-align: center;
  overflow-wrap: break-word;
  padding: 8px;
  border: 1px solid #ccc;

  &.card {
    min-width: 60%;
  }

  p {
    margin: 0;
  }
  img,
  audio,
  video {
    max-width: 100%;
  }
}

.chatPreviewMessage_System {
  text-align: center;
  color: #676767;
}

.chatPreviewMessage_Incoming {
  align-self: flex-end;
  .chatPreviewAvatar {
    order: 2;
    margin-left: 5px;
  }
  .chatPreviewText {
    order: 1;
    background: #333;
    border: 1px solid #333;
    color: white;
  }
}

.chatPreviewMessage_Outgoing {
  .chatPreviewAvatar {
    order: 1;
    margin-right: 5px;
  }
  .chatPreviewText {
    order: 2;
    background: white;
    color: black;
  }
}

.chatPreviewMessage_Current {
  .chatPreviewText {
    position: relative;
    background: #db3737;
    border: 1px solid #db3737;
    &:before {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 14px solid #db3737;
      left: 0;
      top: 50%;
      transform: translate(-160%, -50%);
    }

    &:after {
      position: absolute;
      content: '';
      width: 15px;
      height: 3px;
      left: 0;
      top: 50%;
      transform: translate(-240%, -50%);
      background: #db3737;
    }
  }
}

.amendForm {
  margin-top: 10px;
}

.amendFormPicker {
  margin: 10px 0;
  border: 1px solid #666;
  padding: 10px;
  border-radius: 1px;
}

.popover {
  padding: 10px 5px 5px 20px;
  margin-left: 5px;
}

.card {
  margin: 10px 0;
}

.selectedCard {
  box-shadow: 0 0 5px 5px forestgreen;
}

.filter {
  margin: 10px 0;
}

.selectInput {
  :global(.bp3-tag-input) &:global(.bp3-input-ghost) {
    width: 220px;
  }
}

.applyAllButton {
  display: inline-block;
}

.paramsForm {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #666;
  border-radius: 1px;
}
