@layer layout {
	body {
		background-color: var(--bs-primary);
	}

	.login-page {
		background-color: var(--bs-secondary-bg);
		color: var(--bs-body-color);

		.users-count-digits {
			font-size: 2rem;
			line-height: 1.5;

			div {
				width: 2rem;
			}

		}

		.login-form-column {
			display: none;
		}

		.login-form-block {
			border-top-left-radius: var(--bs-border-radius-xxl);
			border-top-right-radius: var(--bs-border-radius-xxl);
		}

		.login-form {
			max-width: 20.4rem;
		}

		@media (min-width:768px) {
			.login-form-column {
				display: block;
			}

			.login-form-block {
				border-radius: var(--bs-border-radius-xxl);
			}

			.users-count-digits {
				font-size: 4rem;

				div {
					width: 4rem;
				}

			}

			.users-count-description {
				font-size: 1.5rem;
			}

			.presentation {
				.btn {
					--bs-btn-font-size: calc(var(--btn-font-size) * 1.25);
				}

			}

		}

	}

	.show-mobile-login-form {
		.login-form-column {
			display: block;
			position: fixed;
			bottom: 0;
			left: 0;
			max-height: 80dvh;
			overflow-y: auto;
		}

		.mobile-form-opener .btn::before {
			content: "";
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background: var(--bs-primary);
			opacity: 0.5;
		}

	}

}