.login-page {
	display: flex;
	flex-direction: column;

	justify-content: center;

	align-items: center;

	width: 100vw;
	height: 100vh;

	font-family: "Space Grotesk", sans-serif;

	.background {
		position: absolute;

		z-index: 10;

		top: 0;
		left: 0;

		width: 100vw;
		height: 100vh;

		svg {
			margin: 0;

			opacity: 0;

			animation: opacityIn 3s ease-in-out 0s forwards;
		}

		background-image:
			radial-gradient(
				rgba(var(--layout-background-contrast), 0.3) 1px,
				transparent 0
			),
			radial-gradient(
				rgba(var(--layout-background-contrast), 0.3) 1px,
				transparent 0
			);

		background-position:
			0 0,
			25px 25px;
		background-size: 50px 50px;
	}
}

@login-page-card-img-width: 250px;

.login-page-card {
	position: relative;
	z-index: 15;

	display: flex;
	flex-direction: row;

	width: 55vw;
	min-width: 700px;
	max-width: 800px;

	height: 50vh;
	min-height: 500px;
	max-height: 500px;

	background-color: var(--background-color-accent);
	border: 3px solid var(--border-color);

	border-radius: 12px;

	transition: all 250ms ease-in-out;

	overflow: hidden;

	&__background {
		position: absolute;

		left: 0;
		top: 0;

		height: 100%;

		width: calc(@login-page-card-img-width + 10px);
		min-width: calc(@login-page-card-img-width + 10px);

		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

		z-index: 1;
	}

	&__content {
		position: absolute;
		display: flex;
		flex-direction: column;

		right: 0;

		align-items: center;
		justify-content: center;

		width: calc(100% - @login-page-card-img-width);
		min-width: 420px;

		height: 100%;

		gap: 20px;
		padding: 40px;

		outline: 3px solid var(--border-color-solid);
		border-radius: 12px;

		background-color: var(--background-color-accent);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);

		z-index: 2;

		.content_header {
			height: 70px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.actions {
			display: flex;
			flex-direction: column;

			align-items: center;
			justify-content: center;

			width: 100%;

			gap: 15px;

			.ant-btn {
				width: 100%;

				font-weight: 500;
				letter-spacing: -0.6px;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
}

@keyframes opacityIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
