@import "@automattic/typography/styles/variables";
@import "@wordpress/base-styles/breakpoints";

$recoleta-font-family: "Recoleta", sans-serif;
$font-sf-pro-text: "SF Pro Text", $sans;
body.is-section-accept-invite {
	.logged-out-wp-logo {
		position: absolute;
		left: 24px;
		top: 24px;
	}
	background: #fdfdfd;
	.invite-accept {
		padding-top: 50px;
		height: calc(100vh - 100px);
	}
	.invite-accept__form {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.layout__content {
		padding: 24px;
	}
}
.invite-accept-logged-out-wrapper {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	flex: 1;
	box-sizing: border-box;
	font-family: $font-sf-pro-text;

	.invite-form-header {
		flex: 0.5;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		max-height: 340px;
	}

	.invite-form-header__title {
		color: var(--studio-gray-100, #2c3338);
		text-align: center;
		font-family: $recoleta-font-family;
		font-size: 2rem;
		line-height: 1.26;
		a {
			text-decoration: none;
		}
	}

	.invite-form-header__explanation {
		color: var(--studio-gray-50, #2c3338);
		text-align: center;
		margin-top: 6px;
		font-size: 14px;
	}

	.card.logged-out-form {
		box-shadow: none;
		padding: 0;
		margin: 0 auto;
		background: none;

		button.is-primary {
			border-radius: 2px;
			border: 1px solid var(--studio-wordpress-blue, #3858e9);
			background: var(--studio-wordpress-blue, #3858e9);
			height: 48px;
			font-weight: 500;
			&:hover {
				background: var(--studio-wordpress-blue-60);
			}
			&:focus {
				background-color: var(--studio-wordpress-blue-60);
				border-color: var(--studio-wordpress-blue-60);
				color: var(--color-text-inverted);
				box-shadow: none;
			}
			&:disabled {
				background: var(--studio-gray-20);
				border: 1px solid var(--studio-gray-20);
				color: var(--color-surface);
			}
		}
		label.form-label {
			color: var(--studio-gray-60, #50575e);
			font-size: 0.875rem;
			font-weight: 500;
			line-height: 20px;
			margin-bottom: 8px;
		}
		.form-fieldset {
			margin-bottom: 0;
		}
	}
	.signup-form {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.signup-form__passwordless-form-wrapper {
		.signup-form__terms-of-service-link {
			margin: 30px 0 16px;
			color: var(--studio-gray-50, #2c3338);
			font-size: $font-body-small; // 14px
			line-height: 20px;
		}
	}

	.card.logged-out-form__footer {
		margin: 16px 0;
		padding: 0;
	}
	.logged-out-form__link-item {
		color: var(--color-link);
		font-size: 12px;
	}
}
