:root {
  --spotify-main-color: #1db954;
  --round-value: 50%;
  --main-blur-backdrop: blur(20px) saturate(180%);
  --shine: conic-gradient(
    from 15deg,
    transparent,
    #222 45deg,
    transparent 90deg 180deg,
    #222 225deg,
    transparent 270deg 360deg
  )
}


/* Remove Upgrade Button, User Name */
.main-topBar-UpgradeButton,
.main-userWidget-displayName {
  display: none
}


/* Notification Dot */
.main-userWidget-notificationDot {
  color: #f00
}


/* Navbar */
.Root__nav-bar {
  background-color: #0f0f0f
}

.main-rootlist-rootlistDividerGradient {
  display: none
}


/* Search Input */
.x-searchInput-searchInputInput {
  background-color: #2a2a2a
}

.x-searchInput-searchInputInput,
.x-searchInput-searchInputSearchIcon,
.x-searchInput-searchInputClearButton {
  color: #c0c0c0 !important
}

.x-searchInput-searchInputInput::placeholder {
  color: #888
}


/* Playlist */
.main-entityHeader-backgroundColor,
.main-actionBarBackground-background,
.main-topBar-overlay {
  background-color: unset !important
}

.main-entityHeader-overlay {
  background: unset
}

.main-actionBarBackground-background {
  background-image: unset
}

.main-entityHeader-shadow {
  box-shadow: unset
}

.main-topBar-background {
  background-color: #181818 !important
}

.main-rootlist-wrapper [role="row"]:nth-child(odd) {
  background: linear-gradient(to right, #121212, #191919, #121212)
}


/* Cover Image */
.main-nowPlayingWidget-coverExpanded {
  transform: translateX(-78px) !important;
}

.main-coverSlotCollapsed-container {
  margin-right: 5px
}

.main-nowPlayingWidget-coverArt .cover-art.shadow,
.main-nowPlayingWidget-coverArt .cover-art-image {
  border-radius: var(--round-value)
}

.main-nowPlayingWidget-coverArt > .cover-art {
  clip-path: circle(50% at 50% 50%);
}

.main-nowPlayingWidget-coverArt .cover-art.shadow {
  width: 62px !important;
  height: 62px !important;
  box-shadow: unset
}

.main-nowPlayingWidget-coverArt .cover-art-image {
  border: 2px solid #aaa;
  box-shadow: 0 0 5px rgba(200, 200, 200, .4)
}

/* Expand & Collapse Button */
.main-coverSlotCollapsed-expandButton {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important
}

.main-coverSlotCollapsed-expandButton,
.main-coverSlotExpandedCollapseButton-collapseButton {
  backdrop-filter: var(--main-blur-backdrop);
  background: unset;
  background-color: rgba(9, 9, 9, .2);
  transition: background-color .5s, opacity .5s;
  border-radius: var(--round-value)
}

.main-coverSlotCollapsed-expandButton:hover,
.main-coverSlotExpandedCollapseButton-collapseButton:hover {
  background: unset;
  background-color: rgba(9, 9, 9, .3);
  transform: unset
}

.main-coverSlotCollapsed-chevron,
.main-coverSlotExpandedCollapseButton-chevron {
  padding: 5px;
  fill: #fff;
  transition: fill .5s
}

.main-coverSlotCollapsed-expandButton:hover .main-coverSlotCollapsed-chevron,
.main-coverSlotExpandedCollapseButton-collapseButton:hover .main-coverSlotExpandedCollapseButton-chevron {
  fill: #ddd
}


/* Progress Bar */
.Root__now-playing-bar {
  position: relative
}

.playback-bar {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0
}

.playback-progressbar {
  height: 4px
}

.x-progressBar-progressBarBg > div > div {
  background-color: var(--spotify-main-color)
}

.playback-bar__progress-time-elapsed,
.main-playbackBarRemainingTime-container {
  position: absolute;
  top: 12px;
  left: 50%
}

.playback-bar__progress-time-elapsed {
  transform: translateX(calc(-100% - 10px))
}

.playback-bar__progress-time-elapsed::after {
  position: absolute;
  left: calc(100% + 10px);
  font-weight: bold;
  color: var(--spotify-main-color);
  content: "/";
  transform: translateX(-50%)
}

.main-playbackBarRemainingTime-container {
  transform: translateX(10px)
}

.player-controls {
  margin-top: 38px
}


/* Full App Display */
#full-app-display {
  background: radial-gradient(#242424, #1f1f1f)
}

#fad-background {
  display: none
}

