:root {
    --gradient-colors: var(--spice-gradienttop), var(--spice-gradientbottom);
}

.main-rootlist-rootlistItem:hover {
    background-color: var(--spice-card-background);
}

.main-navBar-navBar {
    background-image: linear-gradient(var(--gradient-colors));
}

/* buttons */
.main-navBar-navBarLink {
    border-radius: var(--border-radius-2);
    color: var(--spice-text);
}
.main-addButton-active,
.main-addButton-active:focus,
.main-addButton-active:hover {
    color: var(--spice-player);
}
/* menus */
.main-card-card {
    background-image: linear-gradient(var(--gradient-colors));
    border-radius: 10px;
}

.main-card-card:hover {
    background-color: var(--spice-card-hover);
    border-radius: 10px;
}

.main-contextMenu-menuItemButton,
.main-userWidget-dropDownMenuItemButton {
    /*border-radius: var(--border-radius-2);*/
    color: var(--spice-text);
    height: 32px;
    padding-left: 8px;
}
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
    background: transparent;
    -webkit-box-shadow: 0 -1px 0 0 var(--spice-player);
    box-shadow: 0 -1px 0 0 var(--spice-player);
}
.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
    border-bottom: 1px solid transparent;
    background: var(--spice-main);
}
.Root__now-playing-bar {
    grid-area: now-playing-bar;
    width: 200px;
    z-index: 4;
}
#spicetify-home-config button:disabled,
#spicetify-sidebar-config button:disabled {
    /*background-color: var(--spice-button-disabled) !important;*/
    color: var(--spice-text) !important;
}

/* remove gradients */
.main-home-homeHeader,
.main-actionBarBackground-background {
    background-image: none;
}
.main-actionBarBackground-background,
.main-home-homeHeader,
.main-topBar-background,
.main-topBar-overlay,
.x-entityHeader-overlay,
.x-actionBarBackground-background,
._UFTK833WfTNGb4agRTd,
.Ic3iDUCnC09k55peZBfC {
    background-color: var(--spice-main) !important;
}
.x-actionBarBackground-background,
.x-entityHeader-overlay,
.Ic3iDUCnC09k55peZBfC,
._UFTK833WfTNGb4agRTd {
    background-image: none !important;
}
.main-entityHeader-backgroundColor {
    background: var(--spice-main);
}
.player-controls__buttons--new-icons {
    gap: 16px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
}
.Root__top-container {
    display: grid;
    grid-template-areas: "left-sidebar main-view right-sidebar now-playing-bar";
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    height: 100%;
    min-height: 100%;
    position: relative;
    width: 100%;
    background-color: var(--spice-main);
}
.global-nav .Root__top-container {
    grid-template-areas:
        "global-nav global-nav global-nav global-nav"
        "left-sidebar main-view right-sidebar now-playing-bar"
        "left-sidebar main-view right-sidebar now-playing-bar";
    grid-template-columns: auto 1fr auto 15vw;
    grid-template-rows: 1fr auto;
}
.main-nowPlayingBar-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0px;
    -webkit-user-select: none;
    user-select: none;
}

.player-controls__left,
.player-controls__right {
    flex-direction: column;
}

.playback-bar {
    flex-direction: column;
    position: relative;
}

.playback-bar__progress-time-elapsed {
    position: absolute;
    left: 16px;
    top: 20px;
}
.playback-bar__progress-time-elapsed::after {
    content: "/";
    margin-left: 6px;
}
.main-playbackBarRemainingTime-container {
    margin-left: 56px;
}

.main-nowPlayingBar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-nowPlayingBar-nowPlayingBar {
    align-items: center;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    height: 100%;
    background-image: linear-gradient(var(--gradient-colors));
}

.Root__right-sidebar > aside {
    background-image: linear-gradient(var(--gradient-colors));
}

/*button*/
.encore-dark-theme .encore-bright-accent-set {
    --background-base: var(--spice-button-active);
    --background-highlight: var(--spice-player);
    --background-press: var(--spice-player);
    --decorative-subdued: var(--spice-player);
}

/*tracklist*/
.main-trackList-trackListRow {
    border-radius: var(--border-radius-2);
}
.main-trackList-trackListRow:hover {
    background-color: var(--spice-card-background);
}
.prog-tooltip {
    display: none;
}

.main-rootlist-rootlistDividerContainer {
    position: relative;
    /*color: var(--spice-gradientTop)*/
    display: none;
}

.progress-bar {
    width: 150px;
}

.playback-progressbar {
    width: 100px;
}

.volume-bar {
    flex: 0;
}

.main-nowPlayingWidget-nowPlaying {
    flex-direction: column;
    gap: 16px;
}

.main-coverSlotCollapsed-container {
    transform: none !important;
}

.main-nowPlayingWidget-nowPlaying > button {
    color: var(--spice-text);
}
.main-nowPlayingBar-extraControls {
    flex-direction: column;
}
.main-yourLibraryX-entryPoints:nth-child(2) {
    background-image: linear-gradient(var(--gradient-colors));
}
.main-yourLibraryX-entryPoints:nth-child(1) {
    background-color: var(--spice-gradienttop);
}
/* remove hover effect */
li > div > div::after {
    background-color: var(--spice-card-background) !important;
}
li > div::after {
    background-color: transparent !important;
}
/* give background to active playlist */
.BoxComponent-group-tinted-listRow-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px,
.BoxComponent-group-tinted-listRow-isInteractive-hasFocus-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px {
    background-color: var(--spice-card-background);
}
/* expanded sidebar buttons */
.search-searchCategory-carouselButton {
    background-color: transparent;
}
.search-searchCategory-carouselButton:hover {
    background-color: var(--spicecard-background);
}
.main-yourLibraryX-iconOnly:hover {
    background-color: var(--spice-card-background);
    color: var(--spice-text);
}
.Root__nav-bar {
    background-color: var(--spice-main);
}
/* give active nav tab a background */
.main-navBar-mainNav li:has(> .active) {
    background-color: var(--spice-card-background);
    border-radius: 4px;
}
.view-homeShortcutsGrid-shortcut {
    background-image: linear-gradient(var(--gradient-colors));
}
.main-actionBar-ActionBarRow > * {
    color: var(--spice-text);
}
.main-actionBar-ActionBarRow svg:not(.main-playButton-PlayButton svg) {
    color: var(--spice-text);
}
.x-sortBox-sortDropdown {
    color: inherit;
}