:host {
  /**
  * @prop --klevu-chat-bubble-background var(--klevu-color-neutral-2): Background color of the bubble
  * @prop --klevu-chat-bubble-background-remote var(--klevu-color-primary): Background color of the bubble when remote
  * @prop --klevu-chat-bubble-text-color inherit: Text color of the bubble
  * @prop --klevu-chat-bubble-text-color-remote var(--klevu-color-neutral-1): Text color of the bubble when remote
  */

  position: relative;
  --background: var(--klevu-chat-bubble-background, var(--klevu-color-neutral-2));
  --background-remote: var(--klevu-chat-bubble-background-remote, var(--klevu-color-primary));
  --text-color: var(--klevu-chat-bubble-text-color, inherit);
  --text-color-remote: var(--klevu-chat-bubble-text-color-remote, var(--klevu-color-neutral-1));
  --border-radius: var(--klevu-chat-bubble-border-radius, var(--klevu-border-radius-m) var(--klevu-border-radius-m) 0 var(--klevu-border-radius-m));
  --border-radius-remote: var(--klevu-chat-bubble-border-radius-remote, var(--klevu-border-radius-m) var(--klevu-border-radius-m) var(--klevu-border-radius-m) 0);
}

:host(::after) {
  content: "";
  clear: both;
}

klevu-typography {
  float: right;
  padding: var(--klevu-spacing-04);
  background-color: var(--background);
  border-radius: var(--border-radius);
  color: var(--text-color);
  --klevu-typography-color: var(--text-color);
  line-height: 1;
}

:host(.remote) klevu-typography {
  float: left;
  background-color: var(--background-remote);
  border-radius: var(--border-radius-remote);
  color: var(--text-color-remote);
  --klevu-typography-color: var(--text-color-remote);
}

.positive_feedback,
.negative_feedback {
  position: absolute;
  top: -12px;
  right: 12px;
  height: 24px;
  width: 24px;
  color: white;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.negative_feedback {
  background-color: var(--klevu-color-negative);
}

.positive_feedback {
  background-color: var(--klevu-color-positive);
}

.feedback_reasons {
  font-size: 12px;
  clear: both;
  display: flex;
  gap: var(--klevu-spacing-03);
  flex-wrap: wrap;
  padding: var(--klevu-spacing-04);
}