:root {
  --pt-spotlight-color: 210, 100%, 60%;
  --pt-spotlight-gradient-1: 210, 100%, 60%;
  --pt-spotlight-gradient-2: 280, 100%, 60%;
  --pt-spotlight-size: 350px;
  --pt-spotlight-opacity: 0.15;
  --pt-spotlight-border-opacity: 0.5;
  --pt-spotlight-border-width: 1px;
  --pt-spotlight-transition: opacity 0.3s ease;
  --spotlight-color: var(--pt-spotlight-color);
  --spotlight-gradient-1: var(--pt-spotlight-gradient-1);
  --spotlight-gradient-2: var(--pt-spotlight-gradient-2);
  --spotlight-size: var(--pt-spotlight-size);
  --spotlight-opacity: var(--pt-spotlight-opacity);
  --spotlight-border-opacity: var(--pt-spotlight-border-opacity);
  --spotlight-border-width: var(--pt-spotlight-border-width);
  --spotlight-transition: var(--pt-spotlight-transition);
}

.pt-spotlight-card,
.plp-spotlight-card,
.spotlight-card,
[data-spotlight-card] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pt-spotlight-card::before,
.plp-spotlight-card::before,
.spotlight-card::before,
[data-spotlight-card]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    var(--spotlight-size, 350px) var(--spotlight-size, 350px) at var(--mouse-x, 50%) var(--mouse-y, 50%),
    hsla(var(--spotlight-color, 210, 100%, 60%), var(--spotlight-opacity, 0.15)),
    transparent 100%
  );
  opacity: 0;
  transition: var(--spotlight-transition, opacity 0.3s ease);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

.pt-spotlight-card::after,
.plp-spotlight-card::after,
.spotlight-card::after,
[data-spotlight-card]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    calc(var(--spotlight-size, 350px) * 0.8) calc(var(--spotlight-size, 350px) * 0.8) at var(--mouse-x, 50%) var(--mouse-y, 50%),
    hsla(var(--spotlight-color, 210, 100%, 60%), var(--spotlight-border-opacity, 0.5)),
    transparent 100%
  );
  border-radius: inherit;
  opacity: 0;
  transition: var(--spotlight-transition, opacity 0.3s ease);
  pointer-events: none;
  z-index: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: var(--spotlight-border-width, 1px);
}

.pt-spotlight-card:hover::before,
.pt-spotlight-card:hover::after,
.plp-spotlight-card:hover::before,
.plp-spotlight-card:hover::after,
.spotlight-card:hover::before,
.spotlight-card:hover::after,
[data-spotlight-card]:hover::before,
[data-spotlight-card]:hover::after {
  opacity: 1;
}

.pt-spotlight-card--border,
.pt-spotlight-card[data-variant="border"],
.plp-spotlight-card--border,
.plp-spotlight-card[data-variant="border"],
.spotlight-card--border,
.spotlight-card[data-variant="border"] {
  --spotlight-opacity: 0;
}

.pt-spotlight-card--border::before,
.pt-spotlight-card[data-variant="border"]::before,
.plp-spotlight-card--border::before,
.plp-spotlight-card[data-variant="border"]::before,
.spotlight-card--border::before,
.spotlight-card[data-variant="border"]::before {
  display: none !important;
}

.pt-spotlight-card--border::after,
.pt-spotlight-card[data-variant="border"]::after,
.plp-spotlight-card--border::after,
.plp-spotlight-card[data-variant="border"]::after,
.spotlight-card--border::after,
.spotlight-card[data-variant="border"]::after {
  --spotlight-border-opacity: 0.8;
  padding: var(--spotlight-border-width, 1px);
}

.pt-spotlight-card--gradient::before,
.pt-spotlight-card[data-variant="gradient"]::before,
.plp-spotlight-card--gradient::before,
.plp-spotlight-card[data-variant="gradient"]::before,
.spotlight-card--gradient::before,
.spotlight-card[data-variant="gradient"]::before {
  background: radial-gradient(
    var(--spotlight-size, 350px) var(--spotlight-size, 350px) at var(--mouse-x, 50%) var(--mouse-y, 50%),
    hsla(var(--spotlight-gradient-1, 210, 100%, 60%), var(--spotlight-opacity, 0.15)),
    hsla(var(--spotlight-gradient-2, 280, 100%, 60%), calc(var(--spotlight-opacity, 0.15) * 0.5)),
    transparent 100%
  );
}

.pt-spotlight-card--gradient::after,
.pt-spotlight-card[data-variant="gradient"]::after,
.plp-spotlight-card--gradient::after,
.plp-spotlight-card[data-variant="gradient"]::after,
.spotlight-card--gradient::after,
.spotlight-card[data-variant="gradient"]::after {
  background: radial-gradient(
    calc(var(--spotlight-size, 350px) * 0.8) calc(var(--spotlight-size, 350px) * 0.8) at var(--mouse-x, 50%) var(--mouse-y, 50%),
    hsla(var(--spotlight-gradient-1, 210, 100%, 60%), var(--spotlight-border-opacity, 0.5)),
    hsla(var(--spotlight-gradient-2, 280, 100%, 60%), calc(var(--spotlight-border-opacity, 0.5) * 0.7)),
    transparent 100%
  );
  padding: var(--spotlight-border-width, 1px);
}

