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

.step-container-v2--new-or-existing-site {
	.select-items__item {
		width: auto;
	}

	.select-items__item-info-wrapper {
		align-items: center;
	}
}

.new-or-existing-site__free-domain-promo {
	color: var(--studio-green-60);
}

.hundred-year-plan-step-wrapper.new-or-existing-site {
	.formatted-header {
		.formatted-header__title {
			font-size: rem(32px);
			@include break-small {
				font-size: rem(44px);
			}
		}
		margin: 32px 24px 0 24px;
		@include break-small {
			margin-top: 72px;
		}
	}

	.select-items {
		margin-inline-start: 16px;
		margin-inline-end: 18px;

		.select-items__item {
			max-width: 507px;
			@include break-small {
				width: 100%;
			}

			@include break-medium {
				width: 100%;
			}
		}

		.button.select-items__item-button {
			width: 140px;
		}
	}
}

.start-writing {
	&.new-or-existing-site {
		.step-container__header {
			margin-top: 0;
		}

		.signup-header {
			.wordpress-logo {
				position: absolute;
				inset-block-start: 20px;
				inset-inline-start: 24px;
				fill: var(--color-text);
				transform-origin: 0 0;
			}
		}
		.formatted-header {
			.formatted-header__title {
				font-size: rem(32px);
				@include break-small {
					font-size: rem(44px);
				}
			}

			@include break-small {
				margin-top: 0;
			}
		}

		.step-container {
			display: flex;
			flex-direction: column;
			-webkit-box-align: center;
			align-items: flex-start;
			-webkit-box-pack: center;
			justify-content: center;
			margin: 44px 20px 0;
			box-sizing: content-box;

			@include break-small {
				min-height: 100vh;
				align-items: center;
				margin: 0 auto;
			}

			.step-container__content {
				min-height: auto;
				@media (max-width: $break-mobile) {
					width: 100%;
				}

				.select-items__item {
					.select-items__item-icon {
						@media (min-width: $break-mobile) {
							top: 32px;
						}
					}
					@media (min-width: $break-small) {
						width: 456px;
					}
					.select-items__item-info-wrapper {
						align-items: center;

						.select-items__item-title {
							margin-bottom: 0;
						}
					}
					button.select-items__item-button {
						@media (max-width: $break-mobile) {
							width: 279px;
						}
					}
				}
			}
		}
	}
}
