.tooltip {
  display: inline-block;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 9999;
  padding: 6px 10px;
  border-radius: 6px;
  font: 0.9rem/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  color: #CCC;
  background: rgba(230, 175, 103, 0.63);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  opacity: 0;
  will-change: transform, opacity;
  min-width: 100px;
  max-width: 260px;
  white-space: nowrap;
  text-align: center;
}

.tooltip[data-show="1"] {
  opacity: 1;
  transform: translate(0%, 0);
}

.tooltip[data-pos=left], .tooltip[data-pos=right] {
  transform: translate(0, -50%);
}

.tooltip[data-pos=left][data-show="1"], .tooltip[data-pos=right][data-show="1"] {
  transform: translate(0, 0);
}

.tooltip-arrow {
  opacity: 0;
}

.tooltip[data-pos=top] .tooltip-arrow {
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.tooltip[data-pos=bottom] .tooltip-arrow {
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.tooltip[data-pos=left] .tooltip-arrow {
  right: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.tooltip[data-pos=right] .tooltip-arrow {
  left: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

@media (prefers-contrast: more) {
  .tooltip {
    box-shadow: 0 0 0 2px #000;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tooltip {
    transition: none;
  }
}

/*# sourceMappingURL=tooltips.css.map */