/*
	Global styles for Stepper framework
	PLEASE AVOID ADDING FLOW OR STEP STYLES HERE.
	IN CASE OF STEPS, PLEASE ADD THEM TO THE STEP'S OWN STYLE.SCSS.
	IN CASE OF FLOWS, PLEASE ADD THEM TO THE FLOW'S OWN STYLE.SCSS.
*/
@import "@automattic/calypso-color-schemes";
@import "@automattic/typography/styles/fonts";
@import "@automattic/onboarding/styles/mixins";
@import "@automattic/onboarding/styles/variables";
@import "@automattic/components/src/styles/typography";

/**
 * Importers styles
 */
@import "calypso/blocks/import/style/base";

body,
button {
	font-family: $sans;
	text-rendering: optimizelegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;

	// Basic stylings
	margin: 0;
	line-height: 1.5;

	h1,
	h2,
	h3,
	p {
		font-family: $sans;
		font-weight: 400;
		margin: 0;
	}

	a,
	a:visited {
		text-decoration: none;
		color: var(--color-link);
	}

	button {
		background-color: transparent;
		border: none;
	}

	ul {
		padding: 0;
	}
}

.accessible-focus {
	.site-setup {
		.button.is-primary:focus {
			box-shadow: 0 0 0 2px var(--color-primary-light);
		}
	}
}

.step-route:has(.step-container-v2) {
	.signup-header {
		display: none;
	}
}

/**
 * Site Setup
 */
.site-setup:not(:has(.step-container-v2)),
.onboarding.goals:not(:has(.step-container-v2)),
.onboarding.design-setup:not(:has(.step-container-v2)),
.onboarding.design-choices:not(:has(.step-container-v2)),
.onboarding.difm-starting-point:not(:has(.step-container-v2)),
.site-migration:not(:has(.step-container-v2)),
.migration,
.plugin-bundle,
.newsletter-setup,
.newsletter-goals,
.domains:not(:has(.step-container-v2)),
.plans:not(:has(.step-container-v2)),
.patterns,
.anchor-fm,
.subscribers,
.copy-site,
.intro,
.free-setup,
.free-post-setup,
.free,
.setup-blog,
.celebration-step,
.use-my-domain:not(:has(.step-container-v2)),
.domain-transfer,
.update-design,
.update-options,
.hundred-year-plan,
.hundred-year-domain,
.entrepreneur,
.generate-content,
.playground:not(:has(.step-container-v2)),
.processing:not(:has(.step-container-v2)),
.create-site:not(:has(.step-container-v2)) {
	box-sizing: border-box;

	.wpcom-loading__boot {
		margin-top: 32vh;
	}

	&.step-route {
		padding: 60px 0 0;

		// Launchpad has its own header
		&.launchpad,
		&.hundred-year-plan {
			margin-top: -60px;
		}

		@include break-small {
			&.courses,
			&.site-picker,
			&.new-or-existing-site,
			&.domains:not(.copy-site):not(.ai-site-builder):not(.domain-and-plan):not(.onboarding):not(.newsletter):not(.readymade-template):not(.reblogging):not(.start-writing) {
				margin-top: -60px;
			}
		}

		@include break-xlarge {
			&.goals,
			&.domains {
				margin-top: -60px;

				.wpcom__loading {
					margin: calc(32vh + 60px) auto 0;
				}
			}
		}

		// Importer flows
		&.site-setup[class*=" import"] {
			padding: 3.75rem 0;
		}
	}

	/**
 	 * Signup Header
 	 */
	.signup-header {
		z-index: 1;

		.wordpress-logo {
			position: absolute;
			inset-block-start: 20px;
			inset-inline-start: 24px;
			fill: var(--color-text);
			transform-origin: 0 0;
		}

		.signup-header__right {
			inset-block-start: 22px;
			inset-inline-start: 20px;

			.flow-progress-indicator {
				font-weight: 500;
				font-size: 0.875rem;
				color: var(--studio-gray-30);
			}
		}

		@include break-small {
			.wordpress-logo {
				inset-inline-start: 24px;
			}

			.signup-header__right {
				inset-inline-end: 24px;
			}
		}
	}

	/**
 	 * Step Container
 	 */
	.step-container {
		.form-fieldset {
			label {
				text-transform: none;
			}
		}
	}

	&:not(:has(.wpcom-domain-search-v2, .domain-search--step-container, .domain-search--step-container-v2)) {
		// While we don't standardize all Calypso interfaces, we need to override this for onboarding flows #79851
		.components-button.is-primary {
			border-radius: 4px;
			font-size: 0.875rem;
			font-weight: 500;
			justify-content: center;

			&[disabled],
			&:disabled,
			&.disabled {
				color: #fff;
				background-color: var(--studio-wordpress-blue-20);
				border-color: var(--studio-wordpress-blue-20);
			}
		}

		.components-button.is-link {
			color: var(--color-accent);

			&:hover:not(:disabled):not(.disabled),
			&:focus:not(:disabled):not(.disabled) {
				color: var(--color-neutral-70);
			}
		}
	}

	// WordPress.org components no longer use blue-50 as the primary color.
	// This changes the primary color to blue-50 to conform to the WordPress.com colors.
	--color-accent: var(--studio-wordpress-blue-50);
	--color-accent-60: var(--studio-wordpress-blue-60);
	--wp-components-color-accent-darker-10: var(--studio-wordpress-blue-60);
	--wp-components-color-accent-darker-20: var(--studio-wordpress-blue-70);
	--wp-components-color-accent: var(--studio-wordpress-blue-50);

}

