// These rules ensure the preview scales smoothly regardless of the container size.
.block-editor-block-preview__container {
	// In the component, a top padding is provided as an inline style to provide an aspect-ratio.
	// This positioning enables the content to sit on top of that padding to fit.
	position: relative;

	// The preview component measures the pixel width of this item, so as to calculate the scale factor.
	// But without this baseline width, it collapses to 0.
	width: 100%;

	overflow: hidden;

	.block-editor-block-preview__content {
		// This element receives inline styles for transform-scale and aspect-ratio.
		// Those inline styles are calculated to fit a perfect thumbnail.
		width: 100%;

		// Vertical alignment. It works with the transform: translate(-50%, -50%)`,
		top: 0;
		left: 0;

		// Important to set the origin.
		transform-origin: top left;

		// Resetting paddings, margins, and other.

		text-align: initial;
		margin: 0;
		overflow: visible;
		min-height: auto;

		.block-editor-block-list__insertion-point,
		.block-list-appender {
			display: none;
		}
	}
}

// The goal of this pseudo-element is to cover the iframe
// otherwise it won't be able to drag elements containing
// the preview iframe in Safari.
.block-editor-block-preview__container::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}