@use "@wordpress/base-styles/breakpoints" as *;

.wp-block-acf-field-blocks-acf-embed {
	// Remove the left and right margin the figure is born with.
	margin-left: 0;
	margin-right: 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;
	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.

	// Don't allow iframe to overflow it's container.
	iframe {
		max-width: 100%;
	}

	&.is-loading {
		display: flex;
		justify-content: center;
	}

	.wp-block-acf-field-blocks-acf-embed__placeholder-input {
		flex: 1 1 auto;
	}

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

  &__wrapper {
    position: relative;
  }

	&.wp-has-aspect-ratio {
		.wp-block-acf-field-blocks-acf-embed__wrapper::before {
			content: "";
			display: block;
			padding-top: 50%; // Default to 2:1 aspect ratio.
		}
	}

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

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

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

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

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

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

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

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

	// Unless these have a min-width, they collapse when floated.
	.wp-block-acf-field-blocks-acf-embed__wrapper {
		min-width: $break-zoomed-in;
	}
}

// Supply a min-width when inside a cover block, to prevent it from collapsing.
.wp-block-cover .wp-block-acf-field-blocks-acf-embed {
	min-width: 320px;
	min-height: 240px;
}

// Allow embeds to grow and shrink inside flex group blocks (Stack/Row), preventing collapse while fitting available space.
.wp-block-group.is-layout-flex .wp-block-acf-field-blocks-acf-embed {
	flex: 1 1 0%;
	min-width: 0;
}

.wp-block-acf-field-blocks-acf-embed__learn-more {
	@at-root .wp-block-post-content & {
		a {
			color: var(--wp-admin-theme-color);
		}
	}
}

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

.wp-block[data-align="left"],
.wp-block[data-align="right"] {
	> .wp-block-acf-field-blocks-acf-embed {
		max-width: 360px;
		width: 100%;

		// Unless these have a min-width, they collapse when floated.
		.wp-block-acf-field-blocks-acf-embed__wrapper {
			min-width: $break-zoomed-in;
		}
	}
}