/**
 * Organic Growth - authentication screens.
 *
 * A single centred card. Nothing else is on the page, because the only thing a
 * person on this screen wants is to get past it.
 *
 * @package OrganicGrowth\Core
 * @since   1.5.0
 */

.og-auth {
	display: flex;
	justify-content: center;
	padding: var(--og-space-4) 0 var(--og-space-6);
}

.og-auth__card {
	width: 100%;
	max-width: 420px;
	box-shadow: var(--og-shadow);
}

.og-auth__head {
	text-align: center;
	margin-bottom: var(--og-space-5);
}

.og-auth__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--og-space-3);
	border-radius: var(--og-radius-full);
	background: var(--og-primary-soft);
	color: var(--og-primary);
}

.og-auth__title {
	margin: 0 0 var(--og-space-2);
	font-size: var(--og-text-xl);
}

.og-auth__lead {
	margin: 0;
	color: var(--og-text-muted);
	font-size: var(--og-text-sm);
	line-height: var(--og-leading-normal);
}

.og-auth__notice,
.og-auth__result {
	margin-bottom: var(--og-space-4);
}

.og-auth__options {
	margin-bottom: var(--og-space-4);
	gap: var(--og-space-3);
}

.og-auth__link {
	font-size: var(--og-text-sm);
	font-weight: var(--og-weight-medium);
}

.og-auth__footer {
	text-align: center;
	font-size: var(--og-text-sm);
	color: var(--og-text-muted);
}

.og-auth__resend {
	margin-top: var(--og-space-4);
	padding-top: var(--og-space-4);
	border-top: 1px solid var(--og-border);
	text-align: center;
}

.og-auth__resend p {
	margin-bottom: var(--og-space-2);
}

/* ------------------------------------------------- Input with a button */

.og-input-group {
	position: relative;
	display: flex;
}

.og-input-group .og-input {
	padding-right: 72px;
}

.og-input-group__toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	height: 32px;
	padding: 0 var(--og-space-3);
	border: none;
	border-radius: var(--og-radius-sm);
	background: var(--og-bg-sunken);
	color: var(--og-text-muted);
	font-family: inherit;
	font-size: var(--og-text-xs);
	font-weight: var(--og-weight-medium);
	cursor: pointer;
}

.og-input-group__toggle:hover {
	background: var(--og-border);
	color: var(--og-text);
}

/* Referral codes are read aloud and typed from screenshots. */
.og-input--code {
	font-family: var(--og-font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ------------------------------------------------------ Password meter */

.og-strength {
	display: flex;
	align-items: center;
	gap: var(--og-space-3);
	margin-top: var(--og-space-2);
}

.og-strength__bar {
	flex: 1;
	height: 5px;
	border-radius: var(--og-radius-full);
	background: var(--og-bg-sunken);
	overflow: hidden;
}

.og-strength__bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	transition: width var(--og-transition), background var(--og-transition);
}

.og-strength__label {
	font-size: var(--og-text-xs);
	font-weight: var(--og-weight-medium);
	color: var(--og-text-muted);
	min-width: 62px;
	text-align: right;
}

.og-strength[data-score="0"] .og-strength__bar span,
.og-strength[data-score="1"] .og-strength__bar span {
	width: 25%;
	background: var(--og-danger);
}

.og-strength[data-score="2"] .og-strength__bar span {
	width: 50%;
	background: var(--og-warning);
}

.og-strength[data-score="3"] .og-strength__bar span {
	width: 75%;
	background: var(--og-primary);
}

.og-strength[data-score="4"] .og-strength__bar span {
	width: 100%;
	background: var(--og-success);
}

/* ------------------------------------------------------- The trap field */

/*
 * Positioned far off-screen rather than display:none. Some automated
 * form-fillers skip hidden fields deliberately; almost none check whether a
 * field is merely off-screen. It is also removed from the keyboard order, so a
 * person navigating by Tab never lands on it.
 */

.og-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media ( max-width: 480px ) {

	.og-auth {
		padding-top: 0;
	}

	.og-auth__card {
		max-width: 100%;
	}
}