/**
 * Diagonal colour fill hover — primary CTAs (not header; header uses Figma shadow states in header.css).
 */

.jp-btn {
	background-image: linear-gradient(
		45deg,
		var(--jp-dfill-hover, var(--jp-btn-reveal-fill, #ffffff)) 50%,
		var(--jp-dfill-rest, var(--jp-btn-fill, #000000)) 50%
	);
	background-size: 300%;
	background-position: 100%;
	background-repeat: no-repeat;
	background-color: transparent;
	box-sizing: border-box;
	transition:
		background-position 0.55s ease-in-out,
		color 0.55s ease-in-out,
		border-color 0.55s ease-in-out;
}

.jp-btn {
	--jp-dfill-rest: var(--jp-btn-fill);
	--jp-dfill-hover: var(--jp-btn-reveal-fill);
}

@media (hover: hover) and (pointer: fine) {
	.jp-btn:hover,
	.jp-btn:focus-visible {
		background-position: 0;
		color: var(--jp-btn-reveal-text);
		border-color: var(--jp-btn-reveal-fill);
		transition:
			background-position 0.75s ease-in-out,
			color 0.75s ease-in-out,
			border-color 0.75s ease-in-out;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jp-btn {
		transition: none;
	}
}