// Apply max-width to floated items that have no intrinsic width
.block-editor-block-list__block[data-type="core/embed"][data-align="left"] .block-editor-block-list__block-edit,
.block-editor-block-list__block[data-type="core/embed"][data-align="right"] .block-editor-block-list__block-edit,
.wp-block-embed.alignleft,
.wp-block-embed.alignright {
	// Instagram widgets have a min-width of 326px, so go a bit beyond that.
	max-width: 360px;
	width: 100%;
}

.wp-block-embed {
	// Supply caption styles to embeds, even if the theme hasn't opted in.
	// Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes,
	// so we supply the styles so as to not appear broken or unstyled in those.
	figcaption {
		@include caption-style();
	}
	// The embed block is in a `figure` element, and many themes zero this out.
	// This rule explicitly sets it, to ensure at least some bottom-margin in the flow.
	margin-bottom: 1em;
}

.wp-embed-responsive {
	.wp-block-embed {
		// Add responsiveness to common aspect ratios.
		&.wp-embed-aspect-21-9 .wp-block-embed__wrapper,
		&.wp-embed-aspect-18-9 .wp-block-embed__wrapper,
		&.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
		&.wp-embed-aspect-4-3 .wp-block-embed__wrapper,
		&.wp-embed-aspect-1-1 .wp-block-embed__wrapper,
		&.wp-embed-aspect-9-16 .wp-block-embed__wrapper,
		&.wp-embed-aspect-1-2 .wp-block-embed__wrapper {
			position: relative;

			&::before {
				content: "";
				display: block;
				padding-top: 50%; // Default to 2:1 aspect ratio.
			}

			iframe {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		&.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before {
			padding-top: 42.85%; // 9 / 21 * 100
		}

		&.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before {
			padding-top: 50%; // 9 / 18 * 100
		}

		&.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
			padding-top: 56.25%; // 9 / 16 * 100
		}

		&.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before {
			padding-top: 75%; // 3 / 4 * 100
		}

		&.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before {
			padding-top: 100%; // 1 / 1 * 100
		}

		&.wp-embed-aspect-9-6 .wp-block-embed__wrapper::before {
			padding-top: 66.66%; // 6 / 9 * 100
		}

		&.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before {
			padding-top: 200%; // 2 / 1 * 100
		}
	}
}