Agentic Button

/* Agentic Button: the secondary Button look with the AI gradient as the
   border.
   --pds-gradient-ai-active is a gradient, not a color, so it cannot go in
   border-color. The border is transparent and the gradient is painted on the
   border-box underneath; the fill layers sit on the padding-box above it. The
   secondary background tokens are translucent, so an opaque surface layer
   keeps the gradient from showing through the middle of the button. */
.pds-agentic-button {
	--button-border-color: transparent;
	--button-border-color-hover: transparent;
	--button-border-color-active: transparent;

	background-clip: padding-box, padding-box, border-box;
	background-color: transparent;
	background-image:
		linear-gradient(
			var(--button-background-color),
			var(--button-background-color)
		),
		linear-gradient(
			var(--pds-color-surface-default),
			var(--pds-color-surface-default)
		),
		var(--pds-gradient-ai-active);
	background-origin: border-box;
}

/* Animated (`isAnimated`): the border shimmers. The gradient layer (the third) is
   twice the button's width and repeats, and slides by one tile so the loop is
   seamless. The fill layers stay put. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.pds-agentic-button.pds-agentic-button--animated {
		animation: agentic-button-shimmer var(--pds-animation-duration-ai-shimmer)
			linear infinite;
		background-repeat: no-repeat, no-repeat, repeat-x;
		background-size:
			100% 100%,
			100% 100%,
			200% 100%;
	}
}

@keyframes agentic-button-shimmer {
	from {
		background-position:
			0 0,
			0 0,
			0 0;
	}

	to {
		background-position:
			0 0,
			0 0,
			-200% 0;
	}
}