:root {
  --backdrop-light: rgb(68 68 68 / 30%);
  --backdrop-lighter: rgba(0, 0, 0, 0.2);
  --backdrop: rgba(0, 0, 0, 0.3);
  --backdrop-darker: rgba(0, 0, 0, 0.5);
  --backdrop-dark: rgba(0, 0, 0, 0.7);
  --button-border: 8px;

  /* root variables from color.ini
    --spice-main: 0A0A0A;
    --spice-subtext: F0F0F0;
    --spice-shadow: 000000;
    --spice-text: FFFFFF;
    --spice-button: FFC0EA;
    --spice-button-active: FFC0EA;
    --spice-accent: FFC0EA;
  */
}

.encore-dark-theme {
  --background-base: transparent;
}

.encore-layout-themes,
.encore-dark-theme .encore-announcement-set,
.encore-bright-accent-set {
  --background-highlight: var(--backdrop) !important;
  --background-press: var(--backdrop-darker) !important;
  --background-elevated-base: var(--backdrop) !important;
  --background-elevated-highlight: var(--backdrop-darker) !important;
  --background-elevated-press: var(--backdrop-lighter) !important;
  --spice-card: rgba(var(--spice-rgb-card), 0.6) !important;
}

svg {
  filter: drop-shadow(-2px 2px 2px rgb(0 0 0 / 15%));
  overflow: visible;
}

/*-------------------
NAV STYLES
-------------------*/
.spotify__container--is-desktop.spotify__os--is-windows
  .control-nav
  .main-topBar-container,
.spotify__container--is-desktop.spotify__os--is-windows
  .global-nav
  .Root__globalNav {
  --top-bar-padding-start: calc(64px / var(--zoom));
  --top-bar-padding-end: calc(144px / var(--zoom));
}

.spotify__container--is-desktop.spotify__os--is-macos
  .control-nav
  .main-topBar-container,
.spotify__container--is-desktop.spotify__os--is-macos
  .global-nav
  .Root__globalNav {
  --top-bar-padding-start: calc(80px / var(--zoom));
}

.Root__globalNav,
.control-nav .main-topBar-container {
  padding-inline: var(--top-bar-padding-start, var(--panel-gap, 0.5rem))
    var(--top-bar-padding-end, var(--panel-gap, 0.5rem));
}

/* Fix top nav left button sizes */
div.main-globalNav-historyButtonsContainer div > button,
.custom-navlink {
  box-shadow: none !important;
  width: 32px !important;
  height: 32px !important;
  min-block-size: 0 !important;
}

div.main-globalNav-historyButtonsContainer div > button svg,
div.main-topBar-topbarContentRight div > button svg,
.custom-navlink > span > svg {
  width: 18px !important;
  height: 18px !important;
}

div.main-globalNav-historyButtonsContainer {
  padding-inline-end: 8px !important;
}

/* Remove spacer on left side of page controls */
.Kgjmt7IX5samBYUpbkBu {
  display: none;
}

/* Fix window resizing breaking spacing */
:root {
  --zoom: 1 !important;
}

/*-------------------
ALBUM ART BACKGROUND
-------------------*/

.Root__top-container::before {
  content: "";
  background-image: var(--image_url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition: background-image var(--fade-time) ease !important;
  position: fixed;
  display: block;
  inset: 0;
  filter: blur(var(--blur)) contrast(var(--cont)) saturate(var(--satu))
    brightness(var(--bright));
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform;
  transition: background-image var(--transition);
  opacity: 0.55;
  z-index: 0;
}

/*-------------------------
TRANSPARENT WINDOW CONTROLS
--------------------------*/

.Root__top-container {
  padding-top: max(var(--topbar-height, 68px) / var(--zoom, 1), 8px);
}

html:not(.spotify__container--is-desktop.fullscreen)
  body.windows:not(.video-full-window)::after {
  content: "";
  position: absolute;
  right: 0;
  z-index: 999;
  backdrop-filter: brightness(2.12);
  width: calc(135px / var(--zoom, 1));
  height: calc(var(--topbar-height, 40px) / var(--zoom, 1));
}

html:not(.spotify__container--is-desktop.fullscreen)
  body.global-nav.windows:not(.video-full-window)::after {
  --topbar-height: 64px;
}

html:not(.spotify__container--is-desktop.fullscreen)
  body.global-nav-centered.windows:not(.video-full-window)::after {
  height: min(
    32px / var(--zoom, 1),
    var(--topbar-height, 64px) / var(--zoom, 1)
  );
  top: calc(
    (
        var(--topbar-height, 64px) / 1 -
          min(32px / var(--zoom, 1), var(--topbar-height, 64px))
      ) /
      2
  );
}

/*------------
NAVIGATION BAR
-------------*/

.Root__nav-bar {
  background-color: transparent;
}

.TkqXOzhmCCuE6YI3hlgA {
  backdrop-filter: blur(20px);
}

.Root__nav-bar [fade="top"] {
  mask-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 1) 20%);
}

.Root__nav-bar [fade="full"] {
  mask-image: linear-gradient(
    transparent 0%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 1) 92%,
    transparent 100%
  );
}

.main-yourLibraryX-entryPoints {
  background-color: var(--backdrop) !important;
}

.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper {
  color: var(--spice-subtext);
}

.main-yourLibraryX-collapseButton.iYP0xuQiJCgi7gx1jUPJ button:hover .Gj4v3278oIywygaUyBbt {
  opacity: 0;
  transition: opacity 0.375s;
}

.main-navBar-navBarLinkActive,
.main-collectionLinkButton-selected {
  border-radius: var(--button-border) !important;
}

.main-yourLibraryX-libraryContainer {
  --background-highlight: rgba(255, 255, 255, 0.05) !important;
  --background-press: rgba(255, 255, 255, 0.05);
  background: none !important;
}

.main-rootlist-wrapper {
  --spice-rgb-shadow:  !important;
}

.main-yourLibraryX-isScrolled {
  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.1s ease;
}

.main-yourLibraryX-listRowEntityImage {
  box-shadow: -2px 4px 6px 2px rgb(0 0 0 / 14%);
}

.RHRitk6QC3rvuG24RAdj {
  box-shadow: none !important;
}

/*----------
YOUR LIBRARY
----------*/

/* expanded library compact list view */
.fYWNdY4zhj4OX_T2Xtg6.BRX6aJUAuAsvHKD_fpbo {
  padding-left: 8px;
  align-content: center;
}

/*---
CHIPS
---*/
.ChipInnerComponent-sm-selected {
  background-color: var(--backdrop-lighter) !important;
  color: white
}

.ChipInnerComponent-sm:hover,
.ChipInnerComponent-sm-selected:hover {
  background-color: hsl(from var(--spice-button-active) h s l / 0.5) !important;
}

.ChipInnerComponent-sm:active,
.ChipInnerComponent-sm-selected:active {
  background-color: hsl(from var(--spice-button-active) h s l / 0.3) !important;
}

/* Nested chip */
.Pdw_sPQYAnkCFPFIs6Vd {
  margin-left: -83.5px !important;
}
.ChipInnerComponent-sm-selected-secondary {
  background-color: hsl(from var(--spice-button-active) h s l / 0.2) !important;
  color: white;

  padding-inline-start: calc(48px + 35.5px) !important;
}

/*-------------
NOW PLAYING BAR
--------------*/

.Root__now-playing-bar {
  margin: 0;
  padding: 0;

  background-color: var(--backdrop) !important;
  border-radius: var(--button-border);
}

.main-nowPlayingBar-nowPlayingBar {
  height: 90px !important;
  margin-right: 16px;
}

.main-coverSlotCollapsed-container {
  border-radius: 4px !important;
  transform: scale(1.2) !important;
  margin-right: 10px;
  margin-left: 10px;
  box-shadow: -2px 1px 10px 3px rgb(0 0 0 / 20%);
  aspect-ratio: 1 / 1;
}

.main-nowPlayingWidget-nowPlaying {
  display: flex !important;
  width: 70% !important;
}

.main-playPauseButton-button {
  background-color: transparent;
}

.main-skipForwardButton-button,
.main-skipBackButton-button,
.main-repeatButton-button,
.main-playPauseButton-button,
.main-shuffleButton-button {
  color: var(--spice-text);
}

.main-repeatButton-button.main-repeatButton-active,
.main-shuffleButton-button.main-shuffleButton-active,
.main-genericButton-button {
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);;
}

