body:is([data-mode^="login"], [data-mode="logout"]){
	color-scheme: dark;

	--logo-brand: url('../../../../core/api/styles/brand/logo.png');

	--login-page-background: var(--clr-400);
	--login-page-background-image: url('imgs/login-background.jpg');

	--login-background: hsla(0, 0%, 0%, .85);
	--login-logo: var(--logo-brand);
	--login-logo-height: 2.5lh;
	--login-logo-margin-block: 3lh 2lh;
	--login-logo-margin-inline: 1ch;
	--login-text-color: var(--clr-100);
	--login-text-color-alt: var(--clr-150);
	--login-placeholder: var(--clr-300);

	--login-action-bg: var(--clr-100);
	--login-action-color: var(--clr-700);
	--login-action-bg-hover: var(--color-brand);
	--login-action-color-hover: var(--color-brand-on);

	--login-warning-background: transparent;
	--login-warning-color: indianred;

	grid-template-rows: auto;
	grid-template-areas: 'content';

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-color: var(--login-page-background);
	background-image: var(--login-page-background-image);

	header#page-header {
		display: none;
	}
	footer#page-footer {
		display: none;
	}
	main {
		background: transparent;
		color: var(--login-text-color);
	}
	fieldset {
		background: transparent;
		border: none;
		margin: 0;
		padding: 0;
	}
	a {
		color: inherit;
	}
	a:hover {
		color: var(--color-brand);
	}
	input:is([type="text"], [type="email"], [type="password"]){
		width: 100%;
		color: revert;
		background: revert;

		&::placeholder {
			color: revert;
		}
	}
	legend {
		position: static;
		background-color: transparent;
		border: none;
		color: inherit;
		padding: 0;
		margin: 0;
		font-weight: var(--fw-normal);

		&::before {
			display: none;
		}
	}
	button {
		--_timing: 125ms;

		background: var(--login-action-bg);
		color: var(--login-action-color);
		transition:
			background-color var(--_timing) ease,
			color var(--_timing) ease;

		&:is(:focus-visible, :hover){
			background: var(--login-action-bg-hover);
			color: var(--login-action-color-hover);
		}
	}

	section#main-container {
		align-self: stretch;

		display: grid;
		grid-template-columns: min(100%, clamp(60ch, 30dvw, 74ch)) 1fr;
		margin: 0;
		padding: 0;
		width: auto;
		max-width: 100dvh;
	}
	.login-container {
		background: var(--login-background);
		align-self: stretch;
		display: grid;
		grid-template-rows: auto 1fr;
	}

	.login-header {
		min-height: var(--login-logo-height);
		margin-block: var(--login-logo-margin-block);
		margin-inline: var(--login-logo-margin-inline);

		.login-logo {
			height: 100%;
			background-image: var(--login-logo);
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
		}
	}

	.login-form {
		margin-inline: auto;
		width: 100%;
		max-width: 40ch;
		margin-block: 2lh;
		align-self: start;
		display: grid;
		grid-auto-flow: row;
		justify-items: center;
		align-items: start;
	}
	.login-fields {
		width: 100%;
		display: grid;
		grid-auto-flow: row;
		gap: .5lh 0;
		margin-block: 1lh;

		.login-legend {
			margin-block: .25lh;
		}
		.login-legend-desc {
			font-size: var(--fs-small);
			color: var(--login-text-color-alt);
		}
		.login-lost-link {
			margin-block: 1lh;
			text-align: center;
		}
	}
	.login-commands {
		margin-block: 1lh;
	}

	div#warnings {
		max-width: 40ch;
		margin-inline: auto;
		padding: 1em;
		border: none;
		background: var(--login-warning-background);
		color: var(--login-warning-color);
	}
	div#feeback-main-container a {
		color: var(--login-warning-color);
	}
	.errormsg {
		margin-block: 1lh;
	}
	.errorback-container {
		display: flex;
		flex-flow: column nowrap;
	}
}