/*
 * The passkey button on the login screen and the second-step page, on top of
 * the login styles of WordPress and the theme. Only layout here, no colours:
 * buttons, links and notices take whatever the theme gives the login screen,
 * so both screens look like one.
 */

/* wp-login.php sets .login form p, which wins from a single class. */
.login #loginform .beveiliging-login__intro {
	margin-bottom: 16px;
}

.beveiliging-login__passkey .button,
.beveiliging-passkey-login__button {
	width: 100%;
	text-align: center;
}

.beveiliging-login__note:empty {
	display: none;
}

.login .beveiliging-login .beveiliging-login__note {
	margin-top: 8px;
}

/* Room between the passkey button and the code field, now that no line sits between them. */
.login .beveiliging-login .beveiliging-login__passkey + input + .beveiliging-login__app {
	margin-top: 24px;
}

.login .beveiliging-login .beveiliging-login__code {
	font-size: 24px;
	letter-spacing: 0.2em;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.beveiliging-login .submit {
	overflow: hidden;
}

.beveiliging-login__recovery {
	clear: both;
	margin-top: 20px;
}

.beveiliging-login__recovery summary {
	cursor: pointer;
	text-decoration: underline;
}

.beveiliging-login__recovery[open] summary {
	margin-bottom: 12px;
}

.login .beveiliging-login__recovery .button {
	float: none;
}

.beveiliging-login__none {
	padding: 8px 12px;
	border-left: 4px solid #d63638;
	background: #fbeaea;
}

/* The passkey button under the Login button of the normal login form. */
.login .beveiliging-passkey-login {
	clear: both;
	padding-top: 8px;
}

.login .beveiliging-passkey-login .beveiliging-passkey-login__or {
	margin: 16px 0 0;
	text-align: center;
}

.login .beveiliging-passkey-login__button.button {
	float: none;
	height: auto;
	min-height: 40px;
	margin-top: 16px;
}

.login .beveiliging-passkey-login__note:empty {
	display: none;
}

.login .beveiliging-passkey-login .beveiliging-passkey-login__note {
	margin-top: 8px;
}

/* Fingerprint and text side by side, centred, in the colour of the text. */
.beveiliging-login__passkey .button,
.login .beveiliging-passkey-login__button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

/* The same size of letter as the Login button of the theme. */
body.login .beveiliging-passkey-login .beveiliging-passkey-login__button.button,
body.login #pw-passkey.button {
	font-size: 1rem;
}

.beveiliging-passkey-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

/*
 * Hover of the passkey buttons in the theme's accent colour (Launchpad's
 * --lp-accent), while other secondary buttons keep the theme's own hover.
 * Without Launchpad it falls back to the admin colour of WordPress. Heavier
 * selectors than the theme's .wp-core-ui .button:not(.button-primary):hover,
 * whichever stylesheet loads last.
 */
body.login .beveiliging-passkey-login .beveiliging-passkey-login__button.button:hover,
body.login .beveiliging-passkey-login .beveiliging-passkey-login__button.button:focus-visible,
body.login #pw-passkey.button:hover,
body.login #pw-passkey.button:focus-visible {
	background-color: var(--lp-accent, var(--wp-admin-theme-color, #2271b1));
	border-color: var(--lp-accent, var(--wp-admin-theme-color, #2271b1));
	color: var(--lp-op-primary, #fff);
}