.main-repeatButton-button.main-repeatButton-active:not([disabled]):hover,
.main-genericButton-buttonActive:not([disabled]):hover,
.main-shuffleButton-button[aria-checked="true"]:hover {
  filter: drop-shadow(0 0 6px var(--spice-button));
}

.Button-small-small-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle:hover {
  transform: unset !important;
}

.main-nowPlayingWidget-coverExpanded > .main-coverSlotCollapsed-container {
  transform: translateX(-8px) scale(1) !important;
}

.progress-bar {
  --bg-color: rgba(255, 555, 255, 0.2);
  --fg-color: var(--spice-button);
  --is-active-fg-color: var(--spice-button-active);
}

.progress-bar__slider {
  width: 11px;
  height: 11px;
}

.playback-progressbar-isInteractive
  .DuvrswZugGajIFNXObAr
  .x-progressBar-fillColor,
.playback-progressbar-isInteractive
  .DuvrswZugGajIFNXObAr
  .progress-bar__slider {
  transition: none;
}

.x-progressBar-sliderArea {
  box-shadow: -2px 1px 7px 1px rgb(0 0 0 / 14%);
}

.main-addButton-active,
.control-button-heart {
  transition: filter 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.main-addButton-button[aria-label="Remove from Your Library"]:hover {
  filter: drop-shadow(0 0 6px var(--spice-button));
}

.main-addButton-button[aria-label="Save to Your Library"]:hover {
  filter: drop-shadow(0 0 2px rgba(var(--spice-rgb-selected-row), 0.7));
}

.main-genericButton-button .Wrapper-sm-only.Wrapper-small-only {
  display: flex;
}

/* fullscreen button */
.button.fsd-button.control-button {
  display: flex;
  align-items: center;

  color: rgba(var(--spice-rgb-selected-row), 0.7);
}

/*-----
SIDEBAR
------*/

.Root__right-sidebar [fade="top"] {
  mask-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 1) 20%);
}

.Root__right-sidebar [fade="full"] {
  mask-image: linear-gradient(
    transparent 0%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 1) 92%,
    transparent 100%
  );
}

.main-buddyFeed-container,
.ffFwfKcPDbmAPLXzxzKq {
  --background-base: var(--backdrop) !important;
  border-radius: var(--button-border);
}

.ffFwfKcPDbmAPLXzxzKq:before {
  display: none;
}

/* tentative fix for sidebar box shadow */
.main-nowPlayingView-nowPlayingWidget > div > div:nth-child(1) > div,
.mdMUqcSHFw1lZIcYEblu {
  box-shadow: none !important;
}

.main-buddyFeed-header {
  padding-top: 0px !important;
  padding-bottom: 0px;
  padding-inline-start: 3px;
}

.main-buddyFeed-closeButton {
  border-radius: var(--button-border);
}

.main-nowPlayingView-nowPlayingWidget {
  padding-top: 0px !important;
}

.main-nowPlayingView-content.main-nowPlayingView-gradient {
  background: none !important;
}

.main-nowPlayingView-sectionHeaderSpacing.main-nowPlayingView-lyricsGradient {
  background-color: var(--background-tinted-base);
}

.main-nowPlayingView-section {
  background-color: var(--backdrop);
  border-radius: var(--button-border);
  padding: 16px;
  box-shadow: 0px 2px 10px 2px rgb(0 0 0 / 10%);
}

.Button-sc-y0gtbx-0 {
  border-radius: var(--button-border) !important;
  transition: 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
  border-width: 1px;
  border-color: rgb(255 255 255 / 60%);
}

.Button-sc-y0gtbx-0:hover {
  transform: none;
  box-shadow: 0px 0px 8px 1px rgb(255 255 255 / 20%);
  border-width: 1px;
}

.main-nowPlayingView-section.vbsB4OQJkFHLU8SbSGzS {
  padding: 0px !important;
}

.IkRGajTjItEFQkRMeH6v.f2UE9n5nZcbgZrGYTU3r {
  background: none !important;
}

.main-nowPlayingView-contextItemInfo:before {
  display: none;
}

.main-nowPlayingView-aboutArtistV2ImageContainer.main-nowPlayingView-aboutArtistV2Image,
.Rol5Gmuk1O2tMw7NMtxF {
  mask-image: linear-gradient(
    rgba(0, 0, 0, 0.95) 75%,
    transparent 100%
  ) !important;
}

.main-nowPlayingView-aboutArtistV2Button {
  background: none;
}

.main-nowPlayingView-aboutArtistButton:hover {
  transform: scale(1) !important;
  cursor: pointer;
}

/* Fix alignment of headphones next to "current device" */
.FpmhhFL8lCsiyh3X0fjK {
  display: flex;
}

/* Blur header background in now playing view */
.vDev2BqBHloweL24GNHK .yvZooOj0rpfRS__cAUCo {
  backdrop-filter: blur(12px);
}

/* Fix friend activity play icon hover background */
.xU4sacBisQneHoQeHMP5 .srjSlmxMGzXnJBc32BJa {
  border-radius: var(--button-border);
}

/* Theme equalizer icon for friend activity currently playing */
.Ydxgl4Y23orfVVVI9O2k svg {
  fill: var(--spice-accent)
}

/* Transparent card background */
.pIxPdfuNasUDLbEDmuK_ {
  background-color: var(--background-elevated-base);
}

/* Semi collapsed sidebar (button present on right of screen to reopen */

/* Hidden sidebar hover enter transition */
.Root__right-sidebar div[aria-hidden=true] .AAdBM1nhG73supMfnYX7 {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

/* Hidden sidebar hover exit transition */
.Root__right-sidebar .iXXcc7CtzmTm5yA3ZXbl.hYAxYCXtABXg35wNC2TR.bMaQdOqIiAZtt4cKEhWf:hover .AAdBM1nhG73supMfnYX7 {
  opacity: 0.3;
  transition: opacity .3s ease-out,-webkit-transform .5s ease-out;
}

/* Fix black gap between main view & sidebar on hover when closed */
.UQRh5VQzvqcMfTje1JUe.tLZZlY6dyQ31AIGTg_AF > * {
  background: transparent !important;
}

/* Main container with sidebar enter transition */
.Root__top-container:has(.Root__right-sidebar .iXXcc7CtzmTm5yA3ZXbl.hYAxYCXtABXg35wNC2TR.bMaQdOqIiAZtt4cKEhWf:hover) .Root__main-view {
  width: calc(100% - (var(--panel-gap) * 1.5)) !important;

  transition: width .3s ease-in-out !important;
}

/* Main container with sidebar exit transition */
.Root__main-view {
  transition: width .5s ease-out,-webkit-transform .5s ease-out !important;
}



/*--------
WHAT'S NEW
---------*/

.main-whatsNewFeed-listRow {
  background-color: transparent !important;
  margin: 4px 0;

  gap: 2px 12px;
}

.main-whatsNewFeed-listRow:hover {
  --background-highlight: var(--backdrop);
}

.main-whatsNewFeed-listRow:hover
  + .main-whatsNewFeed-listRow
  > .main-whatsNewFeed-divider,
.main-whatsNewFeed-listRow:hover > .main-whatsNewFeed-divider,
.main-whatsNewFeed-listRow:only-child .main-whatsNewFeed-divider {
  visibility: unset;
}

.main-whatsNewFeed-list {
  margin-top: 2px;
}

.main-whatsNewFeed-content {
  padding: 2px 16px 16px 16px;
}

.main-whatsNewFeed-content > p {
  display: none;
}

.main-whatsNewFeed-list:last-child,
.main-buddyFeed-content > div:nth-child(3) > ol:last-child {
  padding-bottom: 8px;
}

.main-buddyFeed-overlay {
  border-radius: var(--button-border) !important;
  transition: all 0.3s ease;
}

/* Spotify profile avatar */
.main-avatar-image {
  border-radius: 6px !important;
}

.main-avatar-avatar.main-avatar-withBadge:after {
  background: var(--spice-button);
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.6);
  height: 12px;
  width: 12px;
  left: 30px;
  bottom: unset !important;
  top: 30px;
}

.main-userWidget-boxCondensed,
.main-avatar-avatar,
.main-avatar-placeholderWrapper,
.main-userWidget-box {
  border-radius: var(--button-border) !important;
}

/* Avatar notification dot (in top right) */
.FZ4y0Q61kFpjJzUjCvSa svg > circle {
  r: 8;
  
  stroke: var(--backdrop-dark);
  stroke-width: 2.px;
}
.FZ4y0Q61kFpjJzUjCvSa {
  top: 1.5px;
  right: 1.5px;
}

