.hotspot {
  --hs-radius: var(--hs-radius, 6);
  --hs-scale: calc(var(--hs-radius, 6) / 6);
  --tw-scale-x: var(--hs-scale);
  --tw-scale-y: var(--hs-scale);
  opacity: var(--hs-opacity, 1);
}

.hotspot .hotspot-dot {
  background-color: var(--hs-dot-color, rgba(255, 255, 255, 0.85));
  box-shadow: 0 0 6px var(--hs-glow-color, rgba(255, 255, 255, 0.35));
}

.hotspot .hotspot-halo {
  background: radial-gradient(circle, var(--hs-glow-color, rgba(255, 255, 255, 0.26)), transparent 70%);
  filter: blur(calc(var(--hs-blur, 2) * 1px));
  opacity: var(--hs-glow, 0.7);
}

.hotspot .hotspot-wave {
  border-color: var(--hs-glow-color, rgba(255, 255, 255, 0.6));
  border-width: calc(var(--hs-ring, 1) * 1px);
  opacity: var(--hs-glow, 0.6);
  animation-duration: calc(var(--hs-pulse-speed, 4.2) * 1s);
}

.hotspot[data-hs-dot="false"] .hotspot-dot {
  opacity: 0;
  box-shadow: none;
}

.hotspot[data-hs-pulse="false"] .hotspot-wave {
  animation: none;
  opacity: 0;
}

.hotspot[data-hs-pulse="false"] .hotspot-halo {
  animation: none;
}

.hotspot[data-hs-hover="true"]:hover {
  --tw-scale-x: calc(var(--hs-scale, 1) * 1.08);
  --tw-scale-y: calc(var(--hs-scale, 1) * 1.08);
}

.hotspot[data-hs-contrast="true"] .hotspot-wave {
  border-color: #ffffff;
}

.hotspot[data-hs-contrast="true"] .hotspot-dot {
  background-color: #ffffff;
  box-shadow: 0 0 10px #ffffff;
}