.reactbits-spotlight-card {
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  --spotlight-visible: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.reactbits-spotlight-card__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--spotlight-x) var(--spotlight-y),
    var(--reactbits-spotlight-color),
    transparent 62%
  );
  opacity: var(--spotlight-visible);
  transition: opacity 240ms ease-out;
}

.reactbits-spotlight-card:focus-within > .reactbits-spotlight-card__glow {
  opacity: 1;
}

.reactbits-spotlight-card > :not(.reactbits-spotlight-card__glow) {
  position: relative;
  z-index: 1;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .reactbits-spotlight-card__glow {
    display: none;
  }
}