Gradient border button

/* globals.css
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes border-turn { to { --angle: 1turn; } }
.border-turn {
  --fill: var(--tst-bg);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    conic-gradient(from var(--angle), var(--tst-primary), var(--tst-info), var(--tst-primary-soft), var(--tst-primary)) border-box;
  animation: border-turn 4s linear infinite;
}
.border-turn:hover { --fill: var(--tst-surface); }
.border-turn-glow { background: conic-gradient(from var(--angle), var(--tst-primary), var(--tst-info), var(--tst-primary-soft), var(--tst-primary)); animation: border-turn 4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .border-turn, .border-turn-glow { animation: none; } }
*/
import { cn } from "@/lib/utils";

interface GradientBorderButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  glow?: boolean;
}

export function GradientBorderButton({ glow = false, className, children, ...props }: GradientBorderButtonProps) {
  const button = (
    <button
      type="button"
      className={cn(
        "border-turn inline-flex h-11 items-center justify-center gap-1.5 rounded px-5 text-[15px] font-medium text-fg transition active:scale-[.97] motion-reduce:transition-none [&_svg]:size-4",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
        className,
      )}
      {...props}
    >
      {children}
    </button>
  );
  if (!glow) return button;
  return (
    <span className="relative isolate inline-flex rounded">
      <span aria-hidden className="border-turn-glow absolute inset-[3px] -z-10 rounded opacity-45 blur-md" />
      {button}
    </span>
  );
}