/*---------------------------------------------------
    
    MUSIC PLAYER #03 by glenthemes
    glen-docs.gitlab.io/player/03
    
    Initial release: 2019/01/29
    Revamp #1 date: 2021/08/27
    Revamp #2 date: 2024/01/20
    Last updated: 2024/07/21
    
---------------------------------------------------*/

@import url("https://glen-players.gitlab.io/03/icons.css");

@font-face {
                font-family: Clover;
                src: url('/fonts/Clover.ttf');
            }
            

[glenplayer03]{
  position:fixed;
  bottom:0;
  width:var(--MusicPlayer-Width);
  display:flex;
  flex-direction:column;
  
  /* pls do not override these */
  --MusicPlayer-Title-Height:0px;
  --MusicPlayer-Buttons-Touch-Padding-Y:var(--MusicPlayer-Buttons-Touch-Padding);
  --MusicPlayer-Buttons-Touch-Padding-X:calc(var(--MusicPlayer-Buttons-Touch-Padding) + (var(--MusicPlayer-Buttons-Size) * 0.15));
  
  /* hidden variables, feel free to override these */
  --MusicPlayer-Title-Touch-Padding:0px;
  --MusicPlayer-Max-Height:85vh;
  --MusicPlayer-Line-Height:1.55; /* numbers only, no suffixes */
  --MusicPlayer-Scrollbar-Padding:15px;
}

[glenplayer03][position="left"]{
  left:0;margin-left:var(--MusicPlayer-Screen-Gap);
}

[glenplayer03][position="right"]{
  right:0;margin-right:var(--MusicPlayer-Screen-Gap);
}

/*----- MUSIC PLAYER TITLE -----*/
[glenplayer03] button[player-title]{
  display:block;
  margin:0;
  padding:var(--MusicPlayer-Title-Touch-Padding) 0 0 0;
  width:100%;
  text-align:center;
  font-family: 'Clover';
  line-height:inherit;
  border:none;
  background:transparent;
  cursor:inherit;
  outline:none;
  -webkit-touch-callout:text;
  -webkit-user-select:text;
  -khtml-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}

[glenplayer03][click-activ] button[player-title]{
  cursor:pointer;
}

[glenplayer03] button[player-title] h3 {
  margin:0;
  padding:calc(var(--MusicPlayer-Title-Padding) - (((var(--MusicPlayer-Title-Size) * var(--MusicPlayer-Line-Height)) - var(--MusicPlayer-Title-Size)) / 2)) var(--MusicPlayer-Title-Padding);
  background:var(--MusicPlayer-Title-BG);
  font:500 var(--MusicPlayer-Title-Size)/var(--MusicPlayer-Line-Height) "Figtree", sans-serif;
  text-transform:uppercase;
  letter-spacing:0.069em;
  word-spacing:0.05em;
  color:var(--MusicPlayer-Title-Color);
  border-radius:var(--MusicPlayer-Title-Rounded-Corners) var(--MusicPlayer-Title-Rounded-Corners) 0 0;
}

/*----- RISE AND FALL -----*/
[glenplayer03][hov-activ]:not(.show-on-start) [list-wrapper-a],
[glenplayer03][click-activ] button[player-title] + [list-wrapper-a]{
  display:grid;
  grid-template-rows:0fr;
  overflow:hidden;
  transition:grid-template-rows var(--MusicPlayer-Animation-Speed) ease-in-out;
}

[glenplayer03][hov-activ]:not(.show-on-start) button[player-title] + [list-wrapper-a] [list-wrapper-b],
[glenplayer03][click-activ] button[player-title] + [list-wrapper-a] [list-wrapper-b]{
  min-height:0;
}

[glenplayer03][hov-activ]:not(.show-on-start):hover [list-wrapper-a],
[glenplayer03][click-activ] button[player-title].clicked + [list-wrapper-a]{
  grid-template-rows:1fr;
}