/*-----------
PLAYLIST VIEW
------------*/

.Root__main-view {
  background-color: var(--backdrop) !important;
}

[dir="ltr"] .main-actionBar-ActionBarRow > :not(:last-child) {
  margin-right: 24px;
}

._2ajKWDiy6YvJu5wo8I1g.main-trackList-trackListHeader {
  background: none !important;
  box-shadow: none !important;
  position: static;
}

.main-trackList-trackListRow:focus-within,
.main-trackList-trackListRow:hover {
  background-color: transparent !important;
}



.playlist-playlist-playlistContent {
  background: none !important;
}

.main-trackList-selected,
.main-rootlist-wrapper div[role="presentation"] div[role="row"]:hover {
  background-color: hsla(0, 0%, 100%, 0.1);
  border-radius: var(--button-border);
}

.main-trackList-selected {
  background-color: hsla(0, 0%, 100%, 0.2) !important;
}

.main-trackList-rowSectionStart > img {
  box-shadow: 0px 2px 10px 2px rgb(0 0 0 / 15%);
}

.main-trackList-rowMainContent > div {
  text-shadow: 0 0 10px rgb(0 0 0 / 40%);
}

.main-trackList-rowMainContent > span,
.main-trackList-rowSectionVariable > span,
.main-trackList-rowDuration,
.main-trackList-rowPlayCount,
.main-trackList-rowMarker > span {
  text-shadow: 0 0 10px rgb(0 0 0 / 20%);
}

.x-filterBox-filterInput {
  border-radius: var(--button-border) !important;
}

.main-entityHeader-imageContainer {
  border-radius: 10px;
}

.main-entityHeader-image {
  border-radius: var(--button-border) !important;
  box-shadow: -2px 4px 9px 3px rgb(0 0 0 / 15%);
}

.main-entityHeader-shadow {
  box-shadow: none;
}

.main-entityHeader-container {
  padding-bottom: 0;
  justify-content: center;
}

.playlist-playlist-playlistImageContainer {
  --icon-width: 180px;
  align-self: center;
  flex-shrink: 0;
  height: var(--icon-width);
  width: var(--icon-width);
  min-width: var(--icon-width);
  position: sticky;
  margin-top: auto;
}

.main-playlistEditDetailsModal-imageDropDownButton {
  border-radius: var(--button-border);
}

