// Sass for videojs-playlist

.video-js {

	position: relative;

	.vjs-big-play-button {
  	top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -20px;
  }

  // This class is added to the video.js element by the plugin by default.
  &.vjs-playlist {
    display: block;
  }

  .vjs-button-prev, .vjs-button-next {
  	cursor: pointer;
  	font-size: 15px;
    margin-bottom: 2px;
    font-weight: bold;
    margin-left: 10px;
    margin-right: 10px;
  }

  .vjs-button-prev:before {
  	content: "<<";
  }

  .vjs-button-next:before {
  	content: ">>";
  }

  .vjs-playlist-items {
  	border: 1px solid #000;
  	height: 100%;
  	position: absolute;
  	right: 0;
  	overflow: scroll;
  	margin: 0;
  	padding: 0;

  	li {
	  	background-size: cover;
	  	height: 120px;
	  	position: relative;
	  }

	  li .vjs-playlist-video-title {
	  	position: absolute;
	    bottom: 10px;
	    text-shadow: 1px 2px 3px #000;
	    left: 10px;
	    text-transform: uppercase;
	  }

	  li .vjs-playlist-video-title div {
	 		margin-top: 8px
	  }

	  li div.vjs-playlist-video-upnext {
	    font-size: 12px;
	    color: red;
	  } 

	  li:hover {
	  	cursor: pointer;
	  }
  }  
}