/* 
	Author     : DFD
    Styles for : Video shortcode
*/

.dfd-videoplayer {
	
	@button-size: 66px;
	
	line-height: 0;
	.button-wrap {
		.rel();
		.inline-block();
	}
	.decoration-mask {
		.abs();
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border: 1px solid @border-color;
		.rounded(33px);
		.transition(all .3s ease);
	}
	.dfd-video-button {
		.rel();
		width: @button-size;
		height: @button-size;
		line-height: @button-size;
		text-align: center;
		font-size: 25px;
		color: @white-color;
		.rounded(50%);
		.transition(color .3s ease);
		i {
			.block();
			.rel();
			height: inherit;
			line-height: inherit;
			width: inherit;
			.rounded(inherit);
			&:before {
				.rel();
				left: 2px;
			}
		}
	}
	.decoration-icon {
		.abs();
		top: 0;
		left: 0;
		background: @main-site-light-color;
		width: inherit;
		height: inherit;
		.rounded(inherit);
		.scale(1);
		.transition(all .3s ease);
	}
	.title-wrap {
		.rel();
		text-align: left;
		padding-left: 20px;
		padding-right: 45px;
		padding-top: 11px;
		padding-bottom: 11px;
		.dfd-content-subtitle {
			font-size: 13px;
			line-height: 20px;
			color: #7b7b7b;
		}
	}
	.dfd-video-link {
		.abs();
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 3;
	}
	&.style-1 {
		&.with-thumb {
			.dfd-video-image-thumb {
				.opacity(1);
				visibility: visible;
				.transition(~"opacity 1s ease, visibility 1s ease");
				.rounded(inherit);
				overflow: hidden;
			}
			.wpb_video_wrapper {
				.opacity(0);
				visibility: hidden;
				.transition(~"opacity 1s ease, visibility 1s ease");
			}
			.dfd-video-box {
				&.active {
					.dfd-video-image-thumb {
						.opacity(0);
						visibility: hidden;
					}
					.wpb_video_wrapper {
						.opacity(1);
						visibility: visible;
					}
				}
			}
		}
		.dfd-video-content {
			.rel();
			&.permanent,
			&.on-hover {
				&:before {
					content: "";
					.abs();
					top: 30px;
					left: 30px;
					right: 30px;
					bottom: 15px;
					.rounded(inherit);
					.box-shadow(0px 25px 70px 0px transparent);
					.transition(box-shadow .3s ease);
				}
				&:after {
					content: "";
					.abs();
					top: 1px;
					left: 1px;
					right: 1px;
					bottom: 1px;
					background: #000;
					.block();
					.rounded(inherit);
				}
			}
			&.permanent {
				&:before {
					.box-shadow(0px 25px 70px 0px rgba(0,0,0,0.5));
				}
			}
			&.on-hover:hover {
				&:before {
					.box-shadow(0px 25px 70px 0px rgba(0,0,0,0.5));
				}
			}
		}
		.dfd-video-box {
			.rel();
			overflow: hidden;
			.rounded(inherit);
			.wpb_video_wrapper {
				.rel();
				overflow: hidden;
				.rounded(inherit);
				z-index: 1;
			}
		}
		.dfd-video-image-thumb {
			.abs();
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			i {
				.rel();
				.block();
				font-size: 32px;
				line-height: inherit;
				text-align: center;
				z-index: 1;
				color: @white-color;
				.transition(color .3s ease);
				&:before {
					.rel();
					left: 3px;
				}
			}
			img {
				.abs();
				left: 50%;
				top: 50%;
				.block();
				min-width: 100%;
				.translate(-50%; -50%);
			}
		}
		.container-play {
			.abs();
			width: 80px;
			height: 80px;
			line-height: 80px;
			top: 50%;
			left: 50%;
			margin-top: -40px;
			margin-left: -40px;
			.rounded(50%);
			z-index: 1;
			&:hover {
				.decoration-icon {
					.scale(1.05);
				}
			}
		}
		.decoration-icon {
			background: rgba(0,0,0,0.5);
		}
	}
	&.style-2 {
		.button-wrap {
			.dfd-video-alignment-block {
				display: table;
				.dfd-video-button,
				.title-wrap {
					display: table-cell;
					vertical-align: middle;
				}
				i {
					&:before {
						z-index: 2;
					}
					.decoration-icon {
						z-index: 1;
					}
				}
			}
			&:hover {
				.decoration-icon {
					background: darken(@main-site-light-color, 7%);
				}
			}
		}
	}
}

.dfd-fullscreen-video-container {
	.hide();
	position: fixed;
	z-index: 1001;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 5% 15%;
	overflow: hidden;
	&:before {
		content: "";
		.block();
		.abs();
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,.5);
		.opacity(0.75);
		z-index: -1;
	}
	.fluidvids {
		.rel();
		width: 100%;
		height: 100%;
		.opacity(0);
	}
	a.fullscreen-video-close {
		font-size: 35px;
		font-weight: 300;
		.block();
		.abs();
		right: 0;
		top: 0;
		width: 50px;
		height: 50px;
		line-height: 43px;
		text-align: center;
		color: @white-color;
		background: @dark-color;
		cursor: pointer;
		.opacity(1);
		.transition(opacity .3s ease);
		&:hover {
			.opacity(.7);
		}
	}
}

body {
	&.admin-bar {
		.dfd-fullscreen-video-container {
			top: 32px;
		}
	}
}