/**
 * Shared front-end states for Finewerk forms.
 *
 * Only the states the submission handler needs — the visual design of each
 * form stays in that element's own stylesheet, so adding this file changes
 * nothing about how existing forms look until they are submitted.
 *
 * Colours are inherited from the surrounding element via custom properties
 * with neutral fallbacks, so a form on a dark panel and a form on a light
 * one both read correctly.
 */

.fw-form__status {
	margin: 12px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--fw-form-border, rgba(127, 127, 127, 0.35));
	border-radius: var(--fw-form-radius, 12px);
	color: var(--fw-form-color, inherit);
	font-size: 15px;
	line-height: 1.55;
	outline: none;
}

.fw-form__status[hidden] {
	display: none;
}

.fw-form__status.is-loading {
	opacity: 0.85;
}

.fw-form__status.is-success {
	border-color: var(--fw-form-success-border, rgba(56, 161, 105, 0.5));
	background-color: var(--fw-form-success-bg, rgba(56, 161, 105, 0.08));
}

.fw-form__status.is-error {
	border-color: var(--fw-form-error-border, rgba(197, 48, 48, 0.5));
	background-color: var(--fw-form-error-bg, rgba(197, 48, 48, 0.08));
}

/* Field-level invalid state. */
.is-fw-invalid {
	border-color: var(--fw-form-error-border, #f2a6a6) !important;
}

/* Submitting: block interaction and show it. */
form.is-fw-sending {
	position: relative;
}

form.is-fw-sending [type="submit"] {
	cursor: progress;
	opacity: 0.75;
}

form.is-fw-sending [type="submit"]:disabled {
	pointer-events: none;
}