//
// 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)
		}

		// BC for older browsers that don't support `aspect-ratio`.
		// While Elementor supports Safari 14 and above, Safari started supporting
		// `aspect-ratio` in Safari 15 which was released on September 2022.
		@supports not ( aspect-ratio: 1 / 1 ) {

			& {
				position: relative;
				overflow: hidden;
				height: 0;
				padding-bottom: calc( 100% / var( --video-aspect-ratio ) );

				iframe,
				video {
					position: absolute;
					inset: 0;
				}
			}
		}
	}

	.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;
		}

		// BC for older browsers that don't support `aspect-ratio`.
		// While Elementor supports Safari 14 and above, Safari started supporting
		// `aspect-ratio` in Safari 15 which was released on September 2022.
		@supports not ( aspect-ratio: 1 / 1 ) {

			& {
				position: relative;
				overflow: hidden;
				height: 0;
				padding-bottom: calc( 100% / var( --video-aspect-ratio ) );

				img {
					position: absolute;
					inset: 0;
				}
			}
		}
	}

	.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 );
	}
}
