/* Kickbox email gate — inline verification message + busy state.
 * The message element is injected by kickbox-email-gate.js as:
 *   <p data-nylas-kickbox-email-message class="is-error|is-pending|is-success">
 * and appended to the gated form. The form also gets `.is-kickbox-verifying`
 * while a verification request is in flight.
 */

[data-nylas-kickbox-email-message] {
	margin: 8px 0 0;
	padding: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
}

[data-nylas-kickbox-email-message]:empty {
	display: none;
}

[data-nylas-kickbox-email-message].is-error {
	color: #d32f2f;
}

[data-nylas-kickbox-email-message].is-pending {
	color: #5a6478;
}

[data-nylas-kickbox-email-message].is-pending::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 8px;
	vertical-align: -1px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: nylas-kickbox-spin 0.6s linear infinite;
}

/* Success: the script clears the text, so this state is effectively hidden. */
[data-nylas-kickbox-email-message].is-success {
	color: #1aa780;
}

/* Dim the form while a verification request is in flight. */
.is-kickbox-verifying [type="submit"],
.is-kickbox-verifying .hs-button,
.is-kickbox-verifying .mktoButton {
	opacity: 0.6;
	cursor: progress;
}

@keyframes nylas-kickbox-spin {
	to {
		transform: rotate(360deg);
	}
}