.profile-editImage-imageContainer,
.main-editImageButton-overlay,
.main-entityHeader-imageContainerClickable {
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.main-editImageButton-overlay {
  background-color: rgb(0 0 0 / 50%);
  border-radius: var(--button-border);
}

.profile-editImage-imageContainer:hover {
  transform: scale(0.98);
}

.main-image-image.main-trackList-rowImage.main-image-loaded {
  border-radius: 3px;
}

.main-image-image.main-avatar-image.main-image-loaded {
  box-shadow: 0 1px 12px 1px rgb(0 0 0 / 15%);
  border-radius: var(--button-border);
}

.main-nowPlayingView-nowPlayingWidget > div > div:nth-child(1) > div {
  box-shadow: 0px 4px 10px 3px rgb(0 0 0 / 12%);
}

.Button-large-large-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle,
.dMIqbdzkrLhKTMkTrFvJ {
  scale: 0.9;
  transition: all 0.2s ease;
}

.PkOz5g82CaoKk1J3GX0e {
  display: none;
}

.main-entityHeader-container.JYKKZFIXuf9lIHVeszuS .main-entityHeader-backgroundColor {
  display: none;
}

.Button-large-large-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle:hover {
  scale: 1;
}

/*-----------
SONG PREVIEWS
-----------*/

/* Background */
.FP_XXx0FMQPJEu3WzfpM {
  --background-base: rgba(25, 25, 25, 0.55) !important;
}

/* Add to playlist button */
.FP_XXx0FMQPJEu3WzfpM .BLIxyum1wPNrFibaQ9wr > span > svg {
  fill: var(--text-subdued);
}

/* Next button */
.FP_XXx0FMQPJEu3WzfpM button > span.kT3dFHdVmU0vyeE71IDE {
  background-color: var(--backdrop) !important;
}

/*-----
TOP BAR
------*/

.main-topBar-withBackgroundBlur:before {
  display: none;
}

[fade="bottom"] {
  mask-image: linear-gradient(rgba(0, 0, 0, 1) 95%, transparent 100%);
}

[fade="top"] {
  mask-image: linear-gradient(transparent 9%, rgba(0, 0, 0, 1) 15%);
}

[fade="full"] {
  mask-image: linear-gradient(
    transparent 0%,
    rgba(0, 0, 0, 1) 5%,
    rgba(0, 0, 0, 1) 95%,
    transparent 100%
  );
}

.main-topBar-background {
  background: none;
  backdrop-filter: blur(25px) !important;
}

.main-topBar-overlay {
  background-color: transparent !important;
}

.hIFR8WDm_54EEIa1gwpC {
  background-color: transparent !important;
}

.mjZrvVI3CxfHJXu7y0Lg {
  opacity: 0 !important;
}

.mxGhI8Lr7MoGOnFrbsUa.BHHXR8xc6m009ohY6aKU {
  background: var(--backdrop);
}

.nav-ylx .main-trackList-trackListHeaderStuck.main-trackList-trackListHeader,
.main-trackList-trackListHeader.main-trackList-trackListHeaderStuck {
  background: none;
  position: static !important;
  box-shadow: unset;
}

.main-entityHeader-topbarTitle {
  cursor: pointer;
}

.Button-md-24-buttonTertiary-condensedAll-useBrowserDefaultFocusStyle,
.main-topBar-buddyFeed,
.main-noConnection-isNotice,
.main-topBar-whatsNewFeed,
.main-userWidget-boxCondensed {
  border-radius: var(--button-border) !important;
  transition: 0.2s ease;
}

.SFgYidQmrqrFEVh65Zrg > figure > div > img {
  border-radius: 6px !important;
}

.Fxnb0xe6bL7I7W8V0p6C,
.main-topBar-buddyFeed,
.main-userWidget-boxCondensed,
.SFgYidQmrqrFEVh65Zrg,
.SFgYidQmrqrFEVh65Zrg:hover,
.main-userWidget-boxCondensed:focus-visible,
.main-userWidget-boxCondensed:hover,
.main-userWidget-boxCondensed[data-context-menu-open="true"],
.main-topBar-whatsNewFeed {
  background-color: var(--backdrop) !important;
}

/*----------
PLAY BUTTONS
----------*/

.main-playButton-PlayButton,
.main-playButton-PlayButton {
  transition: transform 0.2s ease;
  transform-origin: center;
}

.playlist-playlist-playlist span.ButtonInner-sc-14ud5tc-0.encore-bright-accent-set,
.main-playButton-PlayButton span.ButtonInner-sc-14ud5tc-0.encore-bright-accent-set,
.view-homeShortcutsGrid-playButton>span>svg

/* Home Shortcut Grid Play Button */ {
  background: none !important;
  color: var(--spice-text) !important;
}

.main-playButton-PlayButton > button > span {
  color: var(--spice-text) !important;
  background: transparent;
  border-radius: var(--button-border);
  right: 4px;
  transition: all 0.2s ease;
}

.main-playButton-PlayButton > button > span {
  background: none !important;
  transform: scale(1.1) !important;
}

.view-homeShortcutsGrid-playButton {
  box-shadow: none !important;
  background-color: transparent;
}

.Button-small-buttonPrimary-useBrowserDefaultFocusStyle:hover
  .ButtonInner-sc-14ud5tc-0 {
  background: none !important;
}

.main-card-PlayButtonContainer > div > button > span > span > svg,
.main-heroCard-PlayButtonContainer > div > button > span > span > svg {
  filter: drop-shadow(-1px 1px 6px rgba(0, 0, 0, 1)) !important;
}

.main-playButton-PlayButton > button > span:hover {
  transform: scale(1.2) !important;
}

.main-playButton-PlayButton:focus,
.main-playButton-PlayButton:hover {
  transform: none !important;
}

.main-playButton-PlayButton {
  background: none !important;
}

.global_nav .main-actionButtons {
  padding-inline: 8px 0;
}

.Root__globalNav {
  background: none !important;
}

.Root__globalNav button {
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.Root__globalNav button,
.Root__globalNav .main-globalNav-link-icon,
.main-topBar-historyButtons .main-topBar-button {
  background-color: var(--backdrop);
  border-radius: 6px;
}

.WtC1lGbmQRplD6JBhNFU {
  border-radius: var(--button-border);
  background-color: var(--backdrop);
}

.main-globalNav-buddyFeed,
.main-topBar-buddyFeed {
  box-shadow: none !important;
  width: 32px;
  height: 32px;
}

.main-topBar-buddyFeed,
.main-topBar-buddyFeed:active,
.main-globalNav-buddyFeed,
.main-globalNav-buddyFeed:active {
  border-style: none !important;
}

.search-searchCategory-carouselButton,
.search-searchCategory-carouselButton:hover {
  background-color: transparent;
  border-radius: var(--button-border);
}

/* Optimize for cramped view */
@media screen and (max-width: 852px) {
  .main-globalNav-searchInputSection {
    width: auto !important;
  }
}

/*--------
SEARCH BAR
--------*/

.main-heroCard-card {
  background: var(--backdrop) !important;
}

.main-heroCard-card:hover {
  background: rgba(0, 0, 0, 0.2) !important;
}

.x-searchInput-searchInputInput,
.main-globalNav-searchInputContainer input,
.NtkAQg9R1r5CjuP0XHwl,
.NtkAQg9R1r5CjuP0XHwl:hover,
.main-globalNav-searchInputContainer .main-topBar-searchBar {
  background-color: var(--backdrop) !important;
  height: 32px;
  border-radius: var(--button-border) !important;
  transition: 0.2s ease;
}

.search-searchCategory-SearchCategory {
  background: none;
  position: static;
}

.x-searchInput-searchInputInput:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.x-searchInput-searchInputInput:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.x-searchInput-searchInputSearchIcon,
.x-searchInput-searchInputClearButton {
  margin-top: 3px;
}

.search-searchCategory-contentArea {
  --encore-cards-margin: 0px !important;
}

.search-searchCategory-categoryGridItem > button > span {
  border-radius: var(--button-border);
  font-weight: 700 !important;
}

.mXNT9H2GU7lDW4cGx0q1 {
  background-color: var(--backdrop);
  border-radius: var(--button-border);
  font-weight: 700 !important;
}

.mXNT9H2GU7lDW4cGx0q1:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Fix look of search button background in cramped view */
div.main-globalNav-searchInputSection:has(form > .ODl7TwNawIfBwiZv1Czg > input[tabindex="0"])
  > form
  div
  > button {
  background-color: transparent !important;
}

.IYex0sXu8fnCz1FqFbRe {
  background: none;
}

.NI1OxoVdokxENPAjoeOk {
  box-shadow: none;
}

.search-searchCategory-categoryGridItembutton[aria-checked="false"]
  > button:hover {
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: var(--spicet-text);
}

.sHDdcNIw9AQLbLrpdcqO {
  top: 20px;
  margin-right: 12px;
  transition: all 0.2s ease;
  border-radius: var(--button-border) !important;
}

.main-card-draggable:not(:hover) > .sHDdcNIw9AQLbLrpdcqO {
  opacity: 0 !important;
}

.sHDdcNIw9AQLbLrpdcqO {
  border-radius: var(--button-border) !important;
  background-color: var(--backdrop);
  transition: all 0.2s ease;
}

.sHDdcNIw9AQLbLrpdcqO:focus,
.sHDdcNIw9AQLbLrpdcqO:hover {
  transform: scale(1.05);
}

.qG4q41T8PJl0SkVgUeJc {
  background: none;
}

/* Center align buttons when search bar collapsed */
.main-globalNav-searchContainer {
  justify-content: center ;
}

.main-topBar-searchBar:has(input.main-topBar-searchBar[tabindex="-1"]) {
  width: 0%;
}

@media(width <= 860px) {
  .main-topBar-searchBar:has(input.main-topBar-searchBar[tabindex="0"]) {
    width: 85%;
  }
}
@media(width > 860px) {
  .main-topBar-searchBar:has(input.main-topBar-searchBar[tabindex="0"]) {
    width: 100%;
  }
}

/* For buttons inside the Search Container */
.main-globalNav-searchContainer button {
  background-color: var(--backdrop) !important;
  border-radius: var(--button-border) !important;
  transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
}

/* For the search button in the Search Container */
.main-globalNav-searchInputSection button {
  background-color: transparent !important;
}

/* For the x button in the Search Container */
form[role="search"] button.MdMAXXFPalD99eigsBug {
  padding-inline: 6px !important;
  margin-right: 6px !important;
}
.main-globalNav-searchInputContainer .main-topBar-searchBar {
  padding-inline-end: 102px !important;
}

/* Fix alignment and background of browse button */
.BV0jjn_h5TtMMl8YKuZ0 {
  display: flex;
  justify-content:center !important;
}
div.BV0jjn_h5TtMMl8YKuZ0 > button {
  background: transparent !important;
}

.BV0jjn_h5TtMMl8YKuZ0 {
  padding-inline-start: 14px;
}

/* Fix size of clear recent searches button */
.sxCQ4toOdQ6hMN2rU8Kn {
  aspect-ratio: 4/1 !important;
}

/* Recent searches background */
#recent-searches-dropdown > div,
#search-dropdown > div {
  backdrop-filter: blur(25px);
}

/* Remove extra margin added to "browse all" page header */
._YN9HVrnrcvnaCjYnNkM {
  margin-top: 0 !important;
}

/*-----------
MISCELLANEOUS
-----------*/

.main-actionBarBackground-background,
.main-nowPlayingBar-container,
.playlist-playlist-actionBarBackground-background {
  background: none !important;
}

.main-entityHeader-background.main-entityHeader-overlay,
.main-entityHeader-backgroundColor {
  display: none;
}

.queue-tabBar-active,
.lyrics-tabBar-active {
  background-color: var(--backdrop);
  height: 32px;
}

.main-trackList-curationButton > span {
  height: 16px;
}

.MnW5SczTcbdFHxLZ_Z8j {
  display: none;
}

.queue-tabBar-headerItemLink,
.lyrics-tabBar-active,
.lyrics-tabBar-headerItemLink {
  padding: 7px 16px;
  transition: background-color 0.3s ease;
  height: 36px;
}

.queue-tabBar-headerItemLink:hover,
.lyrics-tabBar-headerItemLink:hover {
  padding: 7px 16px;
  background-color: rgba(0, 0, 0, 0.2);
  height: 36px;
}

.lyrics-config-button {
  background-color: var(--backdrop);
}

.IAyWaeDamLJLjxuPeVKw {
  background-color: var(--backdrop);
  color: rgba(var(--spice-rgb-selected-row), 0.7);
}

.SxHlW6byhoJSUJNugaE1 .Kujbn0F68QOf_o44cNxw {
  border: 1px solid var(--backdrop);
}

.Psc33HXPyazZYAAr1tgz,
.I4p8r1UNjIGk9yv3H2Ms {
  background: var(--backdrop);
  border-radius: var(--button-border);
}

.main-shelf-shelfGrid.main-shelf-showAll {
  padding-top: 4px;
}

.x-categoryCard-CategoryCard {
  transition: transform 0.2s ease;
  box-shadow: -3px -2px 15px rgb(0 0 0 / 20%);
}

.x-categoryCard-CategoryCard:hover {
  transform: translateY(-4px);
}

.Ft1cMGlqDsCbqmXQyeKN,
.xcTrtCsYOPtSElbX9inq {
  background: none;
}

.main-buddyFeed-scrollBarContainer [data-overlayscrollbars-viewport] {
  mask-image: linear-gradient(
    transparent 1%,
    rgba(0, 0, 0, 1) 5%,
    rgba(0, 0, 0, 1) 96%,
    transparent 100%
  );
}

.main-playlistEditDetailsModal-closeBtn {
  border-radius: var(--button-border);
}

.main-popper-container {
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(25px) !important;
}

.hcuLp8V4uEEfWZ4k6aLV {
  background: none;
  border-radius: var(--button-border);
}

.main-devicePicker-controlButton[aria-expanded="true"] {
  fill: #fff;
  color: #fff;
}

.main-popper-arrow,
.main-popper-arrow:before {
  display: none;
}

.LyricsScrollContainer {
  mask-image: linear-gradient(
    transparent 5%,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 1) 85%,
    transparent 100%
  );
}

