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

.wp-block-media-text {
	// This block's direction should not be manipulated by rtl, as the mediaPosition control does.
	/*rtl:begin:ignore*/
	direction: ltr;
	/*rtl:end:ignore*/
	display: grid;
	grid-template-columns: 50% 1fr;
	grid-template-rows: auto;
	// This block has customizable padding, border-box makes that more predictable.
	box-sizing: border-box;

	&.has-media-on-the-right {
		grid-template-columns: 1fr 50%;
	}
}

.wp-block-media-text.is-vertically-aligned-top {
	> .wp-block-media-text__content,
	> .wp-block-media-text__media {
		align-self: start;
	}
}

.wp-block-media-text,
.wp-block-media-text.is-vertically-aligned-center {
	> .wp-block-media-text__content,
	> .wp-block-media-text__media {
		align-self: center;
	}
}

.wp-block-media-text.is-vertically-aligned-bottom {
	> .wp-block-media-text__content,
	> .wp-block-media-text__media {
		align-self: end;
	}
}

.wp-block-media-text > .wp-block-media-text__media {
	/*rtl:begin:ignore*/
	grid-column: 1;
	grid-row: 1;
	/*rtl:end:ignore*/
	margin: 0;
}

.wp-block-media-text > .wp-block-media-text__content {
	direction: ltr;
	/*rtl:begin:ignore*/
	grid-column: 2;
	grid-row: 1;
	/*rtl:end:ignore*/
	padding: 0 8% 0 8%;
	word-break: break-word;
}

.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
	/*rtl:begin:ignore*/
	grid-column: 2;
	grid-row: 1;
	/*rtl:end:ignore*/
}

.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
	/*rtl:begin:ignore*/
	grid-column: 1;
	grid-row: 1;
	/*rtl:end:ignore*/
}

.wp-block-media-text__media a {
	display: block;
}

.wp-block-media-text__media img,
.wp-block-media-text__media video {
	height: auto;
	max-width: unset;
	width: 100%;
	vertical-align: middle;
}

/* `is-image-fill` is deprecated and the styles are kept for backwards compatibility. */
.wp-block-media-text.is-image-fill > .wp-block-media-text__media {
	height: 100%;
	min-height: 250px;
	background-size: cover;
}

.wp-block-media-text.is-image-fill > .wp-block-media-text__media > a {
	display: block;
	height: 100%;
}

.wp-block-media-text.is-image-fill > .wp-block-media-text__media img {
	// The image is visually hidden but accessible to assistive technologies.
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Image fill for versions 8 and onwards */
.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
	position: relative;
	height: 100%;
	min-height: 250px;
}

.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a {
	display: block;
	height: 100%;
}

.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
* Here we here not able to use a mobile first CSS approach.
* Custom widths are set using inline styles, and on mobile,
* we need 100% width, so we use important to overwrite the inline style.
* If the style were set on mobile first, on desktop styles,
* we would have no way of setting the style again to the inline style.
*/
@media (max-width: #{ ($break-small) }) {
	.wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: 100% !important;
		> .wp-block-media-text__media {
			grid-column: 1;
			grid-row: 1;
		}
		> .wp-block-media-text__content {
			grid-column: 1;
			grid-row: 2;
		}
	}
}