/** 
  SimplePlaylist: Audio player from a list
  Copyright (c) 2024 Petko Yotov
  MIT License
  https://www.pmwiki.org/Cookbook/SimplePlaylist
*/

ol.simpleplaylist {
  border: 4px solid var(--sp-bordercolor);
  max-height: calc(100vh - 3em);
  overflow-y: auto;
  counter-reset: li;
  list-style: none;
  padding: 0;

  --sp-bordercolor: #999;
  --sp-current-color: #37a;
  --sp-current-bgcolor: #ddd;
  --sp-hover-bgcolor: #dfd;
  --sp-error-color: #800;
}

html.pmDarkTheme ol.simpleplaylist {
  --sp-bordercolor: #333;
  --sp-current-color: #74b0e7;
  --sp-current-bgcolor: #222;
  --sp-hover-bgcolor: #0f2b13;
  --sp-error-color: #ff906b;
}

ol.simpleplaylist.numbered > li.track::before {
  content: attr(data-counter) ". " ;
  display: inline-block;
  width: 3em;
  margin-right: .4em;
  text-align: right;
}

ol.simpleplaylist li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: .2em .4em;
}

ol.simpleplaylist li.error {
  color: var(--sp-error-color);
}

ol.simpleplaylist li:not(:last-child) {
  border-bottom: 1px solid var(--sp-bordercolor)
}

ol.simpleplaylist li.track {
  cursor: pointer;
}

ol.simpleplaylist li:not(.track) {
  opacity: .67;
}

ol.simpleplaylist.numbered > li.track.current::before {
  content: '\25B6';
  font-weight: normal;
  
}

ol.simpleplaylist > li.track.error::before {
  content: '\26A0';  
}


ol.simpleplaylist li.track:hover {
  background-color: var(--sp-hover-bgcolor);
}
ol.simpleplaylist li.track.current {
  color: var(--sp-current-color);
  background-color: var(--sp-current-bgcolor);
  font-weight: bold;
}


ol.simpleplaylist li.track a {
  color: inherit;
  text-decoration: none;
}

audio.simpleplaylist {
  width: 100%;
  height: 2em;
}