html{
  --seeker-percent:0%;
  
}

#AudioPlayer{
  width:80%;
  background:var(--accent2);
  border:2px solid var(--black);
  display:flex;
  padding:.5em 1em;
  box-sizing: border-box;
  grid-gap:.25rem;
}
#AudioTrackList{
  width:80%;
  background:var(--white);
  border:2px solid var(--black);
  display:grid;
  grid-template-columns: max-content auto max-content;
  grid-auto-rows: max-content;
  height:100px;
  
  box-sizing: border-box;
  border-bottom:none;
}

#AudioTrackList>div{display:contents;--bg-color:color-mix(in srgb,var(--accent2) 15%,var(--white));user-select:none}
#AudioTrackList>div:nth-child(2n){
  --bg-color:color-mix(in srgb,var(--accent2) 15%,var(--white));
  background:color-mix(in srgb,var(--accent2) 7.5%,var(--white));
}
#AudioTrackList>div:nth-child(2n)>div{
  background:color-mix(in srgb,var(--accent2) 7.5%,var(--white));
}
#AudioTrackList>div:hover>div{background-color:var(--bg-color)}
#AudioTrackList>div>div{
  box-sizing: border-box;
  padding:0 .5rem;
  text-align: left;
  user-select:none
}
#AudioWrapper{
  width:100%;
  display:flex;
  align-items: center;
  flex-direction: column;
}

#AudioPlayerNameSeeker{
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
#AudioPlayerName{
  color:var(--white);
  text-align: left;
  overflow:hidden;
  text-overflow: ellipsis;
}
#AudioPlayerSeeker{
  background:linear-gradient(to right, var(--accent), var(--accent) var(--seeker-percent), color-mix(in srgb,var(--white),var(--black)) var(--seeker-percent), color-mix(in srgb,var(--white),var(--black)));
  height:12px;
  flex-grow:1;
}
#AudioPlayerSeekerWrapper{
  display:flex;
  flex-grow:1;
  align-items:center;
  grid-gap:4px;
  font-size:.75rem;
}

#AudioPlayerControls{
  display:grid;
  grid-template-columns: repeat(3,max-content);
  grid-gap:4px
}
#AudioPlayerDuration{
  color:var(--white);
  width: 3.5em;
}
#AudioPlayerThumbnail{
  width:48px;
  height:48px;
  background-size:cover;
}

#AudioPlayerControls>div{
  text-align: center;
  justify-self: center;
  align-self: center;
  max-height: 1em;
  max-width: 1em;
  padding:1px 4px 3px 4px;
  line-height: 1em;
  overflow-y:clip;
  color:var(--white);
}

#AudioPlayerControls>div:hover{
  background-color:var(--white);
  color:var(--black);
}


#AudioPlayerControls>#AudioPlayerPause{
  padding:2px 4px;
  
}

#AudioPlayerPause::before{
  content:"▶";
  font-size:.7rem;
}
#AudioPlayerPause.playing::before{
  content:"⏸";
  font-size:1rem;
}
#AudioPlayerNext::before{
  content:"⏮";
    font-size:1rem;
}
#AudioPlayerBack::before{
  content:"⏭";
    font-size:1rem;
}