.app-module__StatsButton___gLukm_nameDthatDtune {
  position: unset !important;
}

.N_8iI7NKHP0iG2jp3g0R {
  background: none;
}

.StyledTabItem-tab-tabItem-useBrowserDefaultFocusStyle {
  border-radius: var(--button-border);
}

/*-------------
SNACKBAR NOTIFS
-------------*/

/* normal toast */
.notistack-Snackbar > div > div.RQREWe_yBdtc_g6eC3wQ {
  background-color: var(--backdrop-darker);

  backdrop-filter: blur(10px) !important;
}

/* error toast */
.notistack-Snackbar > div.notistack-MuiContent {
  backdrop-filter: blur(3.5px) !important;
}

.notistack-Snackbar > div > div.e-9960-box,
.notistack-Snackbar > div.notistack-MuiContent {
  box-shadow:
    0 16px 24px rgba(var(--spice-rgb-shadow), 0.3),
    0 6px 8px rgba(var(--spice-rgb-shadow), 0.2);
}

.notistack-Snackbar > div[role="alert"] > div > div > div > span {
  color: white !important;
}

.go1888806478 {
  background-color: hsl(from #d32f2f h s l / 0.65);
}

/*----------
TEXT SHADOWS
----------*/

.main-entityHeader-topbarTitle,
.main-shelf-title,
.main-entityHeader-titleButton,
.main-entityHeader-metaData,
.playlist-playlist-playlistDescription,
.main-entityHeader-detailsText,
.main-entityHeader-title,
.artist-artistVerifiedBadge-wrapper > span,
.main-buddyFeed-link,
.main-trackInfo-name,
.main-trackInfo-contentWrapper,
.main-trackInfo-contentWrapper,
.main-yourLibraryX-listRowSubtitle,
.ListRowTitle__LineClamp-sc-1xe2if1-0,
.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper,
.main-yourLibraryX-navItem > a > span,
.playback-bar__progress-time-elapsed,
.cvTLPmjt6T7M85EKcB8w {
  text-shadow: -1px 3px 20px rgb(0 0 0 / 20%);
}

/*--------
ALBUM VIEW
--------*/

.x-album-releasesDropdown {
  background-color: var(--backdrop);
}

.nav-ylx .artist-artistDiscography-headerContainer,
.artist-artistDiscography-headerContainer {
  background: none;
}

.nav-ylx
  .artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled,
.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled {
  background: none;
  border-bottom: none;
  box-shadow: unset;
}

.artist-artistDiscography-button.artist-artistDiscography-active,
.artist-artistDiscography-button:focus,
.artist-artistDiscography-button:hover {
  border-radius: var(--button-border);
}

.ButtonInner-sm-iconOnly,
.Button-sm-buttonPrimary-useBrowserDefaultFocusStyle:hover
  .ButtonInner-sc-14ud5tc-0 {
  background: none;
  color: var(--background-base, #ffffff);
  scale: 1.2;
}

.main-playButton-PlayButton > button > span {
  color: var(--spice-text);
  background: none;
  scale: 1.2;
  transition: all 0.2s ease;
}

.main-playButton-PlayButton > button > span:hover {
  color: var(--spice-text);
  background: none !important;
  scale: 1.3;
}

/*-------
HOME VIEW
-------*/

.main-home-homeHeader {
  background: none;
  background-color: var(--backdrops) !important;
}

.S4OmZ_IZexmZ5dasPqW5 {
  /*top playlist grid*/
  background: none !important;
}

.search-searchCategory-catergoryGrid > div > button > span {
  border-radius: var(--button-border);
}

.f59DF4qQ_FphIrVeRYkI {
  display: none;
}

.rX_OmqCngvY5ZCoYBZgb {
  display: none !important;
}

.LVMjmN2CaPruPAo62RAY {
  display: none !important;
}

.view-homeShortcutsGrid-grid {
  --item-height: 60px !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

/* padding*/
.main-home-filterChipsContainer {
  padding-top: 40px !important;
}

.view-homeShortcutsGrid-grid > :nth-child(n + 7) {
  display: none;
}

.view-homeShortcutsGrid-shortcut {
  background-color: var(--backdrop);
  border-radius: 4px;
  transition: transform 0.2s ease;
  box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.1);
}

.view-homeShortcutsGrid-shortcut:focus-within,
.view-homeShortcutsGrid-shortcut:hover,
.view-homeShortcutsGrid-shortcut[data-context-menu-open="true"] {
  background: var(--backdrop);
  transform: scale(1.02);
}

.view-homeShortcutsGrid-shortcut:hover .view-homeShortcutsGrid-equaliser,
.view-homeShortcutsGrid-shortcut:hover
  .view-homeShortcutsGrid-shortcutNewEpisodeIndicator {
  display: none;
}

.BoxComponent-group-card-naked-isInteractive-draggable-paddingBlockStart_12px-paddingBlockEnd_12px-paddingInlineStart_12px-paddingInlineEnd_12px:hover::after {
  background-color: unset;
}

.PpFTgmA5yHE2_VdobCMS {
  margin-inline: unset !important;
}

.main-card-card {
  background-color: var(--backdrop);
}

.main-card-card:hover,
.main-card-card[data-context-menu-open="true"] {
  background-color: var(--backdrop);
}

.hZjAwWMA54TvbGYwReET,
main-card-draggable {
  background-color: var(--backdrop) !important;
  transition: transform 0.2s ease;
  margin-right: 16px !important;
  border-radius: 6px;
  box-shadow: 4px 0px 15px rgb(0 0 0 / 20%);
}

.e-9921-box--hover-custom.e-9921-box--interactive {
  background-color: var(--backdrop) !important;
  border-radius: 6px;
  box-shadow: 4px 0px 15px rgb(0 0 0 / 20%);
  max-height: unset !important;
}

.e-9921-box--interactive.e-9921-box--contrasting:hover,
.e-9921-box--interactive:hover:after,
.e-9921-box--hover-custom.e-9921-box--interactive:hover:after {
  background: none;
}

.hZjAwWMA54TvbGYwReET .main-card-imageContainer {
  transition: all 0.35s ease;
  transform-origin: 50% -40px;
  overflow: hidden;
}

.hZjAwWMA54TvbGYwReET:hover .main-card-imageContainer {
  transform: perspective(76em) rotateX(14deg) translateY(-1px);
  opacity: 0.8;
}

.main-heroCard-PlayButtonContainer {
  box-shadow: unset;
}

.main-gridContainer-gridContainer {
  padding-bottom: 16px !important;
}

.artist-artistDiscography-cardGrid {
  padding-top: 34px !important;
}

.main-cardImage-imageWrapper {
  transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);;
}

.main-shelf-shelf {
  margin-bottom: unset !important;
}

.artist-artistOverview-artistShelfSpacer {
  margin-bottom: 16px !important;
}

.main-coverSlotCollapsed-expandButton {
  position: absolute;
  background: var(--backdrop);
  top: 0px;
  margin-right: -5px;
  transform: scale(0.8);
  border-radius: var(--button-border);
}

.main-coverSlotCollapsed-expandButton:focus,
.main-coverSlotCollapsed-expandButton:hover {
  background: var(--backdrop);
  transform: scale(0.81);
}

.main-card-PlayButtonContainer {
  box-shadow: none;
}

/* For cards in carousel (to fix tint coverage) */
.main-card-cardContainer {
  height: 100%;
}

/* For tint going off side of carousel */
.a2NTH51fJWzWsds0OYv_:before {
  background: none !important;
}

.a2NTH51fJWzWsds0OYv_:after {
  width: 10%;
}

/* Disable square box shadow on circular artist photo */
.GOcsybnoHYyJGQGDRuwj.MxmW8QkHqHWtuhO589PV:has(.MxmW8QkHqHWtuhO589PV) {
  box-shadow: none !important;
}

/*------
SETTINGS
------*/

.x-settings-equalizerSection {
  background-color: var(--backdrop);
  border-radius: 6px;
}

.x-settings-button {
  border-radius: var(--button-border);
}

.main-dropDown-dropDown,
.x-settings-input {
  background-color: var(--backdrop);
  border-radius: var(--button-border);
}

.x-toggle-indicatorWrapper,
.x-toggle-indicatorWrapper:hover {
  background-color: var(--backdrop);
}

input:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper {
  background-color: rgb(255 255 255 / 10%);
}

input:hover ~ .x-toggle-indicatorWrapper {
  background-color: var(--backdrop);
}

/* Radio button */
.U0PJm5wLwGsOlehID1n1.C8YxC7zborN_tF5zBizw:before {
  background-color: white;
}

.U0PJm5wLwGsOlehID1n1 {
  background-color: var(--backdrop);
}

.daF_Uu6SkaxFXuW1tXC1:before {
  background-color: var(--backdrop);
}

.bY4mttCZiFb6AXdiyTWl {
  background-color: transparent;
}

/*---------
ARTIST PAGE
---------*/

.main-entityHeader-title h1 {
  font-size: 50px !important;
}

.under-main-view div {
  opacity: 0.92;
  filter: grayscale(5%) brightness(94%);
}

.main-entityHeader-background.main-entityHeader-gradient,
.sv5suqIPUwjgUF_BzM41,
.main-entityHeader-background {
  mask-image: linear-gradient(
    rgba(0, 0, 0, var(--artist-fade)) 58%,
    transparent 100%
  );
}

.artist-artistOverview-artistOverviewContent {
  background-color: transparent;
  margin-top: 10px !important;
}

.artist-artistAbout-container {
  background-color: var(--backdrop);
}

.artist-artistAbout-container:hover {
  transform: scale(1);
  cursor: pointer;
}

/* "# in the world" badge */
.tLjX9htIKD_OCmEX01UN {
  background-color: var(--spice-accent);
}

.GenericModal__overlay > div[role="dialog"] > div,
.main-trackCreditsModal-container,
.main-aboutRecsModal-container,
.main-playlistEditDetailsModal-container,
.profile-userEditDetails-container,
.artist-artistAbout-modal,
dialog.NiqTdDnFi5KAXoGukrdo.aOxbsZDBlepfQptv_EfI,
dialog:has(.main-duplicateTrackModal-container)
{
  background-color: rgb(48 48 48 / 30%) !important;
  backdrop-filter: blur(15px);
  border-radius: var(--button-border);
}

.GenericModal__overlay button[data-encore-id="buttonPrimary"] span:hover,
.GenericModal__overlay > div[role="dialog"] > div,
.GenericModal__overlay > div[role="dialog"] button[data-encore-id="buttonTertiary"],
.main-duplicateTrackModal-container,
.main-duplicateTrackModal-container button[data-encore-id="buttonTertiary"]
{
  color: var(--spice-text);
}

.main-trackCreditsModal-container {
  padding-bottom: 32px;
}

.main-duplicateTrackModal-container {
  background: none;
  padding: 1.5rem;
}

.main-cardImage-circular,
.main-cardImage-imageWrapper {
  border-radius: var(--button-border) !important;
}

.ChipInner__ChipInnerComponent-sc-1ly6j4j-0 {
  border-radius: var(--button-border) !important;
}

.GenericModal {
  background: none;
}

/* Album art viewing modal */
.hmgHdasWrZaA9tiXVw_u {
  padding-bottom: 0.75rem;
}

.EmeHQXR87mUskYK6xEde,
.playlist-playlist-actionBarBackground-background {
  background: none;
}

.uJjmxe0T11dUVeW6Biz8 {
  background: none;
}

.SxHlW6byhoJSUJNugaE1 > figure > div > img {
  border-radius: var(--button-border);
}

.mYvNDps8FDVgHSCzpeqC,
.o6lOM3qmit24hWlOBbw0 > img {
  border-radius: var(--button-border) !important;
}

.Kujbn0F68QOf_o44cNxw {
  bottom: -4px !important;
  right: -10px !important;
}

/*----------
BLOOM LYRICS
----------*/

:root {
  --lyrics-text-direction: left;
}

.Root__lyrics-cinema {
  grid-area: main-view;
}

.lyrics-lyrics-background {
  visibility: hidden !important;
}

.lyrics-lyrics-container {
  --lyrics-color-active: rgb(255, 255, 255) !important;
  --lyrics-color-inactive: rgba(255, 255, 255, 0.35) !important;
  --lyrics-color-passed: rgba(255, 255, 255, 0.8) !important;
  --lyrics-color-messaging: rgba(255, 255, 255, 0.45) !important;
}

.lyrics-lyricsContent-lyric {
  margin: 0.3rem 0;
  transform: scale(1);
  text-shadow: -1px 3px 20px rgb(0 0 0 / 5%);
  color: rgb(0 0 0 / 95%);
  transition:
    text-shadow 400ms ease,
    color 50ms ease;
}

.lyrics-lyricsContent-text {
  transform-origin: var(--lyrics-text-direction);
  transition: transform 400ms ease;
}

/* lyrics not available message */
.C3pBU1DsOUJJOAv89ZFT {
  color: var(--lyrics-color-passed) !important;
}

.lyrics-lyricsContent-lyric:hover {
  color: var(--lyrics-color-active) !important;
}

.lyrics-lyricsContent-isInteractive .lyrics-lyricsContent-text:active {
  transform: scale(0.9);
}

.lyrics-lyricsContent-active {
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  max-width: var(--lyrics-active-max-width);
}

.lyrics-lyricsContent-active .lyrics-lyricsContent-text {
  transform: scale(1.1);
}

/* right sidebar lyrics */
.main-nowPlayingView-lyricsContent > .lyrics-lyricsContent-lyric {
  max-width: 90% !important;
}

/* New Lyrics Plus style */
.lyrics-lyricsContainer-LyricsBackground {
  visibility: hidden !important;
}

.lyrics-lyricsContainer-LyricsContainer {
  --lyrics-color-active: white !important;
  --lyrics-color-inactive: rgba(200, 200, 200 / 45%) !important;
}

.lyrics-lyricsContainer-LyricsLine {
  text-shadow: none;
}

.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine {
  transition-property: transform, color, opacity, text-shadow !important;
}

/* TODO: Make setting to toggle word popout in karaoke mode */
/* .lyrics-lyricsContainer-Karaoke-Word {
  transition:
    var(--word-duration) color ease,
    var(--word-duration) text-shadow ease !important;
  text-shadow: none;
} */

/* TODO: Make setting to toggle glow intensity */
.lyrics-lyricsContainer-Karaoke-WordActive,
.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine-active {
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

.lyrics-lyricsContainer-LyricsUnavailableMessage {
  color: rgba(255, 255, 255, 0.4) !important;
}

.lyrics-lyricsContainer-Provider {
  background: none !important;
}

.Root__lyrics-cinema [data-overlayscrollbars-viewport] {
  mask-image: linear-gradient(
    transparent 0%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    transparent 100%
  );
}

.FUYNhisXTCmbzt9IDxnT {
  --lyrics-color-background:  !important;
  padding-top: 80px;
}

/* fix artist page being visible under lyrics cinema */
.Root__top-container:has(.FUYNhisXTCmbzt9IDxnT) .main-topBar-container,
.Root__top-container:has(.FUYNhisXTCmbzt9IDxnT) .under-main-view {
  display: none;
}

body:has(div#lyrics-fullscreen-container) div.Root__top-container > * {
  display: none;
}
body:has(div#lyrics-fullscreen-container) div.Root__top-container:before {
  opacity: 0.325;
}

body:has(div#lyrics-fullscreen-container) .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine {
  font-size: calc(var(--lyrics-font-size) * 2);
  line-height: calc(var(--lyrics-line-height) * 2);
}

/*-------
SCROLLBAR
-------*/

.os-scrollbar-handle {
  border-radius: 50px !important;
}

.os-theme-spotify > .os-scrollbar-vertical {
  margin: 12px 2px 12px 0 !important;
}

.os-scrollbar-vertical {
  width: 6px !important;
  transition: width 150ms ease !important;
}

.os-scrollbar-vertical:hover,
.os-scrollbar-vertical:active {
  width: 9px !important;
}

.os-scrollbar-horizontal {
  display: none !important;
}

.main-nowPlayingView-lyricsContent::-webkit-scrollbar {
  width: 2px !important;
}

.main-nowPlayingView-lyricsContent::-webkit-scrollbar-thumb {
  border-radius: 50px !important;
  background-color: var(--spice-rgb-selected-row);
}

/*-------------------
EXPERIMENTAL FEATURES
-------------------*/

.GenericModal > .main-embedWidgetGenerator-container {
  background-color: rgb(48 48 48 / 30%) !important;
  backdrop-filter: blur(25px);
  height: 680px;
}

.main-embedWidgetGenerator-container
  > .main-trackCreditsModal-mainSection::-webkit-scrollbar {
  width: 4px;
}

.main-embedWidgetGenerator-container
  > .main-trackCreditsModal-mainSection::-webkit-scrollbar-thumb {
  border-radius: var(--button-border);
}

.spicetify-exp-features button.switch {
  border-radius: var(--button-border) !important;
}

.spicetify-exp-features input.search {
  border: none !important;
  background-color: rgba(var(--spice-rgb-selected-row), 0.1) !important;
  border-radius: var(--button-border);
  padding: 10px 36px;
  color: var(--spice-text);
  width: 100%;
}

.spicetify-exp-features button.reset {
  height: 38px;
  color: #ffffff;
  border-radius: var(--button-border) !important;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  border: none !important;
  transition: all 0.3s ease;
  background-color: #ea5d5d !important;
}

.spicetify-exp-features button.reset:hover {
  background-color: #ec6f6f;
  box-shadow: 0px 0px 15px 5px rgb(229 46 46 / 40%);
  transform: scale(1) !important;
}

.spicetify-exp-features .setting-row .col.description {
  font-size: 0.95rem;
}

/*---------
MARKETPLACE
---------*/

a[aria-label="Marketplace"],
a[href="/marketplace"] {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 40px;
}

.marketplace-grid .main-card-draggable {
  background-color: transparent !important;
  box-shadow: none !important;
}

.Dropdown-control,
.marketplace-tabBar-headerItemLink,
.searchbar-bar
.marketplace-header-icon-button
{
  height: 36px;
}

.marketplace-tabBar-headerItemLink.marketplace-tabBar-active,
.Dropdown-control {
  background-color: var(--backdrop);
  border-radius: 6px;
}

.marketplace-tabBar-headerItemLink {
  padding: 7px 16px;
  transition: background-color 0.3s ease;
}

.marketplace-tabBar-headerItemLink:hover {
  padding: 7px 16px;
  background-color: rgba(0, 0, 0, 0.2);
}

.Dropdown-control {
  background-color: var(--backdrop);
  border-radius: 6px !important;
  color: var(--spice-text);
  padding: 6px 36px 8px 16px;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.Dropdown-arrow {
  top: 17px;
}

.main-cardHeader-text {
  padding-top: 12px;
}

.searchbar-bar {
  border-style: none;
  background-color: var(--backdrop) !important;
}

.marketplace-header-icon-button {
  background-color: var(--backdrop);
}

.marketplace-header-icon-button:hover {
  background-color: rgba(255, 255, 255, 0.01);
}

.marketplace-header {
  padding-top: 6px; /* Already has 14px padding */
  padding-bottom: 20px;
  background: none;

  position: relative; /* Moves, because there's not a solid bg colour */
}

#marketplace-readme {
  background: var(--backdrop) !important;
  border-radius: var(--button-border) !important;
  padding: 20px !important;
}

.Dropdown-control:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.marketplace-tooltip-icon {
  fill: white;
}

.devtools-column {
  background-color: transparent;
}

.marketplace-code-editor {
  background-color: var(--backdrop-light);
  backdrop-filter: blur(25px);
}

/*-----------------
CONTEXT MENUS
-----------------*/

div#context-menu:before,
.main-contextMenu-menu:before,
.Dropdown-menu:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--button-border) !important;
  backdrop-filter: blur(25px);
}