#fad-art,
#fad-art-image,
#fad-art-inner {
  border-radius: var(--round-value) !important
}

#fad-art {
  width: 268px !important;
  margin: 80px 100px;
  position: relative
}

#fad-art-image {
  box-shadow: 0 0 10px rgba(3, 3, 3, .5) inset
}

#fad-art-inner {
  display: none
}

#fad-art::before, #fad-art::after {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  content: ''
}

#fad-art::before {
  background:
    var(--shine),
    radial-gradient(#333, #000);
  box-shadow:
    0 0 5px #0a0a0a inset,
    0 0 5px #000;
  transform: scale(1.5)
}

#fad-art::after {
  background-color: rgba(60, 60, 60, .1);
  transform: scale(1.65);
  z-index: -1
}

#fad-details {
  max-width: 520px !important
}

#fad-details #fad-title {
  font-size: 32px
}

#fad-details #fad-artist {
  margin-top: 10px;
  font-size: 24px
}

#fad-details #fad-album {
  margin-top: 6px;
  font-size: 16px
}

#fad-details #fad-artist > *,
#fad-details #fad-album > *,
#fad-details #fad-status > #fad-controls > * > svg {
  vertical-align: middle
}

#fad-details #fad-artist > svg {
  width: 24px;
  height: 24px
}

#fad-details #fad-album > svg {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  margin-right: 9px
}

#fad-play > svg {
  width: 24px;
  height: 24px
}

#fad-controls > button > svg {
  fill: #ccc
}

#fad-controls > button:hover > svg {
  fill: #fff
}

#fad-progress-container {
  font-size: 12px
}

#fad-elapsed,
#fad-duration {
  min-width: 32px !important
}

#fad-progress {
  height: 2px !important;
  background-color: rgba(100, 100, 100, .5) !important
}

#fad-progress-inner {
  background-color: var(--spotify-main-color) !important;
  box-shadow: unset !important
}


/* Blur the Full App Display */
[data-is-blur-fad = "true"] #fad-background {
  display: unset
}

[data-is-blur-fad = "true"] #fad-art::before {
  background:
    var(--shine),
    radial-gradient(#242424, #000)
}

[data-is-blur-fad = "true"] #fad-art::after {
  background-color: rgba(100, 100, 100, .1);
  border: 1px solid rgba(100, 100, 100, .1);
  box-shadow:
    0 0 1px rgba(40, 40, 40, .2) inset,
    0 0 1px rgba(200, 200, 200, .2)
}

[data-is-blur-fad = "true"] #fad-progress {
  background-color: rgba(200, 200, 200, .3) !important
}


/* Full App Display - heart */
.fad-heart-container {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center
}

.fad-heart {
  width: 16px;
  height: 16px;
  padding: unset !important;
  background-color: unset;
  border: unset
}

.fad-heart svg {
  fill: #ccc
}

.fad-heart svg:hover,
.fad-heart.checked svg {
  fill: var(--spotify-main-color)
}


/* Full App Display - song preview */
.song-preview {
  width: 100%;
  padding: 0 10%;
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.song-preview > button {
  font-size: 14px;
  color: #ccc !important;
  background-color: unset;
  border: unset
}

.song-preview > button:hover {
  color: #fff !important
}


/* Responsive */
@media (max-width: 908px) {
  #fad-foreground {
    flex-wrap: wrap;
    align-content: center
  }

  #fad-details {
    padding-top: 50px
  }
}

@media (min-width: 1460px) and (min-height: 960px) {
  #fad-foreground,
  .main-trackCreditsModal-container {
    transform: scale(1.2) !important
  }

  .song-preview > button {
    font-size: 16px
  }
}

/* Rotate turntable */
.main-nowPlayingWidget-coverArt > .cover-art,
#fad-art {
  animation: rotate-cover_img 24s linear infinite
}

@keyframes rotate-cover_img {
  from {
    transform: rotate(0)
  }
  to {
    transform: rotate(360deg)
  }
}