/* Shared by real hotspots and the settings preview. Never intercept pointer hits. */
.hotspot-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--hotspot-edge), var(--hotspot-transparent, #3b82f600)),
    linear-gradient(to left, var(--hotspot-edge), var(--hotspot-transparent, #3b82f600)),
    linear-gradient(to bottom, var(--hotspot-edge), var(--hotspot-transparent, #3b82f600)),
    linear-gradient(to top, var(--hotspot-edge), var(--hotspot-transparent, #3b82f600));
  background-position: left top, right top, left top, left bottom;
  background-size: 20% 100%, 20% 100%, 100% 20%, 100% 20%;
  background-repeat: no-repeat;
}