/**
 * Charmed Passkey Bridge — foglio di stile.
 *
 * Dalla 2.0.0 la card impostazioni usa un interruttore nostro che riusa le
 * classi dell'app (.ci-pwa-settings-switch): eredita lo stile dal tema e non ha
 * bisogno di regole qui. Restano solo gli stili del pulsante di ACCESSO, che e'
 * il pulsante vero di Secure Passkeys rivestito con le classi del tema.
 */

/* ============================================================
   Accesso
   ============================================================ */

.charmed-passkey-wrap {
	width: 100%;
}

.charmed-passkey-wrap .charmed-passkey-dressed {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* Il plugin incapsula il pulsante in wrapper propri: non devono stringerlo. */
.charmed-passkey-wrap > div,
.charmed-passkey-wrap > form {
	width: 100%;
	margin: 0;
}

/* wp-login.php non ha le classi del tema da ereditare. */
body.login .charmed-passkey-dressed {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #8c8f94;
	border-radius: 3px;
	background: #f6f7f7;
	color: #2271b1;
	cursor: pointer;
}

/* ============================================================
   Impostazioni dell'app
   ============================================================ */

/*
 * L'interruttore e' costruito con le classi dell'app, quindi e' gia' stilizzato.
 * Qui solo la riga di stato quando, per ripiego, non esistesse gia' quella
 * dell'app (#ci-pwa-faceid-status): usiamo un nodo nostro con lo stesso aspetto.
 */
.ci-pwa-settings-card .charmed-passkey-status {
	grid-column: 1 / -1;
	margin: 6px 0 0;
	font-weight: 600;
}

.ci-pwa-settings-card .charmed-passkey-status.is-error {
	color: #fca5a5;
}