$d-popover-background: var(--secondary);
$d-popover-border: var(--primary-medium);

.tippy-box {
  color: var(--primary);
  background: $d-popover-background;
  box-shadow: shadow("card");
  border: 1px solid $d-popover-border;
}

.tippy-box[data-placement^="top"] .tippy-svg-arrow > svg {
  top: 12px;
}
.tippy-box[data-placement^="bottom"] .tippy-svg-arrow > svg {
  top: -10px;
}
.tippy-rounded-arrow {
  fill: $d-popover-background;
  .svg-arrow {
    fill: $d-popover-border;
  }
  .svg-content {
    fill: $d-popover-background;
  }
}

[data-tooltip] > *,
[data-popover] > * {
  pointer-events: none;
}