/*
	Mushroom Spotify App — Web Compatibility Shim CSS
	Stands in for $views/css/{buttons,image,list,popup,tabbar,throbber}.css
	which used to be served by the Spotify desktop client.
*/

/* ------------------------------------------------------------------
   Tab bar — replaces the chrome the Spotify desktop client provided.
   Declared in index.html (inside #header .right), populated from
   manifest.json's DefaultTabs. Active class managed in the shim.
   ------------------------------------------------------------------ */

/* Override mushroom.css's #header which was sized (height 60px, .right 155px)
   for just the social icons. We need room for tabs too. */
#header                  { height: 85px !important; }
#header .right           { width: auto !important; max-width: 740px; padding: 12px 15px 0 0 !important; }
#header .right .social   { float: right; }

.mushroom-tabs {
	display: block;
	clear: right;
	float: right;
	margin: 10px 0 0 0;
	font-family: 'ITCAvantGardePro-Md', 'ITCAvantGardePro-Bold', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
}

.mushroom-tabs a {
	display: inline-block;
	padding: 4px 14px;
	color: #ffffff;
	text-decoration: none;
	background: none;
	border: 0;
	transition: color 120ms ease;
}

/* Pipe separators between tabs */
.mushroom-tabs a + a {
	border-left: 1px solid #ffffff;
}

.mushroom-tabs a:hover   { color: #C03922; text-decoration: none; background: none; }
.mushroom-tabs a.active  { color: #C03922; background: none; }


/* Placeholder tile used by Image.forTrack / forAlbum / forPlaylist / fromSource */
.shim-tile {
	width: 180px;
	height: 180px;
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 4px;
	position: relative;
	transition: transform 120ms ease, box-shadow 120ms ease;
	cursor: pointer;
}

/* Default music-note icon when no background image was supplied
   (recent-releases tiles, since the original Spotify widget would have
   looked up album art by URI). */
.shim-tile:not([style*="background-image"]) {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='%23C03922' d='M44 12v28.1A8 8 0 1 0 48 47V20h8v-8H44zM40 47a4 4 0 1 1-4-4 4 4 0 0 1 4 4z'/></svg>");
	background-size: 35%;
	background-position: center;
}

.shim-tile::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
	transition: background 120ms ease;
}

.shim-tile:hover::after {
	background: rgba(192, 57, 34, 0.15);
}

.shim-tile-link {
	display: inline-block;
	line-height: 0;
}

.shim-tile-link:hover {
	text-decoration: none;
}

/* Carousel hero player fills its container */
.populate_playlist[data-fill="true"] .shim-tile,
#tape .top .photo .shim-tile {
	width: 100% !important;
	height: 100% !important;
	min-height: 400px;
}

/* Placeholder tracklist (List.forPlaylist) */
.shim-tracklist {
	padding: 12px 0;
	font-family: Georgia, Serif;
	font-size: 14px;
	color: #555;
}

.shim-tracklist-link {
	display: inline-block;
	padding: 8px 14px;
	background: #1DB954;
	color: #fff;
	border-radius: 3px;
	font-family: 'ITCAvantGardePro-Md', sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.shim-tracklist-link:hover {
	background: #169c44;
	color: #fff;
	text-decoration: none;
}

/* Subscribe button (buttons.SubscribeButton.forPlaylist) */
.shim-subscribe {
	display: inline-block;
	padding: 6px 14px;
	background: #C03922;
	color: #fff;
	border-radius: 3px;
	font-family: 'ITCAvantGardePro-Md', sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.shim-subscribe:hover {
	background: #000;
	color: #fff;
	text-decoration: none;
}

/* Spotify throbber stand-in (the original used .sp-throbber) */
.sp-throbber {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 3px solid rgba(0,0,0,0.1);
	border-top-color: #C03922;
	border-radius: 50%;
	animation: shim-spin 0.8s linear infinite;
}

@keyframes shim-spin {
	to { transform: rotate(360deg); }
}

/* Stubs for classes that the original Spotify-served CSS would have provided.
   Mostly invisible safety net so any lingering references don't break layout. */
.sp-image, .sp-image-img { display: block; width: 100%; height: 100%; }
.sp-list-item-playing, .sp-list-item-paused { background: rgba(192, 57, 34, 0.08); }
.sp-icon-nowplaying { display: inline-block; width: 12px; height: 12px; background: #C03922; border-radius: 50%; }