#spotifyNowPlayingContainer{
	display:flex;
	height:100%;
	width:0px;
	transition: width 2.5s ease-out, height 2.5s ease-out;
	overflow:hidden;
	background-color: var(--secondaryColor);
	position: relative;
}
#spotifyNowPlayingContainer > span{
	max-width: 22px;
	min-width: 11px;
	flex:1;
	display:flex;
	flex-flow:row nowrap;
}
#spotifyNowPlayingContainer > span span{
	flex:1;
	height:100%;
}
#spotifyNowPlaying{
	display:flex;
	flex-flow: column nowrap;
	height:100%;
	max-width:256px;
	min-width: 128px;
	flex:1;
	overflow: hidden;
	position:relative;
}
/*#region Player, cards, and queue*/
/*#region player*/
#player{
	width:100%;
	flex:1;
	display:flex;
	flex-flow: column;
	max-height: calc(100vh - 120px);
	overflow:hidden;
}
#player p{
	margin:0;
}
#songName{
	width:100%;
	font-size:2em;
	padding-bottom: 10px;
}
#bandName{
	width:100%;
	font-size: 1.7em;
	opacity:0.75;
	padding-bottom: 10px;
}
/*#endregion*/
/*#region Queue*/
#queueDivContainer{
	display:flex;
	width:100%;
	flex:1;
	border-radius:16px;
    flex-direction: column;
	min-height: 0;
    overflow: hidden;
}
#queueDivHeader{
	font-size:1.8em;
	margin:0;
	background-color: var(--primaryColor);
	width:100%;
	padding:10px;
}
#queueDivs{
	flex: 1; /* Take up the remaining space */
    overflow-x: hidden;
    overflow-y: scroll; /* Allow vertical scrolling */
    min-height: 0;
}
.queueDiv{
	display:flex;
	flex-flow:row nowrap;
	overflow:hidden;
	width:100%;
	background-color: var(--primaryColor);
	padding:10px;
}
.queueDiv > img{
	width:64px;
	height:64px;
}
.queueDivText {
    display: flex;
    flex-flow: column;
    align-items: center;  /* Align items (spans) horizontally in the center */
    justify-content: center;  /* Center items vertically */
    width: calc(100% - 64px);
}
.queueDivText > span {
    white-space: nowrap; /* Prevent the text from wrapping to the next line */
    overflow: hidden;    /* Ensures the overflow is hidden */
    text-overflow: ellipsis; /* Adds the ellipsis (...) when the text overflows */
    display: inline-block; /* Ensure the span behaves as an inline-block element */
    width: 100%; /* Fill the width of the container */
    text-align: left; /* Center the text inside the span */
}
.queueDiv:last-of-type {
    border-radius: 0px 0px 16px 16px;
}
/*#endregion*/
/*#region CARD FADERS*/
#cards{
	position: relative;
	aspect-ratio: 1/1;
	min-height: 256px;
	max-height: 256px;
}
#cards img{
	max-height: 100%;
}
#cards > div{
	height:100%;
	width:100%;
	position: relative;
}
#cards > div > div{
	aspect-ratio: 1/1;
	width:100%;
	position: absolute;
}
#cards > div > img{
	z-index: 5;
}
#cards > div img{
	position: absolute;
	height:100%;
	aspect-ratio: 1/1;
}
.card-fader:nth-child(odd) {
	animation: fade-left 3s linear infinite;
}
.card-fader:nth-child(even) {
	animation: fade-right 3s linear infinite;
}

.card-fader:is(:nth-child(3), :nth-child(4)) {
	animation-delay: 750ms;
}
.card-fader:is(:nth-child(5), :nth-child(6)) {
	animation-delay: 1500ms;
}
.card-fader:is(:nth-child(7), :nth-child(8)) {
	animation-delay: 2250ms;
}

