@import (less) '../libs/videojs-playlist.css';

.vjs-playlist{
	width: 100%;
	margin-bottom: 30px;
	background-color: transparent;
	position: relative;
}

.vjs-playlist ul{
	margin: 0;
	max-height: 236px;
	overflow-y: scroll;
	border: 1px solid @color_grey-light;
	position: relative;
}

.vjs-playlist ul li{
	background-color: white;
	background-color: @color_grey-lighter;
	border-bottom: 1px solid @color_grey-light;
	position: relative;

	&:last-child{
		border-bottom: 0;
	}
}

.vjs-playlist ul li a.vjs-track{
	color: @color_black;
	padding-left: 45px;
	position: relative;
	padding-right: 100px;

	padding-left: 60px;
	color: darken(@color_grey-dark, 15%);

	&:before{
		content: '\f04b';
		font-family: @icons;
		position: absolute;
		display: block;
		color: @color_grey-dark;
		font-size: 13px;
		top: 13px;
		left: 15px;
		width: 30px;
		height: 30px;
		border: 1px solid @color_grey-light;
		border-radius: 3px;
		text-align: center;
		text-indent: 4px;
		line-height: 30px;
	}

	&.currentTrack:before{
		content: '\f028';
		color: @color_blue;
		font-size: 14px;
		text-indent: 3px;
		line-height: 28px;
	}

	.transition(color);

	&.currentTrack{
		background-color: white;
		color: @color_blue;
	}
}

.vjs-playlist ul li:hover{
	background-color: white;

	a.vjs-track{
		color: @color_blue;
		text-decoration: none;
	}
}

.vjs-playlist ul li a.video-playlist-item-download{
	position: absolute;
	padding: 0;
	width: auto;
	right: 10px;
	padding: 10px;
    top: 5px;
    z-index: 2;
    .transition(color);
    color: @color_grey-dark;

    &:hover{
    	color: @color_blue;
    }
}

.video-playlist-item-duration{
	position: absolute;
	right: 50px;
	top: 15px;
}

.video-playlist-custom.video-js{
	margin: 0;
}

.video-js .vjs-control.vjs-prev-button,
.video-js .vjs-control.vjs-next-button{
	&:focus:before, &:focus{
		text-shadow: none;
	}

	&:before{
	    line-height: 30px;
		font-family: @icons;
		font-size: 12px;
	}
}



.video-js .vjs-control.vjs-prev-button:before{
	content: '\f049';
}

.video-js .vjs-control.vjs-next-button:before{
	content: '\f050';
}