/* Page Layout - Login */
////
/// @group Layout-Login
/// Page Layout - Login

///
.login {
	&-screen {
		align-items: center;
		background-color: var(--color-primary);
		display: flex;
		height: 100%;
		justify-content: center;

		& > img {
			@include absolute-left-top();
			height: 100%;
			object-fit: cover;
			width: 100%;
		}
	}

	&-form {
		background-color: var(--color-neutral-0);
		border-radius: var(--border-radius-soft);
		box-shadow: var(--shadow-l);
		min-width: 435px;
		padding: var(--space-xxl);
		z-index: var(--layer-global-screen);
	}
}

///
.layout-native {
	.login {
		&-screen {
			background-color: var(--color-background-login);
			padding: var(--os-safe-area-top) var(--os-safe-area-right) var(--os-safe-area-bottom)
				var(--os-safe-area-left);
		}

		&-form {
			border-radius: 0;
			box-shadow: none;
		}
	}
}

///
.login-button {
	[data-block*='ButtonLoading'] {
		&,
		& > div {
			// Service Studio Preview
			-servicestudio-width: 100% !important;
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.android[data-status-bar-height] .layout-native .login-screen {
	padding-top: var(--status-bar-height);
}

///
.phone {
	.login-form {
		margin: var(--space-none) var(--space-base);
		min-width: auto;
		padding: var(--space-l);
		width: 100%;
	}

	.layout-native {
		.login {
			&-form {
				background: transparent;
				margin: 0;
			}

			&-button .btn {
				padding-bottom: var(--os-safe-area-bottom);
			}
		}

		&.blank .login-button .btn {
			padding-bottom: var(--space-none);
		}
	}
}