
.wd-el-video {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.wd-el-video :is(iframe, video) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	object-fit: cover;
}

.wd-el-video:is(.wd-action-overlay, .wd-action-without) {
	border-radius: var(--wd-brd-radius);
}

.wd-el-video:is(.wd-action-overlay, .wd-action-without):not(.wd-with-aspect-ratio) {
	height: 400px;
}

.wd-el-video.wd-with-aspect-ratio {
	aspect-ratio: var(--wd-aspect-ratio);
}

.wd-el-video-overlay {
	z-index: 2;
	transition: transform .5s cubic-bezier(0, 0, .44, 1.18);
}

.wd-el-video-overlay img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.wd-el-video-overlay:after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 2;
	background-color: rgba(0, 0, 0, .15);
	transition: background-color .5s cubic-bezier(0, 0, .44, 1.18);
}

.wd-el-video:hover .wd-el-video-overlay {
	transform: scale(1.09);
}

.wd-el-video:hover .wd-el-video-overlay:after {
	background-color: rgba(0, 0, 0, .3);
}

.wd-el-video-control {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	z-index: 4;
}

.wd-el-video-link {
	z-index: 6;
}

.wd-el-video-play-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	color: var(--color-gray-800);
	font-size: 100px;
	transition: color .5s cubic-bezier(0, 0, .44, 1.18);
}

.wd-el-video-play-btn:before {
	font-size: .32em;
	transition: transform .5s cubic-bezier(0, 0, .44, 1.18);
	content: "";
	font-family: "woodmart-font";
}

.wd-el-video-play-btn:after {
	content: "";
	position: absolute;
	inset: 0;
	border: min(.04em, 2px) solid currentColor;
	opacity: .4;
	border-radius: 50%;
	transition: opacity .5s cubic-bezier(0, 0, .44, 1.18);
}

.wd-el-video.wd-action-play .wd-el-video-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.wd-el-video-play-label {
	font-weight: 600;
	color: var(--color-gray-800);
}

.wd-el-video:is(.wd-action-play, .wd-action-button) {
	overflow: visible;
}

.wd-el-video.wd-playing :is(.wd-el-video-overlay, .wd-el-video-link, .wd-el-video-control) {
	visibility: hidden;
	opacity: 0;
	transition: all .25s ease;
}

.wd-el-video.wd-action-play .wd-el-video-btn:hover .wd-el-video-play-btn:before, .wd-el-video.wd-action-overlay:hover .wd-el-video-play-btn:before {
	transform: scale(.9);
}

.wd-el-video.wd-action-play .wd-el-video-btn:hover .wd-el-video-play-btn:after, .wd-el-video.wd-action-overlay:hover .wd-el-video-play-btn:after {
	opacity: .6;
}
