/*
 * Layout and component styling for wp-login.php.
 *
 * The var() fallbacks here are real design defaults, not a way of leaving
 * WordPress's own styling alone: this module replaces the login page's look
 * wholesale, so a page with nothing configured still has to look finished.
 */

body.wsl-login {
	/*
	 * The image takes its configured share of the page, but never so much
	 * that the form panel becomes unusable. At a 70/30 split a 1100px
	 * laptop would otherwise leave the form about 230px wide; this gives
	 * the panel a floor and lets the photo yield instead.
	 */
	--wsl-image-actual: min(
		var( --wsl-image-width, 62% ),
		calc( 100% - var( --wsl-panel-min, 360px ) )
	);

	/*
	 * The font stacks. Style_Generator always emits both, so the fallbacks
	 * here only matter if this stylesheet is ever loaded without it — but
	 * they still have to end in a real family. `inherit` used to sit here,
	 * which on wp-login.php resolves to the browser's default serif.
	 */
	--wsl-font-stack: var( --wsl-font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif );
	--wsl-font-heading-stack: var( --wsl-font-heading, var( --wsl-font-stack ) );

	background: var( --wsl-panel-bg, #fff );
	color: var( --wsl-text, #545c61 );
	font-family: var( --wsl-font-stack );
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}

/*
 * Form controls do not inherit font-family: browsers give input, button,
 * select and textarea a UA default of their own. Without this the labels
 * render in the brand font while the fields and the submit button next to
 * them stay in the browser's default — half a styled form, which is exactly
 * what this looked like before.
 */
body.wsl-login input,
body.wsl-login button,
body.wsl-login select,
body.wsl-login textarea {
	font-family: inherit;
}

/*
 * The image panel. Fixed, so the form scrolls over a still background.
 *
 * The photo sits inset inside its slot rather than bleeding to the edges:
 * the slot still takes its configured share of the page, and the inset reads
 * as a frame of page colour on all four sides — including the gap between
 * the photo and the form panel.
 */
body.wsl-login.wsl-has-image::before {
	content: "";
	position: fixed;
	top: var( --wsl-image-inset, 0px );
	bottom: var( --wsl-image-inset, 0px );
	width: calc( var( --wsl-image-actual ) - var( --wsl-image-inset, 0px ) * 2 );
	border-radius: var( --wsl-image-radius, 0px );
	background-image: var( --wsl-image );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

body.wsl-login.wsl-has-image.wsl-image-left::before {
	left: var( --wsl-image-inset, 0px );
}

body.wsl-login.wsl-has-image.wsl-image-right::before {
	right: var( --wsl-image-inset, 0px );
}

body.wsl-login.wsl-has-image.wsl-image-left {
	padding-left: var( --wsl-image-actual );
}

body.wsl-login.wsl-has-image.wsl-image-right {
	padding-right: var( --wsl-image-actual );
}

/* Optional mark over the photo, bottom-left. */
body.wsl-login.wsl-has-image::after {
	content: "";
	position: fixed;
	bottom: calc( var( --wsl-image-inset, 0px ) + 40px );
	width: var( --wsl-overlay-width, 220px );
	aspect-ratio: 4 / 1;
	background-image: var( --wsl-overlay );
	background-size: contain;
	background-position: left bottom;
	background-repeat: no-repeat;
}

body.wsl-login.wsl-image-left::after {
	left: calc( var( --wsl-image-inset, 0px ) + 40px );
}

body.wsl-login.wsl-image-right::after {
	right: calc( var( --wsl-image-inset, 0px ) + 40px );
}

body.wsl-login #login {
	width: min( var( --wsl-form-width, 400px ), 84% );
	max-width: none;
	margin: 0 auto;
	padding: 40px 0;
}

/* The logo replaces core's WordPress mark, which is a background image on
   an anchor whose text core has already pushed out of view. */
body.wsl-login #login h1 {
	margin: 0 0 24px;
	text-align: center;
	font-family: var( --wsl-font-heading-stack );
}

body.wsl-login.wsl-has-logo #login h1 a {
	background-image: var( --wsl-logo );
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: min( var( --wsl-logo-width, 260px ), 100% );
	height: 56px;
	margin: 0 auto;
}

body.wsl-login .wsl-heading {
	margin: 0 0 28px;
	text-align: center;
	font-family: var( --wsl-font-heading-stack );
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var( --wsl-heading, #14161b );
}

body.wsl-login #login form {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin-top: 0;
	overflow: visible;
}

/*
 * Two columns so "Remember Me" and the lost-password link share a row.
 * Everything else spans both. The link is rendered at `login_form`, which
 * fires before the remember-me paragraph, so the row is stated explicitly
 * rather than left to auto-placement.
 */
body.wsl-login #loginform {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 18px 12px;
}

body.wsl-login #loginform > * {
	grid-column: 1 / -1;
	margin: 0;
}

