@use "sass:math";

.xprez-video {
	&.full-width {
		@include full-width;
	}

	&.mid-width {
		@include m-width;
	}

	&.text-width {
		@include s-width;
	}
}

.xprez-video-item {
	position: relative;
	padding-top: $video-ratio-height;

	iframe {
		position: absolute;
		top: 0; right: 0;
		height: 100%;
		width: 100%;
		display: block;
	}
}

[class^="xprez-video-poster-"], [class*=" xprez-video-poster-"] {
	cursor: pointer;
	position: absolute;
	top: 0; right: 0;
	height: 100%;
	width: 100%;
	display: block;
	z-index: 2;
	background-position: center center;
	background-size: cover;

	&:after {
		position: absolute;
		line-height: 1;
		font-family: 'xprez' !important;
		top: 50%;
		left: 50%;
		content: "\e038";
		z-index: 3;
		color: var(--x-video-btn-color);
		text-shadow: 0 0 40px rgba(0,0,0,0.1);
		font-size: $video-button-size;
		margin-left: -1 * math.div($video-button-size, 2);
		margin-top: -1 * math.div($video-button-size, 2);
		transition: all 0.3s;

		@media only screen and (max-width: $typo-break-m) {
			font-size: $video-button-size * 0.65;
			margin-left: $video-button-size * 0.65 * -0.5;
			margin-top: $video-button-size * 0.65 * -0.5;
		}

	}

	&:hover:after {
		transform: scale(1.1);
	}
}