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

:root {
  --glowingWidth: 4px;
  --glowingBlurRatio: 1.5;
  --glowingBorderZIndex: 999;
  --rotationDuration: 2s;
  --glowingBlendMode: multiply;
  --glowingColors: cyan, purple, tomato, purple, cyan;
  --glowingColors2: white, transparent, transparent, white, transparent, transparent, white;
}

.glowing-wrapper {
  position: fixed;
  z-index: var(--glowingBorderZIndex);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
  --glowingInnerWidth: calc(var(--glowingWidth) / 4);
}

.glowing-container {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: filter 0.5s ease-in-out;
}

.glowing-border {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.glowing-container--blur-wrapper {
  position: absolute;
  inset: 0;
  filter: blur(calc(var(--glowingWidth) / 2 * var(--glowingBlurRatio)));
  border-radius: inherit;
}

.glowing-border::after {
  content: "";
  position: absolute;
  inset: 0;
  animation: glowing-spin-gradient var(--rotationDuration) linear infinite;
  border: var(--glowingWidth) solid transparent;
  border-radius: inherit;
  background: conic-gradient(from var(--angle), var(--glowingColors)) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.glowing-container-2 {
  inset: var(--glowingInnerWidth);
}

.glowing-border2::after {
  border: calc(var(--glowingWidth) / 2) solid transparent;
}

.glowing-container-2 .glowing-container--blur-wrapper {
  filter: blur(calc(var(--glowingWidth) / 3 * var(--glowingBlurRatio)));
}

.glowing-border3::after {
  inset: calc(var(--glowingWidth) / -2);
  border: calc(var(--glowingWidth) * 2) solid transparent;
  background: conic-gradient(from var(--angle), var(--glowingColors2)) border-box;
  animation-direction: reverse;
  animation-duration: calc(var(--rotationDuration) * 1.31);
}

@keyframes glowing-spin-gradient {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}