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

.is-section-stepper {
	.site-preview__wrapper {
		margin: 0 0 16px;
		flex-grow: 1;

		@include break-large {
			margin: 0 20px 20px 20px;
		}

		.preview-toolbar__toolbar {
			display: none;

			@include break-large {
				display: block;
			}
		}

		.web-preview__inner {
			height: 680px;
			@include break-large {
				height: 100%;
			}
		}

		.site-preview__web-preview.web-preview__inner.is-visible.is-phone {
			height: 680px;
			@include break-large {
				height: 767px;
			}
		}

		.is-phone .web-preview__placeholder {
			margin: 0 auto;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.04);
			background: var(--color-print);
			border-radius: 40px; /* stylelint-disable-line scales/radii */
			transition: max-width 0.2s linear;

			@include break-large {
				max-width: 340px;
				height: 713px;
			}
		}

		.is-tablet .web-preview__placeholder {
			@include break-large {
				max-width: 783px;
			}
		}

		.web-preview__placeholder {
			overflow-y: visible;
			max-width: 100%;
			box-shadow: 0 5px 15px rgba(0 0 0 / 7%), 0 3px 10px rgba(0 0 0 / 4%);
			border-radius: 40px; /* stylelint-disable-line scales/radii */
			width: 95%;
			margin: 0 auto;
			transition: max-width 0.2s linear;
			display: flex;
			flex-direction: column;

			@include break-large {
				width: 95%;
				border-radius: 20px; /* stylelint-disable-line scales/radii */
			}
		}

		.preview-toolbar__devices {
			margin-bottom: 28px;
		}

		.is-phone .web-preview__frame-wrapper.is-resizable {

			@include break-large {
				margin: 0 auto;
			}
		}

		.web-preview__frame-wrapper.is-resizable {
			transition: max-width 0.2s linear;
			margin: 0;
			padding: 0;
			background-color: transparent;
			position: relative;
		}

		.web-preview__frame {
			border: 10px solid var(--color-print);
			border-radius: 40px; /* stylelint-disable-line scales/radii */
			box-sizing: border-box;

			@include break-large {
				margin-top: 0;
				border-radius: 20px; /* stylelint-disable-line scales/radii */
			}
		}

		.is-phone .web-preview__frame-wrapper.is-resizable .web-preview__frame {
			margin: 0 auto;
			max-width: 100%;

			@include break-large {
				border-radius: 40px; /* stylelint-disable-line scales/radii */
			}
		}

		.spinner-line {
			display: none;
		}
	}
}
