@keyframes video-bounce-up {
	0% {
		transform: scale(1, 1);
	}

	25% {
		transform: scale(1.15, 1.15);
	}

	50% {
		transform: scale(.85, .85);
	}

	100% {
		transform: scale(1, 1);
	}
}

@keyframes zoomBig {
	0% {
		transform: scale(.3);
		opacity: .8;
		border-width: 4px;
	}

	8% {
		border-width: 3px;
	}

	16% {
		border-width: 2px;
	}

	24%,
	100% {
		transform: scale(1.2);
		opacity: 0;
		border-width: 1px;
	}
}

.tm-popup-video {
	width: 100%;
	max-width: 100%;
	position: relative;

	.video-link {
		display: flex;
		flex-direction: column;
		cursor: pointer;
	}

	.video-poster {
		position: relative;
		border-radius: $box-large-rounded;
	}

	.video-play-icon {
		width: 115px;
		height: 115px;
		background: transparent;
		border: 2px solid #fff;
		position: relative;
		border-radius: 50%;
		@extend %NormalTransition;
	}

	.video-play-text {
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		text-transform: uppercase;
		width: 130px;
		height: 130px;
		background-color: transparent;
		border: 1px solid;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		@extend %NormalTransition;
	}

	.icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		line-height: 1;
		margin-left: 2px;
		z-index: 2;

		&:before {
			@extend %NormalTransition;
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-left: 17px solid #fff;
		}
	}

	.video-overlay {
		@extend %NormalTransition;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: inherit;
	}

	.video-poster-caption {
		margin-top: 21px;
		font-size: 16px;
		font-style: italic;
		text-align: center;
	}

	.video-text {
		line-height: initial;
		font-size: 30px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 3.75px;
		color: #fff;
		@extend %NormalTransition;
	}

	&.type-poster {
		.video-poster {
			border: 0 solid transparent;
		}
		.minimog-image {
			position: relative;
			border-radius: inherit;

			img {
				border-radius: inherit;
			}
		}

		.video-play-icon {
			border-color: #fff;
		}

		.video-button {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&.poster-full-wide {
			.video-link {
				display: block;
			}

			.video-poster {
				img {
					width: 100%;
				}
			}
		}
	}

	&.type-button {
		line-height: 0;

		.video-play {
			color: $primary-color;
			border-color: $primary-color;
		}

		.video-link {
			&:hover {
				.video-play {
					animation: 1s video-bounce-up;
				}
			}
		}

		> a {
			display: inline-block;
			text-align: center;
		}
	}
}

.minimog-text-animate-line {
	.video-link {
		&:hover {
			.video-text {
				&:after {
					width: 100%;
					left: 0;
					right: auto;
				}
			}
		}
	}

	.video-text {
		position: relative;
		padding-bottom: 5px;

		&:before,
		&:after {
			content: '';
			width: 0;
			height: 1px;
			position: absolute;
			left: auto;
			right: 0;
			bottom: 0;
			transition: width .6s cubic-bezier(.25, .8, .25, 1) 0s;
			background: currentColor;
		}

		&:before {
			width: 100%;
			background: rgba(0, 0, 0, .2);
		}
	}
}

.minimog-popup-video-icon-position-top {
	.video-button {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.video-text {
		margin-top: 35px;
	}
}

.minimog-popup-video-icon-position-left {
	.video-button {
		display: flex;
		align-items: center;
	}

	.video-text {
		margin-left: 20px;
	}
}

.minimog-popup-video-icon-position-right {
	.video-button {
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
	}

	.video-text {
		margin-right: 20px;
	}
}

.minimog-popup-video--button-effect-wave-pulse {
	.video-link {
		&:hover {
			.video-button-mask {
				transition: opacity .7s linear .2s;
				opacity: 0;
			}
		}
	}

	.video-button-play {
		position: relative;
	}

	.video-button-mask {
		@extend %NormalTransition;
		position: absolute;
		width: 200px;
		height: 200px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #ccc;

		&:before,
		&:after {
			opacity: 0;
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 50%;
			border-style: solid;
			border-width: 3px;
			border-color: currentColor;
			width: 100%;
			height: 100%;
			animation: zoomBig 3s linear infinite;
			transform-origin: center;
			backface-visibility: hidden;
		}

		&:after {
			animation-delay: .55s;
		}
	}
}

.minimog-popup-video-poster-background-yes {
	.tm-popup-video.type-poster {
		.video-link {
			width: 100%;
		}

		.video-poster {
			width: 100%;
			height: 370px;
		}

		.minimog-image {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}

@include elementor-breakpoint-down(tablet-extra) {
	.tm-popup-video {
		.video-play-icon {
			width: 60px;
			height: 60px;
		}

		.icon:before {
			border-top-width: 10px;
			border-bottom-width: 10px;
			border-left-width: 15px;
		}
	}
}
