@import '@automattic/onboarding/styles/mixins';

/**
 * A different selector (not `.step-container.${flowName}`) is needed for the 100-year domain transfer
 * since it's just a variation of the `domain-transfer` flow, and variations aren't accounted for
 * in the StepContainer component. Then, we need to use a parent selector (which at the time of writing,
 * uses the name, variant and step of the flow) to target this flow within these styles.
 */
.step-container.hundred-year-plan.hundred-year-plan,
.step-container.hundred-year-domain.hundred-year-domain,
.hundred-year-domain-transfer > .step-container.domain-transfer {
	&,
	.domain-search-legacy--stepper & {
		max-width: none;
		height: 100%;
		padding: 0;

		.step-container__content {
			min-height: 100%;
		}

		.step-container__navigation.action-buttons .step-container__navigation-logo {
			fill: var( --studio-gray-0 );
			stroke: var( --studio-gray-0 );
		}

		.hundred-year-plan-step-wrapper__info-column-container {
			@media ( min-width: 960px ) {
				background-image: url( calypso/assets/images/hundred-year-plan-onboarding/stars-solo.webp );
				background-color: #000;
			}

			.is-price-loading {
				@include onboarding-placeholder;
				width: 100px;
			}
		}

		&.step-container.domain-transfer {
			margin-top: 0;
			width: 100%;

			.hundred-year-plan-step-wrapper__step-container {
				max-width: $break-large;
				box-sizing: border-box;
				padding: 0 20px;
			}

			.hundred-year-plan-step-wrapper__info-column-container {
				.is-price-loading {
					@include onboarding-placeholder;
					width: 100px;
				}
			}
		}
	}
}

.hundred-year-plan.step-route,
.hundred-year-domain.step-route {
	.signup-header {
		display: none;
	}
}

.hundred-year-plan-step-wrapper__step-container:has( .domain-search ) {
	width: 100%;

	.domains__content {
		padding: 0 16px;
		margin: 0 auto;
		max-width: 780px;
	}
}