@keyframes fade-left {
	from {
	  scale: 1;
	  translate: 0%;
	  opacity: 1;
	}
	
	to {
	  scale: 0.8;
	  translate: -30%;
	  opacity: 0;
	}
}
@keyframes fade-right {
	from {
	  scale: 1;
	  translate: 0%;
	  opacity: 1;
	}
	
	to {
	  scale: 0.8;
	  translate: 30%;
	  opacity: 0;
	}
}
/*#endregion*/
/*#endregion*/
/*#region tools*/
#tools{
	position: relative;
	height:120px;
	display:flex;
	flex-flow: column;
	width:100%;
}
#tools > div{
	height:40px;
	width:100%;
	position: relative;
	transition: top ease .5s;
	top:100%;
}
#playBackTools{
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
    align-items:center;
}
.playBackTools{
    aspect-ratio: 1/1;
    height: 66%;
	max-height: 50px;
	mask-size: contain;
    mask-position: center center;
    mask-repeat: no-repeat;
	filter: invert(24%) sepia(0%) saturate(0%) hue-rotate(232deg) brightness(98%) contrast(93%);
}
.playBackTools:hover{
	filter: invert(100%) sepia(0%) saturate(7471%) hue-rotate(44deg) brightness(95%) contrast(111%);
}
img.playBackTools[data-enabled="1"]{
	filter:invert(79%) sepia(55%) saturate(7386%) hue-rotate(104deg) brightness(101%) contrast(77%);
}
#toggleStateContainer{
    aspect-ratio: 1/1;
    height: 100%;
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
	transition: padding .1s ease;
	box-sizing:content-box;
	position: absolute;   
	left: 50%;
    transform: translate(-50%, 0);
}
#toggleStateContainer:hover{
    padding:10px;
}
#toggleStateContainer:active{
    padding:10px;
	height:75%;
}
#nowPlayingToggleState{
    width:50%;
    height: 50%;
    background: url(../images/play.svg);
    background-position: center center;
    background-size: contain; 
    background-repeat: no-repeat;
    pointer-events: none;
}
#songBar:hover ~ #tools > div{
	top:0;
}
#songBar{
	display:flex;
	font-size: 0.9em;
    align-items: center;
	justify-content: center;
    gap:10px;
	z-index: 50;
	position: absolute;
	bottom:0;
	width:100%;
	height:40px;
}
#currentProgress{
    height:min-content;
	position: absolute;
	left:0;
}
#totalProgress{
    height:min-content;
	position: absolute;
	right:0;
}
#songBar > div{
	width:66%;
	height:10px;
	border-radius: 5px;
	background-color: #404040;
}
#songBar > div > div{
	width:0;
	height:10px;
	border-radius: 5px;
	transition: width .5s ease-out;
	background-color: #fff;
}
#songBar > div:hover > div{
	background-color: var(--spotifyGreen);
}
#volumeSlider{
    display:flex;
    align-items: center;
    justify-content: center;
    gap:10px;
    position:relative;
}
#muteButton:hover{
	filter: invert(100%) sepia(0%) saturate(7471%) hue-rotate(44deg) brightness(95%) contrast(111%);
}
#muteButton:active{
	filter: invert(79%) sepia(55%) saturate(7386%) hue-rotate(104deg) brightness(101%) contrast(77%);
}
#volumeSliderDiv{
	width:66%;
	background-color: #404040;
	height:10px;
	border-radius:5px;
	overflow:hidden;
}
#volumeSliderDiv > div{
	width:0%;
	background-color: #fff;
	height:10px;
	border-radius:5px;
	transition: width .5s ease-out;
}
#volumeSliderDiv:hover > div{
	background-color: #1DB954;
}
#tools:hover > div{
	top:0;
}
#tools:hover > #playBackTools > #toggleStateContainer{
	z-index: 3;
}
#muteButton{
	height:60%;
	max-height: 50px;
    aspect-ratio: 1/1;
	position: absolute;
	left:0;
	mask-size: contain;
    mask-position: center center;
    mask-repeat: no-repeat;
	filter: invert(24%) sepia(0%) saturate(0%) hue-rotate(232deg) brightness(98%) contrast(93%);
}
/*#endregion*/
/*#region device/currentSongTools*/
#deviceControl{
	height:60%;
	max-height: 50px;
    aspect-ratio: 1/1;
	position: absolute;
	right:0;
	mask-size: contain;
    mask-position: center center;
    mask-repeat: no-repeat;
	filter: invert(24%) sepia(0%) saturate(0%) hue-rotate(232deg) brightness(98%) contrast(93%);
}
#deviceControl:hover ~ #devices{
	display: block;
	pointer-events: auto;
}
#devices:hover{
	display: block;
	pointer-events: auto;
}
#devices{
	z-index: 5;
	position: absolute;
	width:100%;
	transform: translate(0, -50%);
	display:none;
	background-color: #404040;
	border-radius: 16px 16px 0 16px;
}
#currentDevices{
	display:flex;
	flex-flow:column nowrap;
	padding:16px;
	border:solid 0px black;
	border-bottom-width: 4px;
}
#currentDevices span{
	text-align: right;
	font-size:1.5em;
	order:2;
}
#currentDevices span[data-active]{
	color:var(--spotifyGreen);
	order:1;
}
#currentSongTools{
	display:flex;
	padding:16px;
	justify-content: space-around;
}
#currentSongTools img{
	width:32px;
	height:32px;
	filter: brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(2%) hue-rotate(72deg) brightness(101%) contrast(101%);
}
#currentSongTools img:hover{
	filter: brightness(0) saturate(100%) invert(75%) sepia(64%) saturate(5570%) hue-rotate(100deg) brightness(97%) contrast(77%);
}
#currentSongTools img[data-active="1"]{
	filter: brightness(0) saturate(100%) invert(75%) sepia(64%) saturate(5570%) hue-rotate(100deg) brightness(97%) contrast(77%);
}
/*#endregion*/