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

.video {
	line-height:0;
	.grid-one();
	align-items:center;
	justify-items:center;
	grid-template-rows:1fr;
	grid-template-columns:1fr;
	overflow:hidden;
	position:relative;
	
	> * {
		position:relative;
		z-index:3;
	}

	> video {
		object-fit: cover;
		width:100%;
		height:auto;
		z-index:1;
		object-fit: cover;
		object-position: center;
		&:focus {
			outline: none;
		}
	}
	&.fullscreen video {
		width:100vw;
		height:100vh;
	}

	&.has-play:not(.played) {
		video { pointer-events:none; }
	}

	> .video-controls {
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		pointer-events:none;
		z-index:2;
		.translateY(~"calc(100% - .3125em)");
		.transition(all, .5s, @easing);
		padding:0 0 .5em;
		background-color:fade(#333, 40);
		.blur(3px);
		font-size:16px;
		display: grid;
		grid-gap:0.3125em .5em;
		align-items:center;
		justify-items:center;
		grid-template-columns:.1875em repeat(3, auto) 1fr repeat(5, auto) .1875em;
		grid-template-areas:
			"progress progress progress progress progress progress progress progress progress progress progress"
			". play volume time . cc quality pip branding full .";
		> * {
			display:block;
			width:100%;
			line-height:0;
			font-size:1em;
			color:#fff;
		}
		* {
			-moz-user-select: -moz-none;
			-khtml-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		svg {
			height:1.5em;
			width:auto;
			fill:currentColor;
		}
		.youtube svg {
			height:1em;
		}
		.seek { grid-area: progress; }
		.play-controls { grid-area:play; }
		.volume-controls { grid-area:volume; }
		.time { grid-area:time; }
    	.cc-controls { grid-area: cc; }
		.quality-controls { grid-area:quality; }
		.pip-controls { grid-area: pip; }
		.branding { grid-area: branding; }
		.fullscreen-controls { grid-area:full; }
		
		
    	.cc-controls, .quality-controls, .pip-controls, .branding, .fullscreen-controls { margin:0 .25em; }
		.pip-controls { margin-right:0; }

		.seek, .play-controls, .volume-controls, .quality-controls, .fullscreen-controls, .qualities > div {
			display:grid;
			> * {
				grid-row:1;
				grid-column:1;
			}
		}

		.seek {
			> * {
				margin:0;
				height:.3125em;
				appearance: none;
				-moz-appearance: none;
				-webkit-appearance: none;
				opacity:.75;
				width:100%;
				&::-webkit-progress-bar {
					background:transparent;	
				}
				&.buffer {
					opacity:.25;
					&::-moz-progress-bar {
						background-color:#f7f7f7;
						.transition(all, .5s, @easing);
					}
					&::-webkit-progress-value {
						background-color:#f7f7f7;
						.transition(all, .5s, @easing);
					}
				}
				&.progress {
					&::-moz-progress-bar {
						background-color:#338ffc;
						.transition(all, .25s, @easing);
					}
					&::-webkit-progress-value {
						background-color:#338ffc;
						.transition(all, .25s, @easing);
					}
				}
				&.seek-to {
					opacity:.5;
					&::-moz-progress-bar {
						background-color:#338ffc;
					}
					&::-webkit-progress-value {
						background-color:#338ffc;
					}
				}
			}

			.seek-input {
				opacity:0;
				cursor:pointer;
			}
		}

		.volume-controls {
			position:relative;
			.volume-input {
				height:3.5em;
				width:1em;
				cursor:pointer;
				margin:0;
				writing-mode: bt-lr; /* IE */
				-webkit-appearance: slider-vertical; /* WebKit */
				position:absolute;
				left:50%;
				bottom:100%;
				.translateY(0);
				.translateX(-50%);
				opacity:0;
				pointer-events:none;
				.clip(~"0 100%, 100% 100%, 100% 100%, 0% 100%");
				.transition(all, .3s, @easing);
			}
			&:hover .volume-input {
				opacity:1;
				.clip(~"0 0, 100% 0, 100% 100%, 0% 100%");
				pointer-events:auto;
			}
		}

		.quality-controls {
			position:relative;
			.qualities {
				position:absolute;
				bottom:~"calc(100% - -1em)";
				left:50%;
				.translateX(-50%);
				.blur(3px);
				.transition(all, .3s, @easing);
				div {
					align-items:center;
					justify-items:center;
					font-family: Helvetica, Arial;
					font-size:1em;
					font-weight:300;
				}
				input {
					appearance: none;
					-moz-appearance: none;
					-webkit-appearance: none;
					margin:0;
					padding:0;
					font-size:.7em;
					width:8em;
					height:2.75em;
					cursor:pointer;
					background-color:fade(#333, 80);
					.transition(all, .25s, @easing);
					&:checked {
						background-color:#338ffc;
						pointer-events:none;
					}
					&:hover {
						background-color:fade(#555, 80);
					}
					&:focus {
						outline:none;
					}
				}
				label {
					pointer-events:none;
				}
				&.hide {
					opacity:0;
					pointer-events:none;
				}
			}
		}
	}

	&:not(.has-play),
	&.has-play.played {
		&:hover .video-controls,
		.video-controls:hover {
			.translateY(0);
			pointer-events:auto;
		}
	}

	.video-icon {
		.transition(all, .3s, @easing);
		cursor:pointer;
		&.hide {
			opacity:0;
			pointer-events:none;
		}
	}

	.play {
		cursor:pointer;
		&.default, &.with-sound {
			position:absolute;
			z-index:5;
			height:auto;
			width:18%;
			top:50%; 
			left:50%;
			.translate(-50%, -50%);
			display:block;
			.clip(~"0 0, 100% 50%, 0 100%");
			.transition(opacity, .25s, @easing);
			opacity:1;
			pointer-events:auto;
			.blur(3px);
		}
	}
	&.played .play.with-sound,
	&.played .play.default {
		opacity:0;
		pointer-events:none;
	}
}