/*---------------------------------------------------
    
    MUSIC PLAYER #03 by glenthemes
    
    Initial release: 2019/01/29
    Major code update: 2021/08/27
    Last updated: 2021/08/27
    
---------------------------------------------------*/

[glenplayer03]{
    position:fixed;
    bottom:0;margin-bottom:0;
    width:var(--MusicBox-Width);
    display:none;
    z-index:699;
}

[glenplayer03][position='left']{
    left:0;margin-left:var(--MusicBox-Edge-Distance);
}

[glenplayer03][position='right']{
    right:0;margin-right:var(--MusicBox-Edge-Distance);
}

.wr-invis {
    margin-left:-7px;
    margin-right:-7px;
    padding:7px;
    padding-bottom:0;
    border-radius:var(--MusicBox-Title-Corner-Roundness) var(--MusicBox-Title-Corner-Roundness) 0 0;
}

[musicbox-title]{
    padding:calc(var(--MusicBox-Title-Padding) - 3px) var(--MusicBox-Title-Padding);
    background:var(--MusicBox-Title-Background);
    border-radius:var(--MusicBox-Title-Corner-Roundness) var(--MusicBox-Title-Corner-Roundness) 0 0;
    font-family:public sans;
    font-size:var(--MusicBox-Title-Size);
    text-transform:uppercase;
    letter-spacing:1.3px;
    line-height:1.69em;
    color:var(--MusicBox-Title-Color);
    text-align:center;
}

.dehors {
    position:relative;
}

.ouai {
    position:absolute;
    padding:var(--MusicBox-Main-Padding);
    background:var(--MusicBox-Main-Background);
	border-left:1px solid var(--MusicBox-Side-Borders);
	border-right:1px solid var(--MusicBox-Side-Borders);
    visibility:hidden;
}

[glenplayer03]:hover .ouai {
    margin-bottom:0px!important;
}

.trk-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.trk-row + .trk-row {
    margin-top:var(--Track-Spacing);
}

[gauche]{
    display:flex;
    align-items:center;
}

[album-art]{
    width:var(--Album-Art-Size);
    height:var(--Album-Art-Size);
    border-radius:var(--Album-Art-Corner-Roundness);
}

[album-art] + [txt]{
    margin-left:var(--Album-Art-Gap);
}

.trk-row [txt]{
    line-height:calc(var(--Song-Name-Size) * 1.420);
}

[song-name]{
    font-family:public sans;
    font-size:var(--Song-Name-Size);
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--Song-Name-Color);
}

[artist-name]{
    font-family:karla;
    font-size:var(--Artist-Name-Size);
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--Artist-Name-Color);
}

[mcontrols]{
    cursor:pointer;
    padding:5px;
    margin-right:-2px;
}

.jouer, .arreter {
    width:var(--Music-Buttons-Size);
    height:var(--Music-Buttons-Size);
    -webkit-mask-size:contain;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    background:var(--Music-Buttons-Color);
}

.jouer {
    -webkit-mask-image:var(--playicon);
}

.arreter {
    display:none;
    -webkit-mask-image:var(--pasicon);
}

.beff {display:none;}
.aff {display:block;}