lite-youtube {
	contain: content;
	cursor: pointer;
}

/* gradient */
lite-youtube::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.63) 0%, rgba(0, 0, 0, 0.21) 45%, rgba(0, 0, 0, 0) 90%);
	background-position: top;
	background-repeat: repeat-x;
	height: 110px;
	width: 100%;
	transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
}

/* play button */
lite-youtube > .lty-playbtn {
	display: block;
	width: 68px;
	height: 48px;
	padding: 0;
	position: absolute;
	cursor: pointer;
	transform: translate3d(-50%, -50%, 0);
	top: 50%;
	left: 50%;
	z-index: 1;
	background: none !important;
	transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
	border: none;
}

lite-youtube > .lty-playbtn svg {
	filter: grayscale(100%);
}

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

lite-youtube:hover > .lty-playbtn svg,
lite-youtube .lty-playbtn:focus svg {
	filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
	cursor: unset;
}

lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
	opacity: 0;
	pointer-events: none;
}