/**
 * Login Security — profile-screen enrolment.
 *
 * profile.php is a core WordPress screen, so the plugin's design system is not
 * loaded there and the markup uses native WP components throughout. What is left
 * are the few things core has no equivalent for: the QR enrolment panel, the
 * one-time code block, and the key/device lists.
 */

.be-ls-panel {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	margin-top: 12px;
	max-width: 460px;
	padding: 16px;
}

.be-ls-qr {
	margin: 12px 0;
}

.be-ls-qr svg {
	height: auto;
	max-width: 200px;
	width: 100%;
}

#be-ls-totp-secret {
	font-size: 15px;
	letter-spacing: 1px;
}

/* Keeps the key and its copy button on one baseline without letting a long
   key push the button off the row. */
.be-ls-secret {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.be-ls-codes {
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.9;
	margin: 8px 0 12px;
	padding: 12px;
	user-select: all;
}

.be-ls-list {
	margin: 0 0 12px;
}

.be-ls-list li {
	border-bottom: 1px solid #f0f0f1;
	margin: 0;
	padding: 8px 0;
}

.be-ls-list li:last-child {
	border-bottom: 0;
}

.be-ls-list .description {
	margin-left: 8px;
}

.be-ls-list .button-link {
	margin-left: 8px;
}

.be-ls-feedback {
	margin: 8px 0 0;
	min-height: 1.4em;
}

.be-ls-on {
	color: #00a32a;
	margin-right: 8px;
}