// .scss files will get core functions and variables automatically from build script


// hide extra stuff on sidebar

.page-sidenav>*:not(.sidenav) {
	display: none;
}


#video-playlist { 
	display: flex;
	flex-direction: column;
	margin: 0;
	list-style: none;
	height: 100%;
	
	> li {
		flex: 1 1 auto;
		
		display: flex;
		align-items: center;
		
		border-bottom: 2px solid $gray3;
		padding: 0.5rem; 
		cursor: pointer;
		line-height: 1em;
		
		&:last-child { border-bottom: 0 none; }
		
		&::before { display: none; }
		
		
		// play icon
		>i {
			flex: 0 0 auto;
			width: 2rem;
			height: 2rem;
			background: $blue1;
			color: white;
			border-radius: 50%;
			display: inline-block;
			line-height: 1em;
			
			&::before {
				margin: 0;
				font-size: 12px;
				line-height: 2rem;
				width: 100%;
			}
		}
		
		
		// video title and time
		span {
			flex: 1 1 auto;
			display: inline-block;
			padding-left: 0.5rem;
			font-size: rem(13);
		}
		
		// video time
		small {
			font-weight: bold;
		}


		&:hover {
			background: $blue2;
			color: white;
		}
		
		&.currently-playing { 
			font-weight: bold;
			background: $blue1;
			color: white;
			
			i {
				background: $gold;
			}
		}
		
		@media (min-width: 1024px){
			padding: 1rem;
			line-height: 1.2em;
			span { font-size: rem(16); padding-left: 1rem; }
		}
		
	}
}

.video-player-row { padding-top: 0; }

.video-player-row .flexrow {
	margin: 0;
	
	@media (max-width: 767px){
		display: flex;
		flex-wrap: wrap;
		
		> div {
			flex: 1 1 100%;
		}
	}
}


.playlist-col {
	flex: 1 1 auto;
	order: 1;
	padding: 0;
	background: $blue3;
	
	@media (max-width: 767px){
		order: 2;
	}
}

.video-col {
	flex: 1 1 auto;
	order: 2;
	margin-bottom: 0;
	padding: 0;
	background: $gray3;
	
	@media (max-width: 767px){
		order: 1;
	}
}