.confirmation-text-bubble {
  bottom: calc(100% + 0.5rem);
  left: 0;
  position: absolute;
  width: max-content;
}

  /* This requires a confirmation-text-bubble which it keeps an absolute position against */
.confirmation-text-bubble .dialog {
  position: relative;
  padding: .25rem;
  border-radius: .25rem;
  background: white;
  box-shadow: var(--float);
  border: 1px solid var(--color-6);
  font-size: 1rem;
  align-items: center;
  font-size: .85rem;
  text-align: left;
  width: max-content;
}

.confirmation-text-bubble .dialog::before {
  content: "";
  position: absolute;
  background-color: var(--color-6);
  width: 1.5ch;
  height: 1ch;
  clip-path: var(--triangle);
  top: 100%;
}

.confirmation-text-bubble .dialog::after {
  content: "";
  position: absolute;
  background-color: var(--compare-more);
  width: 1.5ch;
  height: 1ch;
  clip-path: var(--triangle);
  top: calc(100% - 1.5px);
}
.confirmation-text-bubble p {
  margin: 0 .25rem;
}

.confirmation-text-bubble svg {
  margin: .25rem !important;
  border-radius: .25rem;
}

.confirmation-text-bubble svg.confirm {
  stroke: var(--business);
}

.confirmation-text-bubble svg.cancel {
  stroke: var(--resident);
}

.confirmation-text-bubble svg.confirm:hover {
  stroke: white;
  background: var(--business);
}

.confirmation-text-bubble svg.cancel:hover {
  stroke: white;
  background: var(--resident);
}