//
// Video
//
.elementor-widget-video {

	.elementor-widget-container,
	&:not(:has(.elementor-widget-container)) {
		overflow: hidden;
		transform: translate3d(0, 0, 0); // Allow border-radius in Safari
	}

	.elementor-wrapper {
		aspect-ratio: var( --video-aspect-ratio );

		iframe,
		video {
			height: 100%;
			width: 100%;
			display: flex; // To deal with the space between the iframe and the wrapper
			border: none; // To deal with inconsistencies
			background-color: $black; // To show the effect of the aspect ratio when the player does not support responsive well (e.g. Vimeo)
		}
	}

	.elementor-open-inline {

		.elementor-custom-embed-image-overlay {
			position: absolute;
			inset: 0;
			background-size: cover;
			background-position: center center;
		}
	}

	.elementor-custom-embed-image-overlay {
		cursor: pointer;
		text-align: center;

		&:hover {

			.elementor-custom-embed-play {

				i {
					opacity: 1;
				}
			}
		}

		img {
			display: block;
			width: 100%;
			aspect-ratio: var( --video-aspect-ratio );
			object-fit: cover;
			object-position: center center;
		}
	}

	.e-hosted-video {

		.elementor-video {
			object-fit: cover;
		}
	}
}

.e-con,
.e-con-inner {

	> .elementor-widget-video {
		// Fix - Video widget has an undefined height on mobile using 'flex column wrap' inside the flex container (ED-7604).
		width: var( --container-widget-width );
		--flex-grow: var( --container-widget-flex-grow );
	}
}