.Dropdown-menu,
.main-contextMenu-menu {
  border-radius: var(--button-border);
  padding: 6px;
}

.Dropdown-option {
  border-radius: 8px;
}

.main-contextMenu-menu::-webkit-scrollbar-thumb {
  border-radius: 50px;
}

.main-contextMenu-menu::-webkit-scrollbar {
  width: 4px !important;
  transition: width 0.2s ease;
}

.main-contextMenu-menuItemButton {
  border-radius: var(--button-border);
}

.main-contextMenu-menu,
.main-contextMenu-tippy,
.aCtCKL9BxAoHeVZS0uRs,
.Dropdown-menu {
  background-color: rgba(var(--spice-rgb-card), 0.6) !important;
}

.x-filterBox-filterInput {
  height: 36px;
}

.main-contextMenu-filterPlaylistSearchContainer {
  height: auto;
}

.main-contextMenu-dividerAfter:last-child {
  display: none
}

/* Right click context menu (container) */
.main-contextMenu-menu {
  border-radius: var(--button-border);
}

/* Right click context menu (indented container) */
.main-contextMenu-menuItem > div {
  backdrop-filter: blur(25px);
  clip-path: inset(0 round var(--button-border)); /* so the stupid blur filter doesn't go outside of the border radius */
}

/* Right click context menu (item) */
.main-contextMenu-menuItemButton {
  width: calc(100% - 4px);
  margin: 2px;
  border-radius: 5px;
}

