[data-tip] {
  position: relative;
  cursor: default;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: hsl(var(--bgh, 240), 20%, 10%);
  color: hsl(var(--bgh, 240), 10%, 88%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  transition: opacity 0.1s;
}
[data-tip]:hover::after {
  opacity: 1;
}

@media (prefers-color-scheme: light) {
  :root {
    --bgh: 220;
    --bgs: 15%;
    --bgl: 92%;
    --scheme: 100% -;
    --color-primary: hsl(220, 80%, 50%);
    --color-positive: hsl(109, 58%, 35%);
    --color-negative: hsl(347, 87%, 44%);
  }

  img.flat-icon,
  .flat-icon {
    filter: invert(0) !important;
  }
}