/*
 * Citizen
 *
 * SkinStyles for MediaWiki
 * Module: mediawiki.special.userlogin.login.styles
 * Version: REL1_39
 *
 * Date: 2022-11-23
*/
#userloginForm {
	> .mw-htmlform > div {
		// Allow to reorder the form through CSS
		display: flex;
		flex-direction: column;
	}

	// Message box
	.mw-message-box {
		order: -4;
		margin-bottom: var( --space-md );
	}

	// Username field
	.loginText {
		order: -3;
	}

	// Password field
	.loginPassword {
		order: -2;
	}

	// Forgot password field
	// HACK: Move to the bottom of the password field
	.mw-userlogin-help + .mw-form-related-link-container {
		order: -1;
		margin-top: ~'calc( var(--space-sm) * -1 )';
		font-size: var( --font-size-small );
		text-align: end;
	}

	.mw-userlogin-rememberme {
		font-size: var( --font-size-small );
	}
}

#mw-createaccount-cta {
	width: auto; // should align to the rest of the form
	margin-top: var( --space-md );
	color: var( --color-emphasized );
	border-top: var( --border-width-base ) solid var( --border-color-base );
}

#mw-createaccount-join {
	color: var( --color-progressive );
	background-color: var( --color-surface-2 );

	&:hover {
		background-color: var( --color-surface-2--hover );
		border-color: transparent;
	}

	&:active {
		color: var( --color-progressive );
		background-color: var( --color-surface-2--active );
		border-color: transparent;
	}

	&:focus {
		border-color: var( --color-progressive );
		box-shadow: inset 0 0 0 1px var( --color-progressive );
	}
}
