/**
 * Estilos de los formularios de UCSC Forms.
 *
 * Loader del botón de envío: invisible en reposo y girando mientras htmx
 * mantiene la clase htmx-request en el formulario; durante ese mismo lapso se
 * bloquean las interacciones con el botón y el resto de los elementos.
 */

@keyframes ucsc-form-spin {
	to {
		transform: rotate(1turn);
	}
}

/* Reserva su espacio en reposo para que el botón no salte al aparecer. */
.form-submit::after {
	content: '';
	width: 0;
	height: 0;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.15s linear;
	display: none;
}

/* htmx marca el formulario mientras la petición está en vuelo. */
form.htmx-request .form-submit::after {
	display: inline-block;
	opacity: 1;
	width: 1em;
	height: 1em;
	animation: ucsc-form-spin 0.4s linear infinite;
}

form.htmx-request * {
	pointer-events: none;
}
form.htmx-request .form-control {
	color: var( --wp--preset--color--neutral--500 );
}
form.htmx-request .form-control::placeholder {
	color: transparent;
}

/* El tema ya pinta el estado :disabled; aquí solo se refuerza con opacidad
   mientras falta el token de reCAPTCHA (su `cursor` no se toca). */
.form-submit:disabled {
	opacity: 0.6;
}