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

@keyframes glower-rotate {
  to {
    --glower-angle: 360deg;
  }
}

@layer components {
  .glowing,
  .product-card--glowing {
    --gradient-colors:
      var(--color-red-colab), var(--color-green-colab), var(--color-blue-colab),
      var(--color-green-colab), var(--color-blue-colab), var(--color-red-colab);

    animation: glower-rotate var(--glower-animation-duration, 10s) infinite linear paused;

    position: relative;
    isolation: isolate;

    &::after {
      opacity: var(--glower-opacity, 0.125);
      filter: blur(var(--glower-blur-size, 0.5rem));
      background: var(--glower-background, conic-gradient(from var(--glower-angle), var(--gradient-colors)));
      content: "";
      position: absolute;
      inset: 0;
      z-index: var(--glower-z-index, -1);
      pointer-events: none;
      border-radius: inherit;
    }

    &[data-animate] {
      animation-play-state: running;
    }

    &:hover {
      animation-play-state: paused;
    }
  }
}