.ads-SpeechBubble {
  @apply bg-gray-200
    rounded
    p-2
    text-gray-700
    text-h5
    relative;
}

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

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

.ads-SpeechBubble[data-placement*="top"]::after {
  border-bottom: 8px solid theme("colors.gray.200");
  top: -8px;
}

.ads-SpeechBubble[data-placement*="bottom"]::after {
  border-top: 8px solid theme("colors.gray.200");
  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;
}