.step-route.onboarding {
	margin: 0 auto;
}

.intro {
	&:not(.newsletter).signup-header {
		z-index: 0 !important; /* set to 0 to prevent it from covering top of intro modal */
	}
}

/**
 * Tailored flow stylings
 */
.newsletter:not(.domains) {
	&:not(.launchpad):not(.subscribers) {
		@include onboarding-break-mobile-landscape {
			padding: 40px 0 0;
		}
	}

	.step-container {
		.step-container__content h1,
		.step-container__header h1.formatted-header__title {
			font-size: $font-title-medium;
			line-height: 1.2em; /* stylelint-disable-line declaration-property-unit-allowed-list */

			@include break-medium {
				font-size: $font-headline-medium;
			}
		}
	}
}

/*
 * Override font sizes for all newsletter onboarding screens
 */
.newsletter,
.newsletter:not(.domains) {
	.step-container {
		.step-container__content h1,
		.step-container__header h1.formatted-header__title {
			font-size: rem(32px); //typography-exception
			line-height: rem(40px); //typography-exception

			@include break-medium {
				font-size: rem(44px); //typography-exception
				line-height: rem(52px); //typography-exception
			}
		}
		.step-container__header .formatted-header .formatted-header__subtitle {
			font-size: rem(16px); //typography-exception
			line-height: rem(24px); //typography-exception
			font-family: $font-sf-pro-display;
		}
	}
}

.newsletter,
.setup-form__form {
	button {
		&.site-icon-with-picker__upload-button {
			border-radius: 4px;
			border: 1px solid rgba($color: #000, $alpha: 0.2);

			&.site-icon-with-picker__upload-button {
				border-radius: 50%;
				font-family: "SF Pro Text", $sans;
				transition: ease 300ms;

				svg {
					fill: var(--studio-gray-30);
				}

				span {
					font-size: $font-body-extra-small;
				}

				&:hover {
					box-shadow: none;
					outline: none;

					svg {
						fill: var(--studio-wordpress-blue-50);
					}

					span {
						font-size: $font-body-extra-small;

						&.add {
							color: var(--studio-wordpress-blue-50);
						}

						&.replace {
							color: var(--studio-wordpress-blue-50);
						}
					}
				}
				&:focus {
					background-color: var(--studio-wordpress-blue-50);
					box-shadow: none;
					svg {
						fill: #fff;
					}
					span {
						color: var(--studio-wordpress-blue-50);
					}
				}
			}
		}
	}

	fieldset {
		label {
			font-size: $font-body;
			color: var(--studio-gray-60);
			font-weight: 500;
		}
	}

	&.intro {
		button.intro__button {
			border-radius: 4px;
			background-color: var(--studio-gray-100);
			transition: ease 300ms;

			&:hover,
			&:focus {
				background-color: var(--studio-gray-70);
			}

			&:focus {
				border: none;
				outline: solid 2px var(--studio-gray-70);
				outline-offset: 2px;
				box-shadow: none;
			}
		}
	}
}

.free,
.free-post-setup,
.update-design {
	.signup-header h1 {
		display: none;
	}
}

/**
 * Global notices
 */
#notices {
	top: 0;

	@media (min-width: 661px) {
		top: 16px;
	}

	.gridicon {
		fill: currentColor;
	}
}

/*
 * Site Migration flow adjustments
 */

.site-migration {
	.step-container.site-picker {
		max-width: 1280px;
	}

	.step-container.site-picker .step-container__content {
		max-width: 100%;
	}
}
