.ads-SpeechBubble {
  --ads-speech-bubble-bg: theme("colors.gray.200");

  @apply rounded
    p-2
    text-gray-700
    text-h5
    relative;

  background-color: var(--ads-speech-bubble-bg);
}

.ads-SpeechBubble::after {
  @apply absolute;

  content: "";
  height: 0;
  width: 0;
}

.ads-SpeechBubble[data-placement*="top"]::after {
  border-bottom: 8px solid var(--ads-speech-bubble-bg);
  top: -8px;
}

.ads-SpeechBubble[data-placement*="bottom"]::after {
  border-top: 8px solid var(--ads-speech-bubble-bg);
  bottom: -8px;
}

.ads-SpeechBubble[data-placement="top-start"]::after,
.ads-SpeechBubble[data-placement="bottom-start"]::after {
  border-right: 12px solid transparent;
  left: 8px;
}

.ads-SpeechBubble[data-placement="top-end"]::after,
.ads-SpeechBubble[data-placement="bottom-end"]::after {
  border-left: 12px solid transparent;
  right: 8px;
}