/*
* Player playlisty w ramce <iframe> na cudzej stronie ( templates/default/embed.php ).
* Sama strona jest goła - tu jest tylko to, czego nie ma w style.css: układ ramki
* i chowanie elementów, które poza serwisem nie mają sensu ( polubienia, link do logowania ).
*/

/* wysokosc ramki jest liczona z liczby utworow ( core/libraries/playlist-embed.php ),
   wiec lista nie ma wlasnego przewijania - po prostu miesci sie w calosci */
html{height:auto;}
body.embed-page{min-height:100%;margin:0;padding:0;display:flex;flex-direction:column;overflow-x:hidden;
  background:var(--color-bg);color:var(--color-text);}

/* pasek z nazwą playlisty */
.embed-page .embed-top{flex:0 0 auto;display:flex;align-items:center;gap:1em;padding:.7em 1em;}

.embed-page .embed-logo{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:inherit;}
.embed-page .embed-logo strong{font-size:1.1rem;letter-spacing:.08em;}
.embed-page .embed-logo span{font-size:.6rem;opacity:.6;letter-spacing:.04em;}

.embed-page .embed-title{display:flex;flex-direction:column;min-width:0;}
.embed-page .embed-playlist{font-size:1rem;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.embed-page .embed-owner{font-size:.75rem;opacity:.7;}

/* lista utworów - cała widoczna, bez własnego paska przewijania */
.embed-page .embed-list{flex:1 1 auto;overflow:visible;padding:.3em 0 0;}
/* lista ma iść na całą szerokość ramki ( tak jak pasek odtwarzacza ) - w serwisie
   akordeon playlist jest węższy ( width:90%, max-width:1440px ) i w ramce byłoby to widać */
.embed-page .embed-list .user-playlists-accordion{width:100%;max-width:none;margin:0;}
.embed-page .embed-list .playlist-item{border:0;border-radius:0;margin:0;}
.embed-page .embed-list .playlist-files-container{margin:0;}
.embed-page .embed-list .file-entry{margin:0;}

/* poza serwisem te elementy nie działają: polubienia prowadzą do logowania,
   a minus kasuje utwór z cudzej playlisty */
.embed-page .favorite,
.embed-page .remove-from-playlist,
.embed-page .toggle-details,
.embed-page .share,
.embed-page .download{display:none !important;}

/* pasek odtwarzacza trzyma się dołu ramki, a nie okna przeglądarki; "sticky" ratuje sytuację,
   gdyby ramka była niższa niż lista ( np. ktoś skrócił height w kodzie ) */
.embed-page .controls.playlist-player{position:sticky;flex:0 0 auto;bottom:0;left:auto;right:auto;width:100%;}
.embed-page .controls.playlist-player.fs{position:fixed;}

/* w wąskiej ramce nie ma miejsca na wszystko */
@media all and (max-width:760px){
  .embed-page .embed-top{padding:.5em .7em;}
  .embed-page .embed-logo span{display:none;}
}