// 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 provid 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 width, height, and transform-scale.
		// Those inline styles are calculated to fit a perfect thumbnail.

		// 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-editor-block-drop-zone,
		.reusable-block-indicator,
		.block-list-appender {
			display: none;
		}
	}
}

// Hide inserter from previews.
.block-editor-block-preview__content-iframe .block-list-appender {
	display: none;
}

.block-editor-block-preview__live-content {
	* {
		pointer-events: none;
	}

	// Hide the block appender, as the block is not editable in this context.
	.block-list-appender {
		display: none;
	}

	// Revert button disable styles to ensure that button styles render as they will on the
	// front end of the site. For example, this ensures that Social Links icons display correctly.
	.components-button:disabled {
		opacity: initial;
	}

	// Hide placeholders.
	.components-placeholder,
	.block-editor-block-list__block[data-empty="true"] {
		display: none;
	}
}