.tooltip_balloon {
  position: absolute;
  z-index: 9999;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  font-size: 14px;
  background: #2f343a;
  color: #fff;
  box-shadow: var(--box-shadow);
  max-width: 360px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
  white-space: nowrap;
}

.tooltip_balloon.is_visible {
  opacity: 1;
  transform: translateY(0);
}

.tooltip_balloon::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.tooltip_balloon.position_top::after {
  left: var(--arrow-left, 50%);
  bottom: -16px;
  transform: translateX(-50%);
  border-top-color: #2f343a;
}
.tooltip_host {
  display: inline-block;
  position: relative;
}

.tooltip_host.is_disabled {
  cursor: not-allowed;
}

.tooltip_host.is_disabled > button[disabled] {
  pointer-events: none; /* BELANGRIJK: laat wrapper hover events ontvangen */
}