/**
 * Clerk Connect front-end styles.
 *
 * Deliberately minimal. Clerk's own components carry their appearance, which is
 * themeable through the `clerk_connect_appearance` filter, so anything here
 * would only fight it. These rules cover the wrapper, the error slot, and the
 * editor placeholders.
 */

.clerk-connect-widget {
	display: flow-root;
	margin-block: 1.5rem;
}

.clerk-connect-widget--sign-in .clerk-connect-mount,
.clerk-connect-widget--sign-up .clerk-connect-mount {
	display: flex;
	justify-content: center;
}

/* Reserves height so the page does not jump when Clerk's widget mounts. */
.clerk-connect-widget--sign-in .clerk-connect-mount:empty,
.clerk-connect-widget--sign-up .clerk-connect-mount:empty {
	min-height: 25rem;
}

.clerk-connect-error {
	color: #b32d2e;
	margin-block: 0.75rem 0;
}

.clerk-connect-error[hidden] {
	display: none;
}

.clerk-connect-signout {
	margin-top: 0.75rem;
}

/* Only rendered with ?clerk_debug=1 or WP_DEBUG. */
.clerk-connect-diagnostics {
	background: #1d2327;
	color: #f0f0f1;
	font-size: 11px;
	line-height: 1.6;
	margin: 1rem 0 0;
	max-height: 40vh;
	overflow: auto;
	padding: 0.75rem;
	white-space: pre-wrap;
	word-break: break-word;
}

.clerk-connect-placeholder,
.clerk-connect-gate {
	border: 1px dashed currentColor;
	border-radius: 4px;
	opacity: 0.7;
	padding: 1rem;
}

.clerk-connect-placeholder p,
.clerk-connect-gate__label {
	margin: 0.25rem 0 0;
}

.clerk-connect-gate__label {
	font-size: 0.8125rem;
	margin-bottom: 0.75rem;
}