/*----- MUSIC PLAYER LIST -----*/
[glenplayer03] [music-list]{
  display:none;
  flex-direction:column;
  gap:var(--MusicPlayer-List-Row-Spacing) 0;
  
  background:var(--MusicPlayer-List-BG);
  padding:var(--MusicPlayer-List-Padding);
  overflow-y:auto;
  scrollbar-width:thin;
  
  max-height:calc(var(--MusicPlayer-Max-Height) - var(--MusicPlayer-Title-Height) + var(--MusicPlayer-Title-Touch-Padding));
  
  border-left:var(--MusicPlayer-List-Borders-Size) solid var(--MusicPlayer-List-Borders-Color);
  border-right:var(--MusicPlayer-List-Borders-Size) solid var(--MusicPlayer-List-Borders-Color);
  box-sizing:border-box;
}

[glenplayer03] [music-list]::-webkit-scrollbar {
    width:var(--MusicPlayer-Scrollbar-Padding);
    height:var(--MusicPlayer-Scrollbar-Padding);
    background-color:transparent;
}
 
[glenplayer03] [music-list]::-webkit-scrollbar-thumb {
    background-color:var(--MusicPlayer-Scrollbar-Color);
    border:calc((var(--MusicPlayer-Scrollbar-Padding) - 1px) / 2) solid transparent;
    background-clip:padding-box;
}

[glenplayer03] [music-list]::-webkit-scrollbar-corner {
    background:transparent;
}

[glenplayer03] [music-list].ready {
  display:flex!important;
}

[glenplayer03] figure {
  margin:0;
}

[glenplayer03] [song-row]{
  display:grid;
  grid-template-columns:var(--MusicPlayer-Album-Image-Size) auto calc(var(--MusicPlayer-Buttons-Size) + var(--MusicPlayer-Buttons-Touch-Padding-X) + 2px);
  align-items:center;
  gap:0 var(--MusicPlayer-Album-Gap-Right);
}

/*----- MUSIC PLAYER ALBUM IMAGE -----*/
[glenplayer03] img {
  display:block;
  align-self:flex-start;
  width:var(--MusicPlayer-Album-Image-Size);
  height:var(--MusicPlayer-Album-Image-Size);
  object-position:center;
  object-fit:cover;
  border-radius:var(--MusicPlayer-Album-Image-Rounded-Corners);
  flex-shrink:0;
}

[glenplayer03] [song-details]{
  display:flex;
  flex-direction:column;
  gap:calc(((var(--MusicPlayer-Artist-Name-Size) * var(--MusicPlayer-Line-Height)) - var(--MusicPlayer-Artist-Name-Size)) / -2) + var(--MusicPlayer-Details-Row-Gap) 0;
  text-align:left;
  flex:1;
}

[glenplayer03] [song-details] > * {
  display:block;
}

/*----- MUSIC PLAYER SONG NAME -----*/
[glenplayer03] [song-name]{
  font:normal var(--MusicPlayer-Song-Name-Size)/var(--MusicPlayer-Line-Height) "Public Sans", sans-serif;
  text-transform:uppercase;
  letter-spacing:0.069em;
  color:var(--MusicPlayer-Song-Name-Color);
}

/*----- MUSIC PLAYER ARTIST NAME -----*/
[glenplayer03] [artist-name]{
  font:500 var(--MusicPlayer-Artist-Name-Size)/var(--MusicPlayer-Line-Height) "Karla", sans-serif;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--MusicPlayer-Artist-Name-Color);  
}

/*----- MUSIC PLAYER CONTROLS -----*/
[glenplayer03] [music-controls]{
  margin-right:calc(0px - var(--MusicPlayer-Buttons-Touch-Padding-X) + 2px);
}

[glenplayer03] [music-controls] button {
  display:block;
  border:none;
  margin:0;
  background-color:transparent;
  padding:var(--MusicPlayer-Buttons-Touch-Padding-Y) var(--MusicPlayer-Buttons-Touch-Padding-X);
  cursor:pointer;
}

[glenplayer03] [music-controls] [pause-btn]{
  display:none;
}

[glenplayer03] [music-controls] button > i[class]{
  display:block;
  font-size:var(--MusicPlayer-Buttons-Size);
  color:var(--MusicPlayer-Buttons-Color);
}

[glenplayer03] audio { display:none!important; }