/*
    Document        : mep-feature-playlist.css
    Author          : Andrew Berezovsky <andrew.berezovsky@gmail.com>
    Original Author : Junaid Qadir Baloch <shekhanzai.baloch@gmail.com>
    https://github.com/duozersk/mep-feature-playlist
*/

/* Start: Show/Hide Playlist*/
.mejs__controls .mejs__show-playlist button {
  background: transparent url(controls-playlist.svg) no-repeat;
  background-position: -200px 0;
}
.mejs__controls .mejs__hide-playlist button {
  background: transparent url(controls-playlist.svg) no-repeat;
  background-position: -180px 0;
}
/* End: Show/Hide Playlist */

/* Start: Previous */
.mejs__controls .mejs__prevtrack button {
  background: transparent url(controls-playlist.svg) no-repeat;
	background-position: -20px 0;
}
/* End: Previous */

/* Start: Next */
.mejs__controls .mejs__nexttrack button {
  background: transparent url(controls-playlist.svg) no-repeat;
	background-position: 0px 0;
}
/* End: Next */

/* Start: Loop */
.mejs__controls .mejs__loop-button button {
	background: transparent url(controls-playlist.svg) no-repeat;
  background-position: -120px 0;
}
.mejs__controls .mejs__loop-button.mejs__loop-off button {
  background-position: -160px 0;
}
/* End: Loop */

/* Start: Shuffle */
.mejs__controls .mejs__shuffle-on button {
  background: transparent url(controls-playlist.svg) no-repeat;
	background-position: -100px 0;
}
.mejs__controls .mejs__shuffle-off button {
  background: transparent url(controls-playlist.svg) no-repeat;
	background-position: -140px 0;
}
/* End: Shuffle */

/*Start: Playlist*/
.mejs-playlist {
	margin: 0;
	text-align: left;
	padding: 10px;
	background: #ddd;
}
.mejs-playlist ul {
	margin:0;
}
.mejs-playlist .track,
.mejs-playlist .short.track {
	cursor: pointer;
	position: relative;
	padding-left: 26px;
}
.mejs-playlist .track .entry {
	display: block;padding-left: 34px;
}
.mejs-playlist .track .publication {display: none}
.mejs-playlist .track .entry-content {display: block;margin-bottom: 0}
.mejs-playlist .track .entry-content :last-child {margin-bottom: 0}

.mejs-playlist .track:hover {
  background: #eee;
}
.mejs-playlist .track.current {
	background: #fff;
}
.mejs-playlist .track.current .entry-title {
  font-weight: bold;
}
.track .mejs__button {
	float:left;
	margin-right: 10px;
	width: 24px;
	height: 24px;
	position: relative;
	z-index: 2;
}
.track .mejs__button button {
	margin: 4px;
}
.track .mejs__button button:before {
	content:"";
	display: block;
	position: absolute;
	top:-4px;
	left: -4px;
	background: #666;
	border-radius:50%;
	width: 24px;
	height: 24px;
	z-index: -1;
}
.track:hover .mejs__button button:before,
.track .mejs__button button:focus:before {
	background: #333;
}

.current .mejs__button button:before,
.current .mejs__button button:focus:before {
	background: #000;
}
.track .mejs__button.mejs__play button {
	margin-left:5px;
}
.track .mejs__button.mejs__play button:before {
	left:-5px;
}

/*End: Playlist*/