@import "@{parenturl}/wp-less/mixins.less";

figure.video {
	position:relative;
	overflow:hidden;
	width:100%;
	line-height:0;
	&:focus{
		outline: none;
	}

	* {
		color:#fff;
		line-height:1;
		.user-select(none);
	}
	
	video {
		width:100%;
		height:100%;
		object-fit:cover;
		object-position:center;
		pointer-events:none;
		&.fullscreen {
			max-height:unset !important;
		}
		&.hide-controls + .video-controls {
			display:none !important;
		}
	}

	.video-controls {
		width:100%;
		background-color:rgba(0,0,0,.25);
		padding:5px;
		box-sizing: border-box;
		overflow:hidden;
		color:#fff;
		position:absolute;
		bottom:0;
		left:0;
		z-index: 22;
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);

		.progress-bar {
			height:21px;
			position:relative;
			width:100%;
			background-color:transparent;
			box-shadow:none;
			.vertAlign;
			float:none;
			transition:none;
			.progress-container {
				position:absolute;
				height:6px;
				width:100%;
				border-radius:3px;
				overflow:hidden;
				border:1px solid fade(#000,10);
				background-color:fade(#000,20);

				progress {
					position:absolute;
					height:5px;
					width:100%;
					left:0;
					top:0;
					bottom:0;
					-webkit-appearance:none;
					&::-webkit-progress-bar {
						background:transparent;	
					}
				}
				.preload {
					z-index:1;
					opacity:.25;
					&::-moz-progress-bar {
						background-color:#f7f7f7;
						.transition(all, .5s, cubic-bezier(0.77, 0, 0.175, 1));
					}
					&::-webkit-progress-value {
						background-color:#f7f7f7;
						.transition(all, .5s, cubic-bezier(0.77, 0, 0.175, 1));
					}
				}
				.past {
					z-index:2;
					&::-moz-progress-bar {
						background-color:#338ffc;
					}
					&::-webkit-progress-value {
						background-color:#338ffc;
					}
				}
				.seekTo {
					z-index:3;
					opacity:.5;
					&::-moz-progress-bar {
						background-color:#338ffc;
					}
					&::-webkit-progress-value {
						background-color:#338ffc;
					}
				}
			}
			.seek {
				width:100%;
				height:15px;
				cursor: pointer;	
				position:relative;
				z-index:4;
				opacity:0;
			}
		}

		.video-icon {
			cursor: pointer;
			path {
				fill:#fff;
			}
		}

		.controls-left > *,
		.controls-right > *,
		.volumeControls > *{
			display:inline-block;
			vertical-align: middle;
			line-height:0;
		}
		.controls-left > *:not(:last-child),
		.controls-right > *:not(:last-child) {
			margin-right:5px;
		}
		.controls-left {
			float:left;
			padding-left:10px;
		}
		.controls-right {
			float:right;
			padding-right:10px;
		}
		.volumeControls {
			width:24px;
			transition: width .2s linear;
			position:relative;
			overflow:hidden;
		}
		.volumeControls:hover {
			width:107px;
		}
		.volume-input {
			width:75px;
			height:20px;
			position:absolute;
			left:25px;
		}
		.time {
			font-family: 'Open Sans', sans-serif;
			font-weight:400;
			font-size:14px;
		}
		.branding svg {
			height: 18px;
			width: auto;
			fill:#fff;
			display:block;
		}
	}
	.video-controls {
		opacity:1;
		.transition(opacity, .5s, linear);
	}
	
	video.playing + .video-controls {
		opacity:0;
	}
	&:focus:hover {
		video.playing + .video-controls {
			opacity:1;
		}
	}
	
	.entry-content & {
		margin-bottom:1em;
	}
}

#hero-container:not(.playedWithSound) .video-controls {
	opacity:0;
	pointer-events:none;
}