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

.signup__step.is-difm-design-setup-site {
	.step-wrapper {
		padding-left: 24px;
		padding-right: 24px;

		// Ugly, but necessary to override the default max-width of the step wrapper
		// without causing regressions to other parts of `/start`
		body.is-section-signup .layout:not(.dops) & {
			max-width: 1440px;
		}

		@include break-small {
			padding-left: 48px;
			padding-right: 48px;
		}
	}

	.step-wrapper__content {
		margin-top: 24px;

		@include break-mobile {
			margin-top: 32px;
		}

		@include break-medium {
			margin-top: 48px;
		}
	}

	.step-wrapper.design-picker__has-categories {
		.step-wrapper__content {
			@include break-medium {
				margin-top: 64px;
			}
		}
	}

	// Ugly, but necessary to cancel out some signup styles
	// without causing regressions to other parts of `/start`
	button:not(.is-primary) {
		body.is-section-signup .layout:not(.dops) & {
			font-size: inherit;
			padding-top: 0;
			padding-bottom: 0;
		}
	}

	.design-picker__has-categories {
		.formatted-header__subtitle {
			// Overrides some very specific selectors in /client/signup/style.scss
			margin: 12px 0 48px !important;
		}

		@supports ( display: grid ) {
			.design-picker__grid {
				@include break-medium {
					grid-template-columns: 1fr 1fr;
				}
				@include break-large {
					grid-template-columns: 1fr 1fr 1fr;
				}
			}
		}
	}

	.action-buttons {
		@include break-small {
			background-color: transparent;
		}

		button.is-primary {
			border-radius: 4px;
		}
	}
}

.design-picker__preview {
	.step-wrapper__content {
		height: calc(100vh - 245px);

		@include break-mobile {
			height: calc(100vh - 225px);
		}

		@include break-small {
			height: calc(100vh - 132px);
		}

		@include break-medium {
			height: calc(100vh - 148px);
		}
	}

	@include break-small {
		.step-wrapper__header,
		.step-wrapper__content {
			transform: translateY(-48px);
		}

		.step-wrapper__content {
			max-height: 1080px;
		}
	}
}

.design-picker__web-preview {
	.web-preview__frame-wrapper.is-resizable {
		background-color: transparent;
	}

	.web-preview__frame {
		border: 1px solid rgba(0, 0, 0, 0.12);
		border-top-width: 0;
		/* stylelint-disable-next-line scales/radii */
		border-radius: 0 0 6px 6px;
		box-sizing: border-box;
	}
}

/* Hide categories from the sell intent */
.design-picker__hide-category-column {
	.design-picker-category-filter__sidebar,
	.design-picker-category-filter__dropdown,
	.design-picker__category-heading-0 {
		display: none;
	}
}