body.wsl-login #loginform > .wsl-lost {
	grid-column: 2;
	grid-row: 3;
	justify-self: end;
	align-self: center;
}

body.wsl-login #loginform > .forgetmenot {
	grid-column: 1;
	grid-row: 3;
	display: flex;
	align-items: center;
	gap: 8px;
}

body.wsl-login #loginform label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	color: var( --wsl-heading, #14161b );
}

body.wsl-login #loginform .forgetmenot label {
	margin-bottom: 0;
	font-size: 13px;
}

body.wsl-login #loginform input[type="text"],
body.wsl-login #loginform input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	font-size: 15px;
	line-height: 1.4;
	background: var( --wsl-field-bg, #fff );
	color: var( --wsl-field-text, #14161b );
	border: 1px solid var( --wsl-field-border, #d7dbe0 );
	border-radius: var( --wsl-radius, 6px );
	box-shadow: none;
	margin: 0;
}

body.wsl-login #loginform input[type="text"]:focus,
body.wsl-login #loginform input[type="password"]:focus {
	border-color: var( --wsl-field-focus, #28a4de );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --wsl-field-focus, #28a4de ) 25%, transparent );
	outline: 2px solid transparent;
}

/* Core's show/hide-password button sits inside .wp-pwd. */
body.wsl-login .wp-pwd {
	position: relative;
	display: block;
}

body.wsl-login .wp-pwd input[type="password"],
body.wsl-login .wp-pwd input[type="text"] {
	padding-right: 44px;
}

body.wsl-login .wp-pwd .wp-hide-pw {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY( -50% );
	background: none;
	border: 0;
	box-shadow: none;
	color: var( --wsl-text, #545c61 );
	padding: 6px;
	min-height: 0;
	line-height: 1;
}

body.wsl-login #loginform input[type="checkbox"] {
	border-color: var( --wsl-field-border, #d7dbe0 );
	border-radius: 3px;
	margin: 0;
}

body.wsl-login #loginform input[type="checkbox"]:checked {
	background: var( --wsl-field-focus, #28a4de );
	border-color: var( --wsl-field-focus, #28a4de );
}

body.wsl-login #loginform input[type="checkbox"]:checked::before {
	content: "";
}

body.wsl-login #wp-submit {
	width: 100%;
	padding: 12px 16px;
	height: auto;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	background: var( --wsl-button-bg, #1d2939 );
	border-color: var( --wsl-button-bg, #1d2939 );
	color: var( --wsl-button-text, #fff );
	border-radius: var( --wsl-radius, 6px );
	box-shadow: none;
	text-shadow: none;
	transition: background-color 200ms ease, border-color 200ms ease;
}

body.wsl-login #wp-submit:hover,
body.wsl-login #wp-submit:focus {
	background: var( --wsl-button-bg-hover, #1e69a6 );
	border-color: var( --wsl-button-bg-hover, #1e69a6 );
	color: var( --wsl-button-text, #fff );
}

body.wsl-login a {
	color: var( --wsl-link, #1e69a6 );
	text-decoration: none;
}

body.wsl-login a:hover,
body.wsl-login a:focus {
	text-decoration: underline;
}

body.wsl-login .wsl-lost a,
body.wsl-login #nav a {
	font-size: 13px;
}

body.wsl-login #nav,
body.wsl-login #backtoblog {
	text-align: center;
	padding: 16px 0 0;
	margin: 0;
}

/* The lost-password link is rendered inside the form instead. */
body.wsl-login #nav .wp-login-lost-password {
	display: none;
}

body.wsl-login.wsl-no-register #nav,
body.wsl-login.wsl-hide-back #backtoblog,
body.wsl-login.wsl-hide-language .language-switcher {
	display: none;
}

body.wsl-login .wsl-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 20px;
	text-align: center;
	font-size: 13px;
	color: var( --wsl-text, #545c61 );
}

body.wsl-login.wsl-has-image.wsl-image-left .wsl-footer {
	left: var( --wsl-image-actual );
}

body.wsl-login.wsl-has-image.wsl-image-right .wsl-footer {
	right: var( --wsl-image-actual );
}

body.wsl-login #login_error,
body.wsl-login .message,
body.wsl-login .notice {
	border-radius: var( --wsl-radius, 6px );
	margin: 0 0 20px;
}

/* Below this the photo costs more than it gives: the form takes the page. */
@media screen and ( max-width: 900px ) {
	body.wsl-login.wsl-has-image::before,
	body.wsl-login.wsl-has-image::after {
		display: none;
	}

	body.wsl-login.wsl-has-image.wsl-image-left,
	body.wsl-login.wsl-has-image.wsl-image-right {
		padding-left: 0;
		padding-right: 0;
	}

	body.wsl-login.wsl-has-image.wsl-image-left .wsl-footer,
	body.wsl-login.wsl-has-image.wsl-image-right .wsl-footer {
		left: 0;
		right: 0;
	}
}