[data-tooltip] {
  --tooltip-background-color: hsl(0, 0%, 20%);
  --tooltip-text-color: white;
}

@media (prefers-color-scheme: dark) {
  [data-tooltip] {
    --tooltip-background-color: hsl(0, 0%, 80%);
    --tooltip-text-color: black;
  }
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  background-color: var(--tooltip-background-color);
  color: var(--tooltip-text-color);
  display: inline-block;
  position: absolute;
  padding: 1em 1.5em;
  border-radius: var(--button-border-radius);
  font-size: 0.8em;
  white-space: nowrap;
  box-shadow: 0 0 8px -4px black;
  font-family: sans-serif;

  top: var(--header-height);
  left: 50%;
  transform: translate(-50%, 0) scale(0);
  transform-origin: top center;

  transition: transform 0.15s;

  transition-delay: 0.1s;

  pointer-events: none; /* this prevents the tooltip from sticking around while you hover over the tooltip itself */
}

[data-tooltip]:hover::after {
  transition-delay: 1.2s;
  transform: translate(-50%, 0) scale(1);
}

[data-tooltip][data-tooltip-position='top-left']::after {
  left: unset;
  right: 0;
  top: 0;
  transform: translate(0, calc(-100% - 10px)) scale(0);
  transform-origin: bottom right;
}

[data-tooltip][data-tooltip-position='top-left']:hover::after {
  transform: translate(0, calc(-100% - 10px)) scale(1);
}

@media (hover: none) {
  [data-tooltip]::after {
    display: none;
  }
}
