/*** 	STC-6114 & 6115: This file is copied from '_settings.lite_embeds.scss' in NGA site and adapted for usage in STC app 	***/

/* STC-6281: Set the background color with '!important' to avoid overridden by the 'lite-vimeo-embed.js' */
lite-youtube, lite-vimeo {
	background-color: #333 !important;
	position: relative;
	display: block;
	contain: content;
	background-position: center center;
	background-size: cover;
	cursor: pointer;
}

lite-youtube::after, lite-vimeo::after {
	content: "";
	display: block;
}

.responsive-embed--aspect-ratio-16x9 lite-youtube::after, .responsive-embed--aspect-ratio-16x9 lite-vimeo::after {
	padding-bottom: calc(100% / (16 / 9));
}

.responsive-embed--aspect-ratio-21x9 lite-youtube::after, .responsive-embed--aspect-ratio-21x9 lite-vimeo::after {
	padding-bottom: calc(100% / (21 / 9));
}

.responsive-embed--aspect-ratio-4x3 lite-youtube::after, .responsive-embed--aspect-ratio-4x3 lite-vimeo::after {
	padding-bottom: calc(100% / (4 / 3));
}

.responsive-embed--aspect-ratio-2x1 lite-youtube::after, .responsive-embed--aspect-ratio-2x1 lite-vimeo::after {
	padding-bottom: calc(100% / (2 / 1));
}

.responsive-embed--aspect-ratio-1x1 lite-youtube::after, .responsive-embed--aspect-ratio-1x1 lite-vimeo::after {
	padding-bottom: calc(100% / (1 / 1));
}

lite-youtube > iframe, lite-vimeo > iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	margin: 0;
}

/* STC-6114 & 6115: Changed the path for svg icon */
 lite-youtube > .lty-playbtn, lite-vimeo > .ltv-playbtn {
	 width: 64px !important;
	 height: 64px !important;
	 margin: 0 !important;
	 position: absolute !important;
	 cursor: pointer !important;
	 transform: translate3d(-50%, -50%, 0) !important;
	 top: 50% !important;
	 left: 50% !important;
	 z-index: 1 !important;
	 background-color: transparent !important;
	 background-image: url("../img/materials/icon-stroke-play-white.svg") !important;
	 background-repeat: no-repeat !important;
	 background-position: center center !important;
	 background-size: contain !important;
	 filter: grayscale(100%) !important;
	 transition: opacity 0.2s ease-in-out !important;
	 border: none !important;
}

@media screen and (min-width: 650px) {
	lite-youtube > .lty-playbtn, lite-vimeo > .ltv-playbtn {
		width: 128px !important;
		height: 128px !important;
	}
}

@media screen and (min-width: 1280px) {
	lite-youtube > .lty-playbtn, lite-vimeo > .ltv-playbtn {
		width: 160px !important;
		height: 160px !important;
	}
}

lite-youtube:hover > .lty-playbtn, lite-youtube .lty-playbtn:focus, lite-vimeo:hover > .ltv-playbtn, lite-vimeo .ltv-playbtn:focus {
	filter: none !important;
}

lite-youtube.lyt-activated, lite-vimeo.ltv-activated {
	cursor: unset !important;
}

lite-youtube.lyt-activated > .lty-playbtn, lite-vimeo.ltv-activated > .ltv-playbtn {
	opacity: 0 !important;
	pointer-events: none !important;
}

/*** 	STC customizations 	***/

/*** Notes:'lite-vimeo-embed.js' will change the CSS upon loaded, need to remove all styles manually using '!important' ***/
lite-vimeo > .ltv-playbtn:before {
	all: unset !important;
}

lite-youtube {
	max-width: none;
}

/*** 	End of STC customizations 	***/