spicetify-themes/Dribbblish/user.css

:root {
    --corner-radius: 10px;
    --bar-cover-art-size: 40px;
    --scrollbar-vertical-size: 10px;
    --scrollbar-horizontal-size: 10px;
    --bar-height: 90px;
    --main-gap: 10px;
}

@font-face {
    font-family: "Google Sans Display";
    src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Google Sans Display";
    src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "Roboto";
    src: url("glue-resources/fonts/Roboto.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Roboto";
    src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
}

body {
    --glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew,
        Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
    --info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica,
        arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
    font-family: var(--glue-font-family);
    letter-spacing: normal;
}

.global-nav .Root__top-container {
    grid-template-areas: "global-nav global-nav global-nav"
        "left-sidebar main-view right-sidebar"
        "left-sidebar now-playing-bar now-playing-bar" !important;
}

.Root__top-container {
    grid-template-areas:
        "left-sidebar main-view right-sidebar"
        "left-sidebar now-playing-bar right-sidebar" !important;
    gap: 0;
    padding-left: 0 !important;
}

.global-nav #Desktop_PanelContainer_Id {
    border-radius: 0 !important;
}

.Root__now-playing-bar {
    background-color: var(--spice-player);
    border-radius: 0 0 var(--corner-radius) var(--corner-radius) !important;
    grid-area: now-playing-bar !important;
}

.Root__globalNav {
    background-color: var(--spice-main) !important;
    border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
    margin-left: calc(var(--left-sidebar-width) * 1px);
}

.Root__globalNav .main-globalNav-historyButtonsContainer,
.Root__globalNav .main-globalNav-searchSection,
.Root__globalNav .main-topBar-topbarContentRight {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
}

.main-home-filterChipsSection {
    background-color: var(--spice-main) !important;
}

.global-nav .Root__main-view {
    border-radius: 0 !important;
}

.Root__main-view {
    border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
    grid-area: main-view !important;
}

.legacy .Root__top-container:not(:has(> .Root__right-sidebar)) {
    padding-right: var(--main-gap);
}

.ylx .Root__top-container:not(:has(> .Root__right-sidebar > aside)) {
    padding-right: var(--main-gap);
}

.Root__right-sidebar:not(:has(> aside)) {
    padding-left: 0;
}

.Root__nav-bar {
    grid-area: left-sidebar !important;
}

/* move the progress bar to the top */
.playback-bar {
    position: absolute;
    left: 0;
    top: -5px;
}

.main-nowPlayingBar-nowPlayingBar {
    position: relative;
    padding-inline-end: 16px !important;
}

.progress-bar {
    --progress-bar-height: 2px;
    --progress-bar-radius: 0;
    --fg-color: var(--spice-button);
    --bg-color: rgba(var(--spice-rgb-text), 0.2);
}

/* add gradient to player bar */
.main-nowPlayingBar-container {
    background-color: unset;
    background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%) !important;
    border-radius: 0 0 var(--corner-radius) var(--corner-radius) !important;
    border-top: 0;
    min-width: 518px;
}

/* rearrange player bar */
.main-nowPlayingBar-left {
    order: 1;
    flex: 1;
    width: auto;
    min-width: 0 !important;
}

.main-nowPlayingBar-center {
    order: 0;
    flex: 1;
    width: auto;
    min-width: unset !important;
}

.main-nowPlayingBar-right {
    order: 2;
    flex: 1;
    width: auto;
    min-width: unset !important;
}

/* hide time elapsed */
.main-playbackBarRemainingTime-container,
.playback-bar__progress-time-elapsed {
    display: none;
}

/* custom dynamic prog tooltip */
.playback-bar .prog-tooltip {
    position: absolute;
    min-width: 100px;
    width: unset;
    height: 25px;
    top: -35px;
    padding: 0 5px;
    border-radius: 4px;
    text-align: center;
    color: var(--spice-text);
    background-color: var(--spice-button);
    opacity: 0;
    transition: opacity 0.2s linear, left 0.2s linear;
}

.playback-bar:hover .prog-tooltip {
    opacity: 1;
}

/* customise player controls buttons */
.player-controls__buttons {
    position: relative;
    margin-bottom: 0;
}

.main-shuffleButton-button {
    position: absolute;
    left: 200px;
}

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

.player-controls__left,
.player-controls__right {
    gap: 16px;
    flex: 0;
}

.player-controls__right svg,
.player-controls__left svg {
    width: 14px;
    height: 14px;
}

/* customise play button */
.main-playPauseButton-button {
    background-color: transparent !important;
}

