@import '@automattic/onboarding/styles/mixins';
@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '@automattic/calypso-color-schemes';
@import '@automattic/typography/styles/variables';

.grav-powered-magic-login__form-header {
	font-size: $font-title-small;
	margin-bottom: 24px;
	margin-top: 16px;
	text-align: center;

	body.is-section-signup & {
		color: var( --color-text-inverted );
	}
}

/* stylelint-disable scales/font-weights */
.grav-powered-magic-login {
	max-width: 480px;
	font-size: 14px;
	line-height: 1.5;

	&.grav-powered-magic-login--has-sub-header {
		.grav-powered-magic-login__form-header {
			margin-bottom: 3px;
		}
	}

	&.grav-powered-magic-login--wp-job-manager {
		max-width: 560px;
		font-size: 16px;

		a,
		.grav-powered-magic-login__content a,
		.grav-powered-magic-login__footer button {
			color: #2404eb;
		}

		.magic-login__form-action button[type='submit'].components-button.is-primary {
			min-height: unset;
			margin-top: 0;
			border-radius: 2px;

			&.is-busy {
				background-image: linear-gradient(
					-45deg,
					#2404eb 33%,
					darken( #2404eb, 10% ) 33%,
					darken( #2404eb, 10% ) 70%,
					#2404eb 70%
				);
			}

			&,
			&:disabled {
				background-color: #2404eb;
			}

			&:hover:not( &:disabled ),
			&:focus {
				background-color: darken( #2404eb, 10% );
			}
		}

		.grav-powered-magic-login__content {
			padding-left: 30px;
			padding-right: 30px;
			border-radius: 2px;

			.calypso-notice__icon-wrapper {
				display: flex;
			}

			.calypso-notice__content {
				padding: 13px 13px 13px 0;
			}
		}

		.grav-powered-magic-login__header,
		.grav-powered-magic-login__form-header {
			font-size: 24px;
			margin: 32px 0 24px;
		}

		.grav-powered-magic-login__sub-header {
			margin-bottom: 52px;
		}

		.grav-powered-magic-login__tos {
			margin: 32px 0 20px;
			text-align: center;
			font-size: 13px;
		}

		.grav-powered-magic-login__divider {
			background-color: #e7e9ea;
			width: 80px;
			margin: 20px 0;

			&.grav-powered-magic-login__divider--email-form {
				margin-left: auto;
				margin-right: auto;
			}
		}

		.grav-powered-magic-login__footer {
			align-items: start;
			gap: 16px;
			font-size: 15px;
			color: #949494;
			margin-top: 0;

			&.grav-powered-magic-login__footer--email-form {
				font-size: 16px;
				align-items: center;
			}
		}
	}

	button[type='submit'].form-button.is-primary,
	.magic-login__form-action button[type='submit'].components-button.is-primary {
		width: 100%;
		min-height: 50px;
		margin-top: 24px;
		border-radius: 4px;

		&.is-busy {
			background-image: linear-gradient(
				-50deg,
				#1d4fc4 33%,
				darken( #1d4fc4, 10% ) 33%,
				darken( #1d4fc4, 10% ) 70%,
				#1d4fc4 70%
			);
		}

		&:disabled {
			opacity: 0.3;
			color: #fff;
			cursor: not-allowed;
		}
	}

	.grav-powered-magic-login__content,
	.grav-powered-magic-login__gravatar-info,
	input[type='text'].form-text-input,
	button {
		font-family:
			'SF Pro Text',
			-apple-system,
			BlinkMacSystemFont,
			'Segoe UI',
			Roboto,
			Oxygen-Sans,
			Ubuntu,
			Cantarell,
			'Helvetica Neue',
			sans-serif;
	}

	.grav-powered-magic-login__content {
		background-color: #fff;
		color: #101517;
		border-radius: 8px;
		padding: 20px;

		.calypso-notice__icon-wrapper {
			display: none;
		}

		.calypso-notice__content {
			padding: 10px 0 0;
		}

		a {
			color: #1d4fc4;
			text-decoration: underline;
		}
	}

	.grav-powered-magic-login__header,
	.grav-powered-magic-login__form-header {
		font-family:
			'SF Pro Display',
			-apple-system,
			BlinkMacSystemFont,
			'Segoe UI',
			Roboto,
			Oxygen-Sans,
			Ubuntu,
			Cantarell,
			'Helvetica Neue',
			sans-serif;
		font-size: 32px;
		font-weight: 900;
		line-height: 1.2;
		text-align: left;
		margin: 24px 0;
	}

	.grav-powered-magic-login__sub-header,
	p.grav-powered-magic-login__form-sub-header {
		margin-bottom: 24px;
	}

	.grav-powered-magic-login__sub-header {
		word-break: break-word;

		strong {
			font-weight: 700;
		}
	}

	p.grav-powered-magic-login__form-sub-header {
		font-size: 13px;
		color: #50575e;
	}

	.grav-powered-magic-login__account-info {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.grav-powered-magic-login__masked-email-address {
		margin-right: 10px;
		word-break: break-word;

		strong {
			font-weight: 700;
		}
	}

	.magic-login__form .logged-out-form {
		max-width: 100%;
		padding: 0;
		box-shadow: none;
	}

	.magic-login__email-fields {
		margin-bottom: 0;
	}

	// Hide the label, but keep it for accessibility
	.form-label {
		position: absolute;
		clip: rect( 0 0 0 0 );
	}

	input[type='text'].form-text-input {
		padding: 14px 16px;
		border-color: #9ea4a8;
		line-height: 1.5;

		&::placeholder {
			color: #9ea4a8;
		}
	}

	.grav-powered-magic-login__tos {
		margin-bottom: 24px;
		color: rgba( #00101c, 0.6 );
	}

	.magic-login__form-action {
		margin-top: 0;
	}

	.grav-powered-magic-login__feature-items {
		display: flex;
		flex-direction: column;
		gap: 24px;
		margin: 40px 0;
	}

	.grav-powered-magic-login__feature-item {
		display: flex;
		align-items: center;
		font-size: 13px;
	}

	.grav-powered-magic-login__feature-icon {
		margin-right: 10px;
	}

	.grav-powered-magic-login__feature-header {
		font-weight: 700;
	}

	.grav-powered-magic-login__feature-sub-header {
		color: #50575e;
		margin-bottom: 0;
	}

	.grav-powered-magic-login__verification-code-form {
		display: flex;
		flex-direction: column;
		margin-top: 24px;
	}

	.grav-powered-magic-login__account-options {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin: 40px 0 24px;
	}

	.grav-powered-magic-login__account-option {
		display: flex;
		align-items: center;
		padding: 20px;
		border: 1px solid #f0f0f0;
		border-radius: 4px;
		gap: 20px;
		cursor: pointer;

		&::before {
			content: '';
			display: inline-block;
			min-width: 19px;
			min-height: 20px;
			background-image: url( data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC41IiB5PSIxIiB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHJ4PSI5LjUiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjAuNSIgeT0iMSIgd2lkdGg9IjE5IiBoZWlnaHQ9IjE5IiByeD0iOS41IiBzdHJva2U9IiM5NDk0OTQiLz4KPC9zdmc+Cg== );
			background-size: cover;
		}

		&:disabled {
			opacity: 0.5;
		}

		&.grav-powered-magic-login__account-option--selected {
			background: #f0f0f0;

			&::before {
				background-image: url( data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iMC41IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHJ4PSIxMCIgZmlsbD0iIzM4NThFOSIvPgo8cmVjdCB4PSI2IiB5PSI2LjUiIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHJ4PSI0IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K );
			}
		}
	}

	.grav-powered-magic-login__footer {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		font-size: 16px;
		line-height: 1;
		margin-top: 24px;
		gap: 24px;

		button {
			color: #1d4fc4;
			font-size: inherit;
			text-align: left;
			cursor: pointer;
			text-decoration: underline;

			&:disabled {
				opacity: 0.3;
				cursor: not-allowed;
			}
		}
	}

	.grav-powered-magic-login__show-magic-login {
		margin-top: 16px;
	}

	.grav-powered-magic-login__gravatar-info {
		margin-top: 32px;
		padding: 0 30px;
	}

	.grav-powered-magic-login__gravatar-info-heading {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: rgba( #00101c, 0.8 );
		margin-bottom: 20px;

		img {
			margin-right: 8px;
		}
	}

	.grav-powered-magic-login__gravatar-info-items {
		display: flex;
		flex-direction: column;
		gap: 10px;
		font-size: 13px;
		color: #646970;
	}

	.gridicons-checkmark {
		margin-right: 8px;
		transform: translateY( 4px );
	}

	@include break-small {
		&.grav-powered-magic-login--wp-job-manager {
			.grav-powered-magic-login__content {
				padding-left: 56px;
				padding-right: 56px;
			}

			.grav-powered-magic-login__header,
			.grav-powered-magic-login__form-header {
				font-size: 40px;
				margin-top: 48px;
			}

			.grav-powered-magic-login__sub-header {
				margin-bottom: 80px;

				strong {
					display: block;
				}
			}

			.grav-powered-magic-login__tos {
				margin-top: 44px;
			}

			.grav-powered-magic-login__footer {
				flex-direction: column;
			}
		}

		.grav-powered-magic-login__content {
			padding: 40px 56px;
		}

		.grav-powered-magic-login__header,
		.grav-powered-magic-login__form-header {
			font-size: 40px;
		}

		.grav-powered-magic-login__form-header,
		p.grav-powered-magic-login__form-sub-header {
			margin-bottom: 40px;
		}

		.grav-powered-magic-login__footer {
			flex-direction: row;
			justify-content: space-between;
			gap: 0;

			&.grav-powered-magic-login__footer--vertical {
				flex-direction: column;
				align-items: start;
				gap: 16px;
			}
		}

		.grav-powered-magic-login__show-magic-login {
			margin-top: 0;
		}

		.grav-powered-magic-login__gravatar-info {
			margin-top: 40px;
			padding: unset;
		}
	}
}

.grav-powered-magic-link {
	display: flex;
	flex-direction: column;
	align-items: center;

	&.grav-powered-magic-link--wp-job-manager .button.is-primary {
		background-color: #2404eb;
	}

	.button.is-primary {
		height: 42px;
		font-family:
			'SF Pro Text',
			-apple-system,
			BlinkMacSystemFont,
			'Segoe UI',
			Roboto,
			Oxygen-Sans,
			Ubuntu,
			Cantarell,
			'Helvetica Neue',
			sans-serif;
		background-color: #1d4fc4;
		font-size: 16px;
		font-weight: 600;
		color: #fff;
		border: none;
	}
}
/* stylelint-enable scales/font-weights */
