:host {
  --background-color: var(--l-tooltip-background-color);
  --border-radius: 4px;
  --max-width: 180px;
  --arrow-size: 6px;
  --show-duration: 150ms;
  --hide-duration: 150ms;

  display: contents;
}

[popover] {
  inset: unset;
  overflow: visible;
  box-sizing: border-box;
  width: max-content;
  max-width: var(--max-width);
  padding: 4px 8px;
  border: 0;
  border-radius: var(--border-radius);
  background: var(--background-color);
  color: var(
    --text-color,
    oklch(from var(--background-color) calc(0.59 - 0.41 * sign(l - 0.5)) 0 0)
  );
  font-size: 0.8125rem;
  line-height: 1.4;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 16%));
  pointer-events: none;
}

@supports (color: contrast-color(red vs black, white)) {
  [popover] {
    color: var(--text-color, contrast-color(var(--background-color) vs #111827, #fff to AA));
  }
}

i {
  position: absolute;
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  background: var(--background-color);
  transform: rotate(45deg);
}