.main-playPauseButton-button svg {
    width: 32px !important;
    height: 32px !important;
    color: var(--spice-button);
}

/* customise right side player buttons */
.control-button {
    color: var(--spice-text);
}

.main-genericButton-button {
    color: var(--spice-text);
}

/* customise cards hover play button */
.main-card-PlayButtonContainer .ButtonInner-medium-iconOnly {
    background-color: var(--background-base);
    color: var(--spice-text);
}

/* top welcome box viz. good morning */
.view-homeShortcutsGrid-PlayButtonContainer .ButtonInner-small-iconOnly,
.view-homeShortcutsGrid-PlayButtonContainer .ButtonInner-medium-iconOnly,
.view-homeShortcutsGrid-PlayButtonContainer .ButtonInner-large-iconOnly {
    background-color: var(--background-base);
    color: var(--spice-text);
}

/* top bar sponsored ads */
.Button-medium-buttonPrimary-useBrowserDefaultFocusStyle .ButtonInner-medium {
    background-color: var(--background-base);
    color: var(--spice-text);
}


/* customise player cover art */
.main-nowPlayingWidget-coverArt .cover-art {
    width: var(--bar-cover-art-size) !important;
    height: var(--bar-cover-art-size) !important;
    background-color: transparent;
}

.main-nowPlayingWidget-nowPlaying {
    justify-content: center;
}

/* style navbar */
.main-navBar-mainNav {
    gap: 0 !important;
}

.main-navBar-mainNav>div {
    background-color: var(--spice-sidebar);
}

.main-yourLibraryX-navLink {
    height: 48px;
}

/* change tab colours */
.main-navBar-mainNav .link-subtle,
.main-navBar-mainNav .link-subtle svg {
    color: var(--spice-sidebar-text) !important;
}

/* give active nav tab a background */
.main-navBar-mainNav li:has(> .active) {
    background-color: var(--spice-tab-active);
    border-radius: 4px;
}

/* align library button with other nav items */
.main-yourLibraryX-header {
    padding-top: 4px !important;
}

.main-yourLibraryX-navItems {
    padding-bottom: 0 !important;
    padding: 8px;
}

.main-yourLibraryX-navItems li {
    padding-left: 16px;
}

/* remove built in scrolllist shadow */
.main-yourLibraryX-isScrolled {
    box-shadow: none !important;
}

/* round playlist images */
.x-entityImage-imageContainer {
    border-radius: 50% !important;
    background-color: transparent;
    width: 40px !important;
    height: 40px !important;
    align-self: center;
    box-shadow: none !important;
}

li div:has(> .x-entityImage-imageContainer),
li div:has(> .main-yourLibraryX-rowCover) {
    justify-content: center;
    width: 48px;
}

/* folder items */
.x-entityImage-imagePlaceholder {
    background-color: transparent;
    color: var(--spice-sidebar-text);
}

/* local files item */
.main-yourLibraryX-rowCover {
    width: 40px;
    height: 40px;
}

.fRZRXRIV2YBCFLYgwDAr {
    border-radius: 50% !important;
}

.fRZRXRIV2YBCFLYgwDAr>svg {
    width: 15px;
    height: 15px;
}

/* remove hover effect */
li>div>div::after {
    background-color: transparent !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-tab-active);
}

/* fix scrolllist item colours */
.main-navBar-mainNav li p {
    color: var(--spice-sidebar-text) !important;
}

.main-navBar-mainNav li p svg {
    fill: var(--spice-sidebar-text) !important;
}

.main-yourLibraryX-listRowIconWrapper {
    fill: var(--spice-sidebar-text) !important;
}

/* reduce spacing between playlist name and subtitle */
.main-yourLibraryX-listRowSubtitle {
    margin-top: -8px;
}

.main-yourLibraryX-collapseButton>button {
    gap: 8px;
    color: var(--spice-sidebar-text) !important;
}

/* expanded sidebar buttons */
.search-searchCategory-carouselButton {
    background-color: transparent;
}

.search-searchCategory-carouselButton:hover {
    background-color: var(--spice-tab-active);
}

.search-searchCategory-carouselButton svg {
    fill: var(--spice-sidebar-text) !important;
}

.main-yourLibraryX-iconOnly {
    color: var(--spice-sidebar-text) !important;
}

.main-yourLibraryX-iconOnly:hover {
    background-color: var(--spice-tab-active);
}

.main-yourLibraryX-filterArea>div>div:first-child button {
    background-color: var(--spice-tab-active) !important;
}

