dtx-login {
	position: fixed;
	inset: 0;
	display: grid;
	background: var(--background);

	.container {
		grid-area: 1 / 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: auto;
		padding: 56px;
		border: 1px solid var(--border);
		border-radius: 56px 8px;

		/* TODO animate display none */
		&.hidden { display: none; }
	}

	#forgot-password-container { padding-block: 24px; }

	.deputix-logo {
		display: contents;
		color: var(--text);
		font-weight: 600;

		img { width: 64px; }
		span { margin: 4px 4px 28px; }
	}

	form {
		display: flex;
		flex-direction: column;
		gap: 4px;
		align-items: center;

		&.loading {
			--loading-color: var(--text);
			--loading-inset: -14px auto auto calc(50% - 13px);
		}

		span {
			margin: 24px 0;
			color: var(--text-light);
		}

		.row {
			width: 100%;
			justify-content: space-between;
		}

		button { margin-top: 24px; --loading-color: var(--background); }

		.sso {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 4px;
			width: 100%;

			dtx-button { flex: 1 0 1px; }
		}
	}

	.footer {
		position: fixed;
		inset: auto 0 16px;
		font-size: .8rem;

		div {
			display: flex;
			gap: 20px;
			justify-content: center;
		}

		p {
			margin-top: 8px;
			color: var(--text-light);
			text-align: center;
		}
	}
}

/* VIEW TRANSITIONS */
dtx-login #login-container { view-transition-name: login-container-transition; }
dtx-login #forgot-password-container { view-transition-name: forgot-password-container-transition; }

@keyframes slide-from-right {
	from { translate: 50px 0; opacity: 0; }
}
@keyframes slide-to-left {
  to { translate: -50px 0; opacity: 0; }
}

::view-transition-old(login-container-transition) { animation: .3s both slide-to-left; }
::view-transition-new(login-container-transition) { animation: .3s both slide-from-right; }

::view-transition-old(forgot-password-container-transition) { animation: .3s both slide-to-left; }
::view-transition-new(forgot-password-container-transition) { animation: .3s both slide-from-right; }