/* ----ANIMATIONS ----*/

.x-downloadButton-button,
.x-contributorButton-button,
.Button-sm-buttonSecondary-useBrowserDefaultFocusStyle,
.main-moreButton-button,
.Button-sc-y0gtbx-0.Button-sm-buttonSecondary-iconLeading-useBrowserDefaultFocusStyle.I3oc8sxg8Duq4kYUGnMo.LEZf9K5hG4hfCKfgr5Xo,
.Root__top-bar span.ButtonInner-sc-14ud5tc-0.encore-bright-accent-set,
.ButtonInner-sc-14ud5tc-0.ButtonInner-lg-iconOnly.encore-bright-accent-set,
.artist-followButton-button,
.IconWrapper__Wrapper-sc-1hf1hjl-0.Wrapper-lg-28-only {
  transition: transform 0.25s ease;
}

.x-downloadButton-button:hover,
.x-contributorButton-button:hover,
.main-moreButton-button:hover,
.IconWrapper__Wrapper-sc-1hf1hjl-0.Wrapper-lg-28-only:hover {
  transform: scale(1.1);
}

.Root__top-bar
  span.ButtonInner-sc-14ud5tc-0.encore-bright-accent-set:hover
  .playlist-playlist-playlist
  span.ButtonInner-sc-14ud5tc-0.encore-bright-accent-set:hover {
  transform: scale(1.05);
}

.Button-sm-buttonSecondary-useBrowserDefaultFocusStyle:hover,
.artist-followButton-button:hover {
  transform: scale(1.05);
  border-color: hsla(0, 0%, 100%, 0.5);
}

/*--------
HOME POPUP 
--------*/

#home-select {
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
}

div[aria-label="Hazy Settings"] .main-trackCreditsModal-mainSection {
  overflow-y: hidden;
  padding: 24px;
}

.main-trackCreditsModal-container {
  max-height: 100%;
}

.main-trackCreditsModal-originalCredits {
  padding-bottom: 0;
}

.main-userWidget-dropDownMenu li.main-contextMenu-menuItem > div {
  width: 225px;
}

.hazyOptionRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
}

button.hazyOptionToggle {
  display: flex;
  background-color: transparent;
  border: none;
}

span.toggleWrapper {
  width: 42px;
  height: 25px;
  background-color: rgb(30, 30, 30);
  border-radius: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

span.toggle {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: white;
  margin-left: 2px;
  transition: 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.toggle-module__toggle-input___ceLM4_marketplace~.toggle-module__toggle-indicator-wrapper___6Lcp0_marketplace .toggle-module__toggle-indicator___nCxwE_marketplace {
  background-color: white !important;
}

span.toggleWrapper:has(span.toggle.enabled),
.toggle-module__toggle-input___ceLM4_marketplace:checked~.toggle-module__toggle-indicator-wrapper___6Lcp0_marketplace
{
  background-color: var(--spice-accent);
}

span.toggleWrapper:not(:has(span.toggle.enabled)) span.toggle {
  background-color: rgb(130, 130, 130) !important;;
}

span.toggle.enabled {
  margin-left: 20px;
}

#src-input {
  margin-bottom: 5px;
}

.main-editImageButton-icon svg {
  fill: currentColor;
}

.main-playlistEditDetailsModal-imageDropDownButton svg {
  fill: currentColor;
}

#home-save {
  display: inline-block;
  margin-left: 15px;
  width: 80px;
  height: 38px;
  color: rgb(30, 30, 30);
  border-radius: var(--button-border);
  background-color: rgb(230, 230, 230);
  padding-bottom: 1px;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  border: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  cursor: pointer;
}

#home-save.applied,
#home-save.applied:hover {
  background-color: rgb(100, 200, 100);
  color: white;
  letter-spacing: 2px;
  cursor: default;
  box-shadow: 0px 0px 15px 5px rgb(75, 150, 75, 0.4);
}