.main-yourLibraryX-filterArea>div>div:first-child button>span {
    background-color: var(--spice-tab-active) !important;
    color: var(--spice-text) !important;
}

.main-yourLibraryX-libraryFilter .x-sortBox-sortDropdown,
.main-yourLibraryX-libraryFilter .x-filterBox-expandButton,
.main-yourLibraryX-libraryFilter .x-filterBox-searchIconContainer,
.main-yourLibraryX-libraryFilter .x-filterBox-filterInput,
.main-yourLibraryX-libraryFilter .x-filterBox-clearButton {
    color: var(--spice-sidebar-text);
}

/* hide main view backgound gradient */
.main-entityHeader-backgroundColor,
.main-actionBarBackground-background,
.main-topBar-background,
.main-home-homeHeader {
    background-color: var(--spice-main) !important;
    background-image: none !important;
}

.main-topBar-background {
    border-radius: var(--corner-radius);
}

.main-topBar-overlay,
.main-trackList-trackListHeader {
    background-color: var(--spice-main) !important;
}

/* fix play button icon colour */
.main-playButton-PlayButton svg {
    color: var(--spice-text);
}

/* fix playlist action bar buttons colour */
.main-actionBar-ActionBarRow button,
.main-actionBar-ActionBarRow svg:not(.main-playButton-PlayButton svg) {
    color: rgba(var(--spice-rgb-text), 0.7);
}

.main-actionBar-ActionBarRow button:hover,
.main-actionBar-ActionBarRow button:hover svg:not(.main-playButton-PlayButton svg) {
    color: var(--spice-text);
}

/* change playing icon from gif to svg */
.main-trackList-playingIcon {
    -webkit-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;
    -webkit-mask-repeat: no-repeat;
}

/* full screen artists background */
.main-entityHeader-container.main-entityHeader-withBackgroundImage,
.main-entityHeader-background,
.main-entityHeader-background.main-entityHeader-overlay:after {
    height: 100vh;
}

.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
    font-size: 120px !important;
    line-height: 120px !important;
}

.contentSpacing,
.artist-artistDiscography-headerContainer {
    padding-left: 64px;
    padding-right: 64px;
}

.artist-artistOverview-overview .main-entityHeader-headerText {
    justify-content: center;
}

/* progress bar moves smoothly */
.x-progressBar-fillColor {
    transition: transform 1s linear;
}

.progress-bar__slider {
    transition: left 1s linear;
}

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

/* right sidebar text */
.Root__right-sidebar {
    --text-base: var(--spice-sidebar-text);
    --background-tinted-base: var(--spice-tab-active);
}

.Root__right-sidebar a,
.Root__right-sidebar .main-trackInfo-artists a,
.artist-artistOnTour-timeAndVenue.artist-artistOnTour-condensed,
.Root__right-sidebar .main-nowPlayingView-creditsSource,
.Root__right-sidebar .main-nowPlayingView-playNextButton,
.Root__right-sidebar .main-nowPlayingView-playNext {
    color: var(--spice-sidebar-text);
}

.main-nowPlayingView-content {
    --text-subdued: var(--spice-sidebar-text);
}

/* add main backshadow */
#dribbblish-back-shadow {
    z-index: 5;
    grid-area: main-view / main-view / now-playing-bar / main-view;
    box-shadow: 0 0 10px 3px #0000003b;
    border-radius: var(--corner-radius);
    pointer-events: none;
}

/* add fade effect to playlist scrolllist */
.os-viewport.os-viewport-native-scrollbars-invisible[fade="full"] {
    -webkit-mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
}

.os-viewport.os-viewport-native-scrollbars-invisible[fade="top"] {
    -webkit-mask-image: linear-gradient(transparent 0%, black 10%);
    mask-image: linear-gradient(transparent 0%, black 10%);
}

.os-viewport.os-viewport-native-scrollbars-invisible[fade="bottom"] {
    -webkit-mask-image: linear-gradient(black 90%, transparent 100%);
    mask-image: linear-gradient(black 90%, transparent 100%);
}

/* style input els */
input {
    background-color: unset !important;
    border-bottom: solid 1px var(--spice-text) !important;
    border-radius: 0 !important;
    padding: 6px 10px 6px 48px;
    color: var(--spice-text) !important;
}

.Root__nav-bar input {
    border-bottom: solid 1px var(--spice-sidebar-text) !important;
    color: var(--spice-sidebar-text) !important;
}

.Root__nav-bar input::placeholder {
    color: rgba(var(--spice-rgb-sidebar-text), 0.5) !important;
}

