.wp-block-embed {
	margin: 0;

	// Necessary because we use responsive trickery to set width/height,
	// therefore the video doesn't intrinsically clear floats like an image does.
	clear: both;

	// Apply a min-width, or the embed can collapse when floated.
	// Instagram widgets have a min-width of 326px, so go a bit beyond that.
	@include break-small() {
		min-width: 360px;

		// The placeholder should not have this min-width.
		&.components-placeholder {
			min-width: 0;
		}
	}

	&.is-loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 1em;
		min-height: 200px;
		text-align: center;
		background: $light-gray-100;
		p {
			font-family: $default-font;
			font-size: $default-font-size;
		}
	}

	// Stops long URLs from breaking out of the no preview available screen
	.components-placeholder__error {
		word-break: break-word;
	}
}

.block-library-embed__interactive-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
}