//
// Now Playing Bar - play/pause, track info, volume (bottom of screen)
//

// Now Playing Bar > Background
.Root__now-playing-bar {
    background-image: linear-gradient(#656565, 40%, #404040);
    border-top: 1px solid #373737;
}

// Now Playing Bar > Padding/Gap
footer.main-nowPlayingBar-container {
    padding: calc(var(--panel-gap));
    border-top: 1px solid #858585;
}

// Now Playing Bar > Progress Bar
.playback-progressbar > .progress-bar {
    --progress-bar-height: 10px;
}

.x-progressBar-progressBarBg {
    box-shadow: inset 0 6px 14px rgb(81 81 81 / 82%), inset 0 -6px 2px rgb(167 167 167);
}

.x-progressBar-fillColor {
    /* background-image: linear-gradient(#F3FFDB, 5%, #85C701, #4B9208); */
    background-image: linear-gradient(#b3d952, #4B9208);
    border-top: 1px solid #ccff65;
}

// Now Playing Bar > Progress Bar > Slider (mouseover)
.progress-bar__slider {
    width: 24px;
    height: 24px;
    box-shadow: 0 0 16px 4px #00000060;
}


// Now Playing Bar > Track Information > Cover Art
[data-testid="cover-art-button"] {
  border-radius: 0;
}

/* Bottom Bar > Left Icons > Drop Shadow */
.main-nowPlayingWidget-nowPlaying svg {
    filter: drop-shadow(0 1px 1px #222);
}

/* Bottom Bar > Right Icons > Drop Shadow */
.main-nowPlayingBar-extraControls svg {
    filter: drop-shadow(0 2px 1px #222);
}

// Now Playing Bar > Volume Bar
.volume-bar.main-nowPlayingBar-volumeBar .progress-bar__slider {
    width: 14px;
    height: 14px;
    box-shadow: 0 0 8px 4px #00000030;
}

/* Bottom Bar > Control Buttons > Drop Shadow */
.player-controls__buttons [class*="Button-checkbox-buttonTertiary-"] svg,
.player-controls__buttons [class*="Button-buttonTertiary-"] svg
{
    filter: drop-shadow(0 1px 1px #000);
}

// Bottom Bar > Play/Pause Button
[data-testid="control-button-playpause"] {
    border: 1px solid #373737;
}