/* fix connect bar styles */
.main-connectBar-connectBar {
    color: var(--spice-main) !important;
    border-radius: 0 0 var(--corner-radius) var(--corner-radius);
}

/* topbar play button */
.main-topBar-topbarContent .main-playButton-PlayButton>button>span {
    inline-size: 32px;
    block-size: 32px;
    min-block-size: auto;
}

.main-topBar-topbarContent .main-playButton-PlayButton svg {
    width: 18px;
    height: 18px;
}

.main-topBar-topbarContent .main-playButton-PlayButton>button>span>span {
    position: initial;
    height: 18px;
}

/* disable dynamic lyrics background */
.lyrics-lyrics-container {
    --lyrics-color-inactive: rgba(var(--spice-rgb-text), 0.3) !important;
}

.lyrics-lyrics-background {
    background-color: var(--spice-main);
}

/* v1.2.14 */
.main-yourLibraryX-libraryContainer.main-yourLibraryX-libraryIsExpanded.main-yourLibraryX-libraryIsCollapsed,
.main-yourLibraryX-libraryRootlist.main-yourLibraryX-libraryIsExpanded:not(.main-yourLibraryX-libraryIsCollapsed) {
    padding-bottom: 0;
}

[dir="ltr"] .main-nowPlayingWidget-coverExpanded {
    transform: none;
}

.ylx .main-coverSlotExpanded-container {
    bottom: calc(var(--main-gap) + 70px + 10px);
    left: calc(var(--nav-bar-width) + 10px);
}

.ylx.connected .main-coverSlotExpanded-container {
    bottom: calc(var(--main-gap) + 70px + 24px + 10px);
}

/* v1.2.12 -> 1.2.13 */
.main-buddyFeed-container {
    background-color: inherit;
    box-shadow: none;
    overflow: initial;
}

.legacy-gridChange .main-coverSlotExpanded-container {
    left: calc(var(--nav-bar-width) + 10px);
}

/* v1.2.0 --> 1.2.11 */
.legacy .Root__top-container {
    grid-template-areas:
        "left-sidebar top-bar right-sidebar"
        "left-sidebar main-view right-sidebar"
        "left-sidebar now-playing-bar right-sidebar" !important;
}

.Root__top-container {
    padding: 10px 0;
    background-color: var(--spice-sidebar);
}

.Root__right-sidebar {
    background-color: var(--spice-sidebar);
}

.Root__main-view {
    background-color: var(--spice-main);
}

.main-rootlist-rootlistDivider {
    background-color: transparent;
}

.main-buddyFeed-activityMetadata .main-buddyFeed-username a,
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
.main-buddyFeed-activityMetadata .main-buddyFeed-usernameAndTimestamp,
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink {
    color: var(--spice-sidebar-text) !important;
}

.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName {
    color: var(--spice-sidebar-text);
}

.collection-icon,
.premiumSpotifyIcon,
.search-icon {
    color: var(--spice-sidebar-text) !important;
}

.main-confirmDialog-container {
    background-color: var(--spice-card);
}

.main-confirmDialog-container .TypeElement-canon-textBase {
    color: var(--spice-text);
}

.main-confirmDialog-buttonContainer button span {
    color: var(--spice-card);
}

.main-coverSlotExpanded-container {
    position: fixed;
    z-index: 2;
    width: 250px;
    height: 250px;
    bottom: calc(var(--main-gap) + var(--bar-height) + 10px);
    left: calc(var(--nav-bar-width) + 20px);
}

.connected .main-coverSlotExpanded-container {
    bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px);
}

.left-sidebar-collapsed .main-coverSlotExpanded-container {
    left: 82px;
}

.main-coverSlotExpanded-container img {
    border-radius: 4px;
}

.cover-art {
    border-radius: 4px;
}

.left-sidebar-collapsed .Root__nav-bar {
    width: 72px;
}

.left-sidebar-collapsed .main-rootlist-statusIcons {
    display: none;
}

.main-navBar-navBarLinkActive {
    background-color: var(--spice-tab-active);
}

.Root__nav-bar .main-rootlist-rootlist .os-scrollbar-handle {
    display: none;
}

.Root__top-container:has(> .Root__top-container--right-sidebar-hidden) {
    padding-right: 10px;
}

/* buddy feed w/ hidden text*/
.buddyFeed-hide-text .Root__top-container:not(:has(> .Root__top-container--right-sidebar-hidden)) .Root__right-sidebar {
    width: 72px !important;
}