.pt-spotlight-card--gradient-border::before,
.pt-spotlight-card[data-variant="gradient_border"]::before,
.pt-spotlight-card[data-variant="gradient-border"]::before,
.plp-spotlight-card--gradient-border::before,
.plp-spotlight-card[data-variant="gradient_border"]::before,
.plp-spotlight-card[data-variant="gradient-border"]::before,
.spotlight-card--gradient-border::before,
.spotlight-card[data-variant="gradient_border"]::before,
.spotlight-card[data-variant="gradient-border"]::before {
  display: none !important;
}

.pt-spotlight-card--gradient-border::after,
.pt-spotlight-card[data-variant="gradient_border"]::after,
.pt-spotlight-card[data-variant="gradient-border"]::after,
.plp-spotlight-card--gradient-border::after,
.plp-spotlight-card[data-variant="gradient_border"]::after,
.plp-spotlight-card[data-variant="gradient-border"]::after,
.spotlight-card--gradient-border::after,
.spotlight-card[data-variant="gradient_border"]::after,
.spotlight-card[data-variant="gradient-border"]::after {
  background: radial-gradient(
    calc(var(--spotlight-size, 350px) * 0.8) calc(var(--spotlight-size, 350px) * 0.8) at var(--mouse-x, 50%) var(--mouse-y, 50%),
    hsla(var(--spotlight-gradient-1, 210, 100%, 60%), var(--spotlight-border-opacity, 0.85)),
    hsla(var(--spotlight-gradient-2, 280, 100%, 60%), calc(var(--spotlight-border-opacity, 0.85) * 0.7)),
    transparent 100%
  );
  padding: var(--spotlight-border-width, 1px);
}

.pt-spotlight-card--autoplay,
.pt-spotlight-card[data-autoplay="true"],
.plp-spotlight-card--autoplay,
.plp-spotlight-card[data-autoplay="true"],
.spotlight-card--autoplay,
.spotlight-card[data-autoplay="true"] {
  --mouse-x: 50%;
  --mouse-y: 50%;
}

.pt-spotlight-card--autoplay::before,
.pt-spotlight-card--autoplay::after,
.pt-spotlight-card--proximity::before,
.pt-spotlight-card--proximity::after,
.pt-spotlight-card[data-autoplay="true"]::before,
.pt-spotlight-card[data-autoplay="true"]::after,
.pt-spotlight-card[data-mode="proximity"]::before,
.pt-spotlight-card[data-mode="proximity"]::after,
.plp-spotlight-card--autoplay::before,
.plp-spotlight-card--autoplay::after,
.plp-spotlight-card--proximity::before,
.plp-spotlight-card--proximity::after,
.plp-spotlight-card[data-autoplay="true"]::before,
.plp-spotlight-card[data-autoplay="true"]::after,
.plp-spotlight-card[data-mode="proximity"]::before,
.plp-spotlight-card[data-mode="proximity"]::after,
.spotlight-card--autoplay::before,
.spotlight-card--autoplay::after,
.spotlight-card--proximity::before,
.spotlight-card--proximity::after,
.spotlight-card[data-autoplay="true"]::before,
.spotlight-card[data-autoplay="true"]::after,
.spotlight-card[data-mode="proximity"]::before,
.spotlight-card[data-mode="proximity"]::after {
  opacity: 1;
}

.pt-spotlight-card--disabled::before,
.pt-spotlight-card--disabled::after,
.pt-spotlight-card[data-disabled="true"]::before,
.pt-spotlight-card[data-disabled="true"]::after,
.plp-spotlight-card--disabled::before,
.plp-spotlight-card--disabled::after,
.plp-spotlight-card[data-disabled="true"]::before,
.plp-spotlight-card[data-disabled="true"]::after,
.spotlight-card--disabled::before,
.spotlight-card--disabled::after,
.spotlight-card[data-disabled="true"]::before,
.spotlight-card[data-disabled="true"]::after {
  display: none !important;
}

.pt-spotlight-card:focus-visible::before,
.pt-spotlight-card:focus-visible::after,
.plp-spotlight-card:focus-visible::before,
.plp-spotlight-card:focus-visible::after,
.spotlight-card:focus-visible::before,
.spotlight-card:focus-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pt-spotlight-card::before,
  .pt-spotlight-card::after,
  .plp-spotlight-card::before,
  .plp-spotlight-card::after,
  .spotlight-card::before,
  .spotlight-card::after {
    transition: none;
  }
  .pt-spotlight-card--autoplay::before,
  .pt-spotlight-card--autoplay::after,
  .plp-spotlight-card--autoplay::before,
  .plp-spotlight-card--autoplay::after,
  .spotlight-card--autoplay::before,
  .spotlight-card--autoplay::after {
    animation: none;
    opacity: 1;
    --mouse-x: 50%;
    --mouse-y: 50%;
  }
}