/*---------------------------------------------------
                
                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");

            [glenplayer03]{
            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-Max-Height:70vh;
            --MusicPlayer-Line-Height:1.55; /* numbers only, no suffixes */
            --MusicPlayer-Scrollbar-Padding:15px;

            border-bottom: 2px solid #043763;
            }

            /*----- 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:inherit;
            line-height:inherit;
            border: solid #043763;
            border-width: 2px 2px 1px 2px;
            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:var(--MusicPlayer-Title-Size)/var(--MusicPlayer-Line-Height) MS PGothic;
            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;
            }

            /*----- 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);
            box-shadow: 0px 0px 0px 1px var(--blue);
            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: var(--MusicPlayer-Song-Name-Size)/var(--MusicPlayer-Line-Height) MS PGothic;
            letter-spacing:0.069em;
            color:var(--MusicPlayer-Song-Name-Color);
            }

            /*----- MUSIC PLAYER ARTIST NAME -----*/
            [glenplayer03] [artist-name]{
            font: var(--MusicPlayer-Artist-Name-Size)/var(--MusicPlayer-Line-Height) MS PGothic;
            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] button:focus {
                background-color: #04376373;
            }

            [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; }

            [glenplayer03]{
                /*--- player options ---*/
                --MusicPlayer-Screen-Gap:30px;
                --MusicPlayer-Width:230px;
                z-index:700; /* increase this number if you can't see or interact with the player */

                /*--- animation options ---*/
                --MusicPlayer-Always-Show:"yes"; /* "yes" will disable the next 2 options */

                --MusicPlayer-Start-State:"hide"; /* "show" or "hide" */
                --MusicPlayer-Interaction-Trigger:"hover"; /* "hover" or "click" */

                --MusicPlayer-Animation-Speed:0.7s;

                /*--- playback options ---*/
                --Autoplay-First-Song:"no";
                --Autoplay-Next-Song:"yes";
                --Loop-Playlist:"yes";

                /*--- player title ---*/
                --MusicPlayer-Title-Size:0.8rem;
                --MusicPlayer-Title-Color:#043763;
                --MusicPlayer-Title-BG:#e4f5e1;
                --MusicPlayer-Title-Padding:14px;

                /*--- songs list ---*/
                --MusicPlayer-List-Padding:14px;
                --MusicPlayer-List-BG:#e4f5e1;
                --MusicPlayer-List-Borders-Size:2px;
                --MusicPlayer-List-Borders-Color:#043763;
                --MusicPlayer-List-Row-Spacing:9px;

                /*--- album image/thumbnail ---*/
                --MusicPlayer-Album-Image-Size:32px;
                --MusicPlayer-Album-Gap-Right:10px;
                --MusicPlayer-Album-Image-Rounded-Corners: 50%;

                /*--- song name ---*/
                --MusicPlayer-Song-Name-Size:0.8rem;
                --MusicPlayer-Song-Name-Color:#043763;
                --MusicPlayer-Song-Name-Font: MS PGothic;

                /*--- artist name ---*/
                --MusicPlayer-Artist-Name-Size:0.7rem;
                --MusicPlayer-Artist-Name-Color:#043763;

                /*--- more options ---*/
                --MusicPlayer-Details-Row-Gap:2px;

                /*--- player buttons ---*/
                --MusicPlayer-Icon-Style:"outline"; /* "fill" or "outline" */
                --MusicPlayer-Buttons-Touch-Padding:4px;
                --MusicPlayer-Buttons-Size:10px;
                --MusicPlayer-Buttons-Color:#043763;
            }

            [glenplayer03] { @media (prefers-color-scheme: dark) {

                border-bottom: 2px solid #e4f5e1;
                --MusicPlayer-Title-Color:#e4f5e1;
                --MusicPlayer-Title-BG:#254969;
                --MusicPlayer-List-BG:#254969;
                --MusicPlayer-List-Borders-Color:#e4f5e1;
                --MusicPlayer-Song-Name-Color:#e4f5e1;
                --MusicPlayer-Artist-Name-Color:#e4f5e1;
                --MusicPlayer-Buttons-Color:#e4f5e1;
            }}

            [glenplayer03] [music-controls] button:focus {
                @media (prefers-color-scheme: dark) {
                    background-color: #e4f5e177;
                }
            }

            [glenplayer03] button[player-title]{
                @media (prefers-color-scheme: dark) {
                    border: solid 2px #e4f5e1;
                }
            }

            [glenplayer03] img {
                @media (prefers-color-scheme: dark) {
                    box-shadow: 0px 0px 0px 1px var(--white);
                }
            }