/*
 * YouTube TV
 * Customized for Plugin Alliance
 */

/* Base Canvas */
.ytv-canvas {
	display: block;
	background: $bg-well;
	overflow: hidden;
}

/* Video */
.ytv-video {
	width: 70%;
}
.ytv-video iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: none;
	outline: none;
}

/* List */
.ytv-list {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 30%;
	height: 100%;
}
.ytv-list ul {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 !important;
	padding: 0;
	list-style: none;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.ytv-list li { margin-bottom: 0; }
.ytv-list .ytv-active a { background: rgba(255, 255, 255, .05); }
.ytv-list .ytv-active .ytv-thumb { outline: 1px solid $accent-primary; }
.ytv-list a {
	display: block;
	padding: 10px;
	border-bottom: 2px solid $border-primary;
	color: $white;
	font-size: .75rem;
	text-decoration: none;
}
.ytv-list a::after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.ytv-list li:last-child a { border-bottom: none; }
.ytv-list a:hover { background: rgba($white, .05); }
.ytv-list a:active { background: rgba($bg-well, .05); }

.ytv-list .ytv-content { padding-left: 53%; }
.ytv-list .ytv-thumb {
	position: relative;
	float: left;
	width: 50%;
	outline: 1px solid $border-primary;
}
.ytv-list .ytv-thumb img {
	width: 100%;
	display: block;
}
.ytv-list .ytv-thumb span {
	position: absolute;
	bottom: 5px;
	right: 5px;
	padding: 0 4px;
	border-radius: 3px;
	background: rgba($bg-well, .5);
	font-size: .75rem;
	font-weight: bold;
}
.ytv-views {
	display: block;
	margin-top: 5px;
	font-size: 10px;
	font-weight: normal;
	opacity: 0.3;
}

/* Modifiers */
.ytv-relative {
	position: relative;
	width: 100%;
}
.ytv-full {
	position: fixed;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}

/* Responsive */
@media (max-width: 600px) {
	.ytv-video {
		position: relative;
		width: auto;
	}
	.ytv-relative {
		height: 30em;
	}
	.ytv-list {
		position: relative;
		width: 100%;
	}
}