/* Falcon - loading animation on form submit buttons while the form is processing - issue #50 (Iggy, 23 Oct)
   Loaded site-wide by ftt-core.php; assets/js/form-submit-busy.js adds .ftt-is-busy to the button that sent the form
   and sets --ftt-busy-color to the button's own text colour. The label is hidden (the button keeps its size) and a
   small spinner turns in its place. The button's shape and colours are left as they are.
   Keep it ASCII-only and backslash-free. */

/* :where() keeps this at zero specificity, so a button that is already positioned keeps its own position. */
:where(.ftt-is-busy) {
	position: relative;
}

.ftt-is-busy {
	color: transparent !important;
	cursor: progress !important;
	pointer-events: none;
}

/* Elementor puts the label and icons in inner spans with their own colour. */
.ftt-is-busy * {
	color: transparent !important;
	fill: transparent !important;
}

.ftt-is-busy::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1em;
	height: 1.1em;
	margin: -.55em 0 0 -.55em;
	box-sizing: border-box;
	border: 2px solid var(--ftt-busy-color, currentColor);
	border-right-color: transparent;
	border-radius: 50%; /* the spinner ring itself, not a container */
	animation: ftt-busy-spin .7s linear infinite;
}

/* An input button can't hold the spinner: it pulses instead, label still showing. */
input.ftt-is-busy {
	color: var(--ftt-busy-color) !important;
	animation: ftt-busy-pulse 1.2s ease-in-out infinite;
}

@keyframes ftt-busy-spin {
	to { transform: rotate(360deg); }
}

@keyframes ftt-busy-pulse {
	50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
	.ftt-is-busy::after {
		animation-duration: 2s;
	}
}