.buddyFeed-hide-text .NdQkQZhcYIEcJnRdAYcQ,
.buddyFeed-hide-text .main-buddyFeed-header {
    display: none;
}

.buddyFeed-hide-text .main-buddyFeed-friendActivity {
    padding: 0 0 0 4px;
}

.buddyFeed-hide-text .main-buddyFeed-activityMetadata {
    visibility: hidden;
}

.buddyFeed-hide-text .main-avatar-avatar>div>div>div {
    display: flex;
    justify-content: center;
    padding-top: 7px;
}

.buddyFeed-hide-text .main-avatar-avatar,
.buddyFeed-hide-text .main-avatar-avatar div,
.buddyFeed-hide-text .main-buddyFeed-overlay {
    width: 32px !important;
    height: 32px !important;
}

.main-rootlist-rootlistDividerGradient {
    background: none;
}

.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText {
    opacity: 1;
}

.main-collectionLinkButton-collectionLinkButton,
.main-createPlaylistButton-button {
    color: var(--spice-sidebar-text);
    opacity: 1;
}

.main-likedSongsButton-likedSongsIcon {
    background: none;
}

.main-likedSongsButton-likedSongsIcon>svg {
    height: 20px !important;
    width: 20px !important;
}

/* style added sidebar images */
.main-rootlist-rootlistItem a {
    align-items: center;
    border-radius: 4px;
    display: flex;
    height: 56px;
    gap: 12px;
}

img.playlist-picture {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

img.playlist-picture[src$=".svg"] {
    width: 24px;
    height: 24px;
    border-radius: 0;
}

.legacy .Root__nav-bar .main-rootlist-wrapper,
.legacy-gridChange .Root__nav-bar .main-rootlist-wrapper {
    height: fit-content !important;
    contain: none !important;
}

.main-navBar-mainNav li:has(> div > .active) {
    background-color: var(--spice-tab-active);
}

.main-collectionLinkButton-selected.active {
    background-color: var(--spice-tab-active) !important;
}

.legacy .main-navBar-mainNav li,
.legacy-gridChange .main-navBar-mainNav li {
    background-color: transparent !important;
}

/* a.active {
    background-color: var(--spice-tab-active) !important;
} */
.main-rootlist-rootlistItem:has(> .main-rootlist-rootlistItemLinkActive) {
    background-color: var(--spice-tab-active) !important;
}

.main-rootlist-rootlistItemLink {
    padding-left: 12px;
}

.main-rootlist-rootlistItem {
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 0 !important;
    padding-right: 8px !important;
    border-radius: 4px;
}

.dribs-playlist-list {
    overflow: hidden;
}

.left-sidebar-collapsed .main-rootlist-expandArrow {
    display: none;
}

.main-navBar-navBarLink,
.main-collectionLinkButton-collectionLinkButton,
.main-createPlaylistButton-button {
    height: 56px !important;
}

.Button-md-buttonSecondary-useBrowserDefaultFocusStyle {
    border: 1px solid var(--spice-text);
}

.Button-md-buttonPrimary-useBrowserDefaultFocusStyle .ButtonInner-md {
    color: var(--spice-text);
}

/* sidebar speaker icon */
.CCeu9OfWSwIAJqA49n84 {
    color: var(--spice-sidebar-text);
}

.legacy .Root__right-sidebar .os-content {
    overflow-x: hidden;
}

.Root__right-sidebar .os-scrollbar-horizontal {
    display: none;
}

.UyzJidwrGk3awngSGIwv,
.poz9gZKE7xqFwgk231J4,
.xWm_uA0Co4SXVxaO7wlB {
    color: var(--spice-text);
}

.main-navBar-navBarLink {
    color: var(--spice-sidebar-text);
}

.main-navBar-navBarLink:focus,
.main-navBar-navBarLink:hover {
    color: var(--spice-sidebar-text);
}

.main-createPlaylistButton-createPlaylistIcon {
    background-color: var(--spice-sidebar-text);
}

.main-rootlist-rootlistItemLink:link,
.main-rootlist-rootlistItemLink:visited {
    color: var(--spice-sidebar-text) !important;
}

.main-rootlist-expandArrow {
    color: var(--spice-sidebar-text);
}

.main-buddyFeed-actions button,
.main-buddyFeed-titleContainer {
    color: var(--spice-sidebar-text) !important;
}

.main-tag-container {
    background-color: var(--spice-subtext);
}

.main-buddyFeed-content {
    height: 100%;
}

/* bottom scroll-bar popup fix */
.Root__main-view-overlay {
    width: 100%;
}