@import "@automattic/onboarding/styles/mixins";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

$breakpoint-mobile: 782px; //Mobile size.

form {
	margin-left: auto;
	margin-right: auto;
	align-items: center;

	@include break-medium {
		align-items: unset;
	}
}

.layout:not(.is-grav-powered-client) {
	.login {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 2rem; // Should match OneLoginLayout styles.
	}

	form {
		max-width: 400px;

		&.is-social-first {
			display: flex;
			flex-direction: column;
			justify-content: center;
			max-width: 758px;
			margin: 0;

			@media (min-width: $breakpoint-mobile) {
				flex-direction: row;
			}

			.card.login__form,
			.card.auth-form__social {
				width: 100%;
				max-width: var(--login-form-column-max-width);
				margin: 0;
			}

			.card.login__form:not(:lang(en)):not(:lang(ko)):not(:lang(zh)),
			.card.auth-form__social:not(:lang(en)):not(:lang(ko)):not(:lang(zh)) {
				flex-shrink: 0;
			}

			.card.login__form {
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 16px;
			}
			.login-form__validation-error-wrapper {
				margin-bottom: 0;
			}
		}
	}
}

.is-jetpack .login__form-account-tip {
	margin-block-start: -8px;
	font-size: 0.75rem;
}

.login__form-jetpack {
	.card.login__form {
		box-shadow: none;
		padding: 16px 16px 24px;
		clip-path: unset;

		@include break-mobile {
			padding: 16px 0 24px;
		}
	}

	.login__form-jetpack-terms {
		margin-top: 24px;
		color: var(--studio-gray-50, #646970);

		@include body-small;
		line-height: 20px;
		word-wrap: break-word;

		a {
			color: var(--studio-gray-50, #646970);
			text-decoration: underline;
		}
	}
}