#home-save.applyfailed,
#home-save.applyfailed:hover {
  background-color: rgb(255 84 84);
  color: white;
  letter-spacing: 2px;
  cursor: default;
  box-shadow: 0px 0px 15px 5px rgba(150, 75, 75, 0.4);
}

#home-save:hover {
  opacity: 0.9;
  box-shadow: 0px 0px 15px 5px rgba(200, 200, 200, 0.4);
}

#value-reset {
  display: inline-block;
  margin-left: auto;
  width: 80px;
  height: 38px;
  color: #ffffff;
  border-radius: var(--button-border);
  padding-bottom: 1px;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  border: none;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  background-color: #ea5d5d;
}

#value-reset:hover {
  background-color: #ec6f6f;
  box-shadow: 0px 0px 15px 5px rgb(229 46 46 / 40%);
}

/* report issue link */
.issue-button {
  display: block;
  font-size: 0.8em;
  width: fit-content;
  opacity: 0.8;
}

.issue-button:hover {
  opacity: 0.9;
}

.slider-container {
  display: flex;
  width: 100%;
}

.hazyOptionDesc {
  text-align: right;
  margin-right: 10px;
  font-size: 0.875rem;
}

.slider-container > div {
  color: rgb(255 255 255 / 60%);
  font-size: 0.8rem;
  margin-top: 2px;
  padding-left: 0;
  width: 25px;
}

.slider-container label {
  text-align: right;
  margin-right: 10px;
  font-size: 0.875rem;
}

.slider {
  appearance: none;
  width: 80%;
  height: 4px;
  background: rgba(var(--spice-rgb-selected-row), 0.3);
  border-radius: 2px;
  transition: opacity 0.2s;
  margin-top: 10px;
  margin-right: 12px;
}

.slider-value {
  padding-left: 0;
  width: 45px;
  display: flex;
}

.slider-value::-webkit-scrollbar-thumb {
  height: 2px;
  width: 2px;
}

.slider-value > div[id="unit"] {
  flex-shrink: 0;
}

.slider-value > div[id="unit"],
.slider-value > div[contenteditable="true"] {
  color: rgb(255 255 255 / 60%);
  font-size: 0.8rem;
  margin-top: 0px;
  transition: all 0.3s ease !important;
}

.slider-value > div[contenteditable="true"]:hover,
.slider-value > div[contenteditable="true"]:focus {
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 60%);
}

.slider-value > div[contenteditable="true"]:hover + div[id="unit"],
.slider-value > div[contenteditable="true"]:focus + div[id="unit"] {
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 60%);
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  cursor: pointer;
  background-color: var(--spice-text);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(var(--spice-rgb-shadow), 0.5);
  height: 9px;
  width: 9px;
}

.slider::-webkit-slider-thumb:active {
  cursor: grab;
}

/*-------------------
THEMED PRIMARY BUTTON
-------------------*/
.e-91000-button-primary .e-91000-button-primary__inner
{
  color: var(--spice-text) !important;

  background-color: var(--spice-button-active);
}

.e-91000-button-primary .e-91000-button-primary__inner:hover
{
  background-color: hsl(from var(--spice-button-active) h s l / 0.7);
}

.e-91000-button-primary .e-91000-button-primary__inner:active
{
  background-color: hsl(from var(--spice-button-active) h s l / 0.5);
}

/*-------------------
POPUP MODAL
-------------------*/

#banner-select {
  grid-area: banner-image;
  width: auto;
}

.banner-input {
  display: none;
}

#src-select {
  grid-area: src-select;
}

.main-playlistEditDetailsModal-textElement:focus {
  background-color: rgba(var(--spice-rgb-selected-row), 0.1);
}

.main-confirmDialog-container {
  --background-highlight: hsl(from var(--spice-button) h s l / 0.7) !important;
  --background-press: hsl(from var(--spice-button) h s l / 0.5) !important;

  background-color: var(--backdrop-light);
  color: var(--spice-text) !important;

  backdrop-filter: blur(25px) !important;
  box-shadow:
    0 16px 24px rgba(var(--spice-rgb-shadow), 0.075),
    0 6px 8px rgba(var(--spice-rgb-shadow), 0.05) !important;
}

.main-confirmDialog-container > * {
  color: var(--spice-text) !important;
}

.main-confirmDialog-button,
dialog > div.encore-light-theme button[data-encore-id="buttonPrimary"]
{
  --background-highlight: hsl(from var(--spice-button) h s l / 0.7) !important;
  --background-press: hsl(from var(--spice-button) h s l / 0.5) !important;
  color: black !important;
}

.GenericModal__overlay button[data-encore-id="buttonPrimary"] span:hover,
div[role="dialog"] > div,
div[role="dialog"] button[data-encore-id="buttonTertiary"],
dialog > div.encore-light-theme *
{
  color: var(--spice-text) !important;
}

dialog > div.encore-light-theme > h2 {
  margin-bottom: 0.25rem;
}

dialog > div.encore-light-theme > p {
  color: var(--spice-subtext) !important;
}

dialog > div.encore-light-theme .Button-buttonTertiary-textSubdued-medium-useBrowserDefaultFocusStyle:hover {
  transform: scale(1.04) !important;
  transition-duration: var(--shortest-1);
}

.bhvAemcPYUmxOdBe1mVi {
  --modal-max-height: 90vh !important;
}

/*----------------
QUICK SEARCH MODAL
----------------*/
.zogFp9G1AEqb8AKOd5BO.mXdNvIO9PYnBFoyoMyUO.Xf30G8NSPQ3pex0iD4zB {
  backdrop-filter: blur(25px) !important;
  box-shadow:
    0 16px 24px rgba(var(--spice-rgb-shadow), 0.075),
    0 6px 8px rgba(var(--spice-rgb-shadow), 0.05) !important;
  border-radius: var(--button-border);
}

.zZMsUUWG29PYcwWPXhOV:not(._kfmGT75UTPoF_D2afwa),
.zZMsUUWG29PYcwWPXhOV._kfmGT75UTPoF_D2afwa,
.search-modal-listbox,
.search-modal-keyboard-accessibility-bar{
  background: none;
}

.search-modal-keyboard-accessibility-bar {
  padding-top: 4px;
  padding-bottom: 20px;
}

.search-modal-searchBar {
  background-color: hsl(from white h s l / 0.85);
}
div:has(> .search-modal-searchBar) {
  padding-top: 20px;
}

.search-modal-resultItem {
  border-radius: var(--button-border);
}

/*-----
POPOVER
-----*/
.encore-announcement-set {
  background-color: var(--backdrop-light);
  color: var(--spice-text) !important;

  backdrop-filter: blur(40px) !important;
  box-shadow:
    0 16px 24px rgba(var(--spice-rgb-shadow), 0.09),
    0 6px 8px rgba(var(--spice-rgb-shadow), 0.15) !important;
}

.encore-announcement-set button > span > svg {
  fill: var(--spice-text);
}

.yzZ_VZHrZBb3REPcU7tD:before {
  background: linear-gradient(to bottom right,transparent 50%, rgb(68 68 68 / 45%) 50%);
  mask-image: linear-gradient(to bottom right,transparent 50%, black 50%);
  
  backdrop-filter: blur(40px);
}

/*-------------------
NOW PLAYING COLOR FIX
-------------------*/
.main-trackList-playingIcon {
  mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
  background: var(--spice-button);
  content-visibility: hidden;
  mask-repeat: no-repeat;
}

/*-------------------
COLOR PICKER
-------------------*/
#color-input {
  background-color: transparent;
  
  height: 32px;
  width: 32px;
  
  padding: 2px !important;
  margin-left: 5px;
  margin-right:5px;

  overflow: hidden;
  cursor: pointer;
  vertical-align: middle;
}

#color-input::-webkit-color-swatch {
  border-radius: 50%;

  border: 3.375px rgb(230, 230, 230) solid !important;
}
#color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

/*------------------
TRANSPARENT BG FIXES
------------------*/
.Ps9zgW56WZaBVLo1n3cg {
  color: black !important;
}

/*-----------------------
EXTENSION-SPECIFIC TWEAKS
-----------------------*/

/* Fix lyrics plus now playing bar button not appearing */
.main-nowPlayingBar-extraControls > button.main-nowPlayingBar-lyricsButton:not([data-testid="lyrics-button"]) {
  display: flex !important;
}
