.block-editor-iframe__body {
	position: relative;
}

.block-editor-iframe__html {
	transform-origin: top center;

	@media not ( prefers-reduced-motion ) {
		// Prevents a flash of background color change when entering/exiting zoom out
		transition: background-color 400ms;
	}

	&.zoom-out-animation {
		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
		$scroll-top-next: var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0);
		$overflow-behavior: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);

		position: fixed;
		left: 0;
		right: 0;
		top: calc(-1 * #{$scroll-top});
		bottom: 0;
		// Force preserving a scrollbar gutter as scrollbar-gutter isn't supported in all browsers yet,
		// and removing the scrollbar causes the content to shift.
		overflow-y: $overflow-behavior;
	}

	&.is-zoomed-out {
		$scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
		$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size, 0);
		$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
		$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
		$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
		$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
		// Apply an X translation to center the scaled content within the available space.
		transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
		scale: $scale;
		background-color: $gray-300;

		// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
		// so we need to adjust the height of the content to match the scale by using negative margins.
		$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
		$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
		$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
		margin-bottom: calc(-1 * #{$total-height});

		// Add the top/bottom frame size. We use scaling to account for the left/right, as
		// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
		// of the content.
		padding-top: calc(#{$frame-size} / #{$scale});
		padding-bottom: calc(#{$frame-size} / #{$scale});

		body {
			min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});

			> .is-root-container:not(.wp-block-post-content) {
				flex: 1;
				display: flex;
				flex-direction: column;
				height: 100%;

				> main {
					flex: 1;
				}
			}
		}

		.wp-block[draggable] {
			cursor: grab;
		}
	}
}