@property --ds-glow-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.ds-glow-surface {
  --ds-glow-pointer-x: 50%;
  --ds-glow-pointer-y: 50%;
  --ds-glow-beam-angle: 0deg;
  position: relative;
  isolation: isolate;
}

.ds-glow-surface::before {
  position: absolute;
  z-index: 0;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--ds-color-accent) 76%, transparent),
      transparent 24% 72%,
      color-mix(in srgb, var(--ds-color-accent) 34%, transparent));
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-glow-exit-duration) var(--ds-ease-standard);
}

.ds-glow-surface__border,
.ds-glow-surface__spotlight,
.ds-glow-surface__bloom,
.ds-glow-surface__beam {
  position: absolute;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}

.ds-glow-surface__border,
.ds-glow-surface__bloom,
.ds-glow-surface__beam {
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.ds-glow-surface__border {
  inset: 0;
  padding: var(--ds-glow-border-width);
  background:
    radial-gradient(circle var(--ds-glow-size) at var(--ds-glow-pointer-x) var(--ds-glow-pointer-y),
      color-mix(in srgb, var(--ds-color-accent) 94%, white 6%),
      transparent 64%);
  opacity: var(--ds-glow-border-idle-opacity);
  transition: opacity var(--ds-glow-exit-duration) var(--ds-ease-standard);
}

.ds-glow-surface__spotlight {
  inset: 0;
  background:
    radial-gradient(circle var(--ds-glow-size) at var(--ds-glow-pointer-x) var(--ds-glow-pointer-y),
      color-mix(in srgb, var(--ds-color-accent) 88%, transparent),
      transparent 68%);
  opacity: var(--ds-glow-spotlight-idle-opacity);
  transition: opacity var(--ds-glow-exit-duration) var(--ds-ease-standard);
}

.ds-glow-surface__beam,
.ds-glow-surface__bloom {
  --ds-glow-beam-start: calc(88% - var(--ds-glow-beam-core-width));
  background:
    conic-gradient(from var(--ds-glow-beam-angle),
      transparent 0 var(--ds-glow-beam-start),
      color-mix(in srgb, var(--ds-color-accent) 46%, transparent) 82%,
      color-mix(in srgb, var(--ds-color-accent) 70%, white 30%) 86.5%,
      color-mix(in srgb, var(--ds-color-accent) 45%, white 55%) 88%,
      color-mix(in srgb, var(--ds-color-accent) 80%, white 20%) 89.5%,
      color-mix(in srgb, var(--ds-color-accent) 60%, transparent) 93%,
      transparent 97% 100%);
  opacity: 0;
}

.ds-glow-surface__beam {
  inset: 0;
  padding: var(--ds-glow-beam-core-thickness);
}

.ds-glow-surface__bloom {
  inset: calc(-1 * var(--ds-glow-bloom-size));
  padding: calc(var(--ds-glow-bloom-size) + var(--ds-glow-beam-core-thickness));
  background:
    conic-gradient(from var(--ds-glow-beam-angle),
      transparent 0 calc(var(--ds-glow-beam-start) - 5%),
      color-mix(in srgb, var(--ds-color-accent) 30%, transparent) 81%,
      color-mix(in srgb, var(--ds-color-accent) 88%, white 12%) 88%,
      color-mix(in srgb, var(--ds-color-accent) 38%, transparent) 93%,
      transparent 100%);
}

.ds-glow-surface[data-glow-beam="ambient"] {
  --ds-glow-beam-duration: var(--ds-glow-value-beam-duration);
  --ds-glow-beam-opacity: var(--ds-glow-value-beam-opacity);
  --ds-glow-bloom-size: var(--ds-glow-value-bloom-size);
  --ds-glow-bloom-opacity: var(--ds-glow-value-bloom-opacity);
  --ds-glow-inner-opacity: var(--ds-glow-value-inner-opacity);
  --ds-glow-static-bloom-opacity: var(--ds-glow-value-static-bloom-opacity);
}

.ds-glow-surface[data-glow-beam="ambient"]::before,
.ds-glow-surface[data-glow-active="true"]::before {
  opacity: var(--ds-glow-inner-opacity);
}

.ds-glow-surface[data-glow-beam="ambient"] > .ds-glow-surface__beam,
.ds-glow-surface[data-glow-active="true"] > .ds-glow-surface__beam {
  opacity: var(--ds-glow-beam-opacity);
  animation: ds-glow-border-beam var(--ds-glow-beam-duration) linear var(--ds-glow-beam-delay) infinite;
}

.ds-glow-surface[data-glow-beam="ambient"] > .ds-glow-surface__bloom,
.ds-glow-surface[data-glow-active="true"] > .ds-glow-surface__bloom {
  opacity: var(--ds-glow-bloom-opacity);
  animation: ds-glow-border-beam var(--ds-glow-beam-duration) linear var(--ds-glow-beam-delay) infinite;
}

@media (hover: hover) and (pointer: fine) {
  .ds-glow-surface:hover > .ds-glow-surface__border {
    opacity: var(--ds-glow-current-hover-opacity);
    transition-duration: var(--ds-glow-enter-duration);
  }

  .ds-glow-surface:hover > .ds-glow-surface__spotlight {
    opacity: var(--ds-glow-current-spotlight-hover-opacity);
    transition-duration: var(--ds-glow-enter-duration);
  }

  .ds-glow-surface[data-glow-beam="ambient"]:hover > .ds-glow-surface__bloom,
  .ds-glow-surface[data-glow-active="true"]:hover > .ds-glow-surface__bloom {
    opacity: clamp(0, calc(var(--ds-glow-bloom-opacity) + var(--ds-glow-bloom-hover-boost)), 1);
  }
}

html[data-ds-scrolling="true"] .ds-glow-surface[data-glow-beam="ambient"] > .ds-glow-surface__beam,
html[data-ds-scrolling="true"] .ds-glow-surface[data-glow-active="true"] > .ds-glow-surface__beam,
html[data-ds-scrolling="true"] .ds-glow-surface[data-glow-beam="ambient"] > .ds-glow-surface__bloom,
html[data-ds-scrolling="true"] .ds-glow-surface[data-glow-active="true"] > .ds-glow-surface__bloom {
  animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
  html[data-ds-scrolling="true"] .ds-glow-surface:hover:not(:focus-visible) > .ds-glow-surface__border {
    opacity: var(--ds-glow-border-idle-opacity);
    transition: none;
  }

  html[data-ds-scrolling="true"] .ds-glow-surface:hover:not(:focus-visible) > .ds-glow-surface__spotlight {
    opacity: var(--ds-glow-spotlight-idle-opacity);
    transition: none;
  }

  html[data-ds-scrolling="true"] .ds-glow-surface[data-glow-beam="ambient"]:hover:not(:focus-visible) > .ds-glow-surface__bloom,
  html[data-ds-scrolling="true"] .ds-glow-surface[data-glow-active="true"]:hover:not(:focus-visible) > .ds-glow-surface__bloom {
    opacity: var(--ds-glow-bloom-opacity);
  }
}

.ds-glow-surface:focus-visible {
  outline: 2px solid var(--ds-color-accent);
  outline-offset: 4px;
}

.ds-glow-surface:focus-visible > .ds-glow-surface__border {
  opacity: var(--ds-glow-current-focus-opacity);
}

.ds-glow-surface[data-glow-beam="ambient"]:focus-visible > .ds-glow-surface__bloom,
.ds-glow-surface[data-glow-active="true"]:focus-visible > .ds-glow-surface__bloom {
  opacity: clamp(0, calc(var(--ds-glow-bloom-opacity) + var(--ds-glow-bloom-hover-boost)), 1);
}

.ds-glow-surface[data-glow-active="true"] > .ds-glow-surface__border {
  opacity: var(--ds-glow-current-active-opacity);
  transition-duration: var(--ds-glow-active-transition-duration);
}

.ds-glow-surface[data-glow-active="true"] > .ds-glow-surface__spotlight {
  opacity: var(--ds-glow-current-spotlight-active-opacity);
  transition-duration: var(--ds-glow-active-transition-duration);
}

@keyframes ds-glow-border-beam {
  to { --ds-glow-beam-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-glow-surface {
    --ds-glow-pointer-x: 50%;
    --ds-glow-pointer-y: 50%;
  }

  .ds-glow-surface::before,
  .ds-glow-surface__border,
  .ds-glow-surface__spotlight,
  .ds-glow-surface__bloom,
  .ds-glow-surface__beam {
    animation: none !important;
    transition: none !important;
  }

  .ds-glow-surface[data-glow-beam="ambient"] > .ds-glow-surface__beam,
  .ds-glow-surface[data-glow-active="true"] > .ds-glow-surface__beam {
    opacity: 0;
  }

  .ds-glow-surface[data-glow-beam="ambient"] > .ds-glow-surface__bloom,
  .ds-glow-surface[data-glow-active="true"] > .ds-glow-surface__bloom {
    opacity: var(--ds-glow-static-bloom-opacity);
  }
}