/*  ================================
    ROOT
    ================================ */

/* import */
/* find more in https://fonts.google.com/?category=Monospace&sort=popularity */
@import url("https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Courier+Prime:wght@400;700&family=Cousine:wght@400;700&family=Cutive+Mono&family=DM+Mono:wght@300;400;500&family=Fira+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&family=Inconsolata:wght@200;300;400;500;600;700;800;900&family=Nanum+Gothic+Coding:wght@400;700&family=PT+Mono&family=Roboto+Mono:wght@100;200;300;400;500;600;700&family=Share+Tech+Mono&family=Source+Code+Pro:wght@200;300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&family=Ubuntu+Mono:wght@400;700&family=VT323&display=swap");

/* user settings */
:root {
    --font-family: "DM Mono", monospace;
    /*
    --font-family: 'Anonymous Pro', monospace;
    --font-family: 'Courier Prime', monospace;
    --font-family: 'Cousine', monospace;
    --font-family: 'Cutive Mono', monospace;
    --font-family: 'DM Mono', monospace;
    --font-family: 'Fira Mono', monospace;
    --font-family: 'IBM Plex Mono', monospace;
    --font-family: 'Inconsolata', monospace;
    --font-family: 'Nanum Gothic Coding', monospace;
    --font-family: 'PT Mono', monospace;
    --font-family: 'Roboto Mono', monospace;
    --font-family: 'Share Tech Mono', monospace;
    --font-family: 'Source Code Pro', monospace;
    --font-family: 'Space Mono', monospace;
    --font-family: 'Ubuntu Mono', monospace;
    --font-family: 'VT323', monospace;
    */
    --font-size: 14px;
    --font-size-lyrics: 14px; /* 1.5em (default) */
    --font-weight: 400; /* 200 : 900 */
    --line-height: 1.2;

    --display-card-image: block; /* none | block */
    --display-coverart-image: none; /* none | block */
    --display-header-image: none; /* none | block */
    --display-library-image: block; /* none | block */
    --display-tracklist-image: none; /* none | block */

    --border-radius: 0px;
    --border-width: 1px;
    --border-style: solid; /* dotted | dashed | solid | double | groove | ridge | inset | outset */
}

/* font */
* {
    font-family: var(--font-family) !important;
    font-size: var(--font-size) !important;
    font-weight: var(--font-weight) !important;
    line-height: var(--line-height);
}
.lyrics-lyricsContent-lyric,
.lyrics-lyricsContent-text {
    font-size: var(--font-size-lyrics) !important;
}

/* images */
.main-cardImage-imageWrapper img {
    display: var(--display-card-image);
}
.main-coverSlotCollapsed-container {
    display: var(--display-coverart-image);
}
.main-entityHeader-imageContainer,
.under-main-view,
.main-entityHeader-creatorWrapper .main-avatar-avatar,
.main-entityHeader-imageContainer,
.playlist-playlist-playlistImageContainer,
.profile-userOverview-imageContainer {
    display: var(--display-header-image);
}
.x-entityImage-imageContainer img,
.main-yourLibraryX-rowCover img,
.main-avatar-image {
    display: var(--display-library-image);
}
.main-trackList-rowImage {
    display: var(--display-tracklist-image);
}

/* fix */
.Root__top-container {
    --panel-gap: 16px !important;
}
.Root__top-bar {
    border: var(--border-width) solid transparent;
}
.Root__main-view,
.Root__nav-bar,
.Root__now-playing-bar {
    overflow: visible;
}
.main-view-container {
    overflow: hidden;
}
.main-topBar-container {
    width: 99.5%;
}
.main-topBar-background,
.main-topBar-overlay,
.main-home-homeHeader {
    background-color: var(--spice-main) !important;
    background-image: none;
}
/* .main-rootlist-wrapper,
.main-rootlist-topSentinel,
.main-rootlist-bottomSentinel,
.main-rootlist-topSentinel div,
.main-rootlist-bottomSentinel div {
    height: auto !important;
    contain: unset;
} */
.main-trackList-rowPlayCount {
    width: 17ch;
}
.LayoutResizer__resize-bar {
    cursor: w-resize;
}
.spotifyinternal-artistnpv .npv-what-is-playing .npv-cover-art,
.spotifyinternal-artistnpv .npv-what-is-playing .npv-track {
    bottom: 18em;
}
.spotifyinternal-artistnpv .npv-what-is-playing .npv-cover-art {
    -webkit-transform: scale(0.34375);
    transform: scale(0.34375);
}
.spotifyinternal-artistnpv .npv-what-is-playing .npv-track {
    -webkit-transform: none;
    transform: none;
}
.tr1hDrJgoPSbMXlXU_sl {
    flex-direction: column-reverse;
}
.npv-main-container .playback-bar {
    position: unset;
    width: auto;
}
.mbUrqWP55sK6zhspiR72 {
    height: auto;
}
.Root__right-sidebar > section,
section.main-buddyFeed-container {
    width: auto !important;
}

/* 1.2.11 backwards compatibility - for linux */
/* pane borders */
.main-yourLibraryX-entryPoints,
.Root__main-view,
.Root__now-playing-bar,
.spotify__os--is-linux .Root__right-sidebar > div:nth-child(2) {
    border: var(--border-width) var(--border-style) var(--spice-border-inactive);
    border-radius: var(--border-radius) !important;
    background-color: var(--spice-main) !important;
}
.main-yourLibraryX-entryPoints:hover,
.Root__main-view:hover,
.Root__now-playing-bar:hover,
.spotify__os--is-linux .Root__right-sidebar > div:nth-child(2):hover {
    border: var(--border-width) var(--border-style) var(--spice-border-active);
}
.main-nowPlayingBar-nowPlayingBar {
    padding: 8px 8px 32px 8px !important;
    height: 96px !important;
}
.Root__nav-bar {
    gap: var(--panel-gap) !important;
}
.spotify__os--is-linux .Root__top-container {
    padding-top: var(--panel-gap) !important;
}

/* recolor */
:root {
    --spice-main-elevated: var(--spice-main);
    --spice-highlight-elevated: var(--spice-highlight);
    --spice-sidebar: var(--spice-main);
    --spice-player: var(--spice-main);
    --spice-card: var(--spice-main);
    --spice-shadow: var(--spice-main);
    --spice-selected-row: var(--spice-subtext);
    --spice-button: var(--spice-accent);
    --spice-button-active: var(--spice-accent-active);
    --spice-button-disabled: var(--spice-accent-inactive);
    --spice-tab-active: var(--spice-main);
    --spice-rgb-main-elevated: var(--spice-rgb-main);
    --spice-rgb-highlight-elevated: var(--spice-rgb-highlight);
    --spice-rgb-sidebar: var(--spice-rgb-main);
    --spice-rgb-player: var(--spice-rgb-main);
    --spice-rgb-card: var(--spice-rgb-main);
    --spice-rgb-shadow: var(--spice-rgb-main);
    --spice-rgb-selected-row: var(--spice-rgb-subtext);
    --spice-rgb-button: var(--spice-rgb-accent);
    --spice-rgb-button-active: var(--spice-rgb-accent-active);
    --spice-rgb-button-disabled: var(--spice-rgb-accent-inactive);
    --spice-rgb-tab-active: var(--spice-rgb-main);
}
.Root__top-container,
.Root__nav-bar {
    background-color: var(--spice-main);
}
.main-playPauseButton-button {
    background-color: transparent;
    color: var(--spice-subtext);
}
.main-playPauseButton-button:focus,
.main-playPauseButton-button:hover {
    transform: none;
    color: var(--spice-text);
}
#_R_G *:not([fill="none"]) {
    fill: var(--spice-button-active) !important;
}
#_R_G *:not([stroke="none"]) {
    stroke: var(--spice-button-active);
}
.main-trackList-playingIcon {
    filter: grayscale(1) opacity(0.2)
        drop-shadow(0 0 0 var(--spice-button-active))
        drop-shadow(0 0 0 var(--spice-button-active))
        drop-shadow(0 0 0 var(--spice-button-active));
}
::placeholder {
    color: var(--spice-subtext);
}
.main-entityHeader-background,
.main-entityHeader-backgroundColor,
.main-entityHeader-overlay,
.main-actionBarBackground-background,
.main-buddyFeed-container,
.main-nowPlayingView-content.main-nowPlayingView-gradient {
    background-color: transparent !important;
    background-image: none;
}
.progress-bar {
    --fg-color: var(--spice-button-active);
    --bg-color: var(--spice-button-disabled);
}
.playback-bar__progress-time-elapsed,
.main-playbackBarRemainingTime-container {
    mix-blend-mode: difference;
    color: var(--spice-button-active);
}
.main-trackList-placeholder,
.Pns6F5g4OEwEpdmOWTLg,
.eldivguzYznZgQoShJbe {
    background-color: var(--background-base);
    background-blend-mode: color-dodge;
}
.artist-artistAbout-container.artist-artistAbout-backgroundImage
    .artist-artistAbout-content
    > div {
    color: #fff;
}
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
    background: var(--spice-main);
}
.main-trackList-trackListRow:focus-within,
.main-trackList-trackListRow:hover,
.main-contextMenu-menuItemButton:hover,
.main-contextMenu-menuItemButton:not([aria-checked="true"]):focus,
.BoxComponent-group-naked-listRow-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px:hover::after,
.main-card-card:hover,
.main-card-card[data-context-menu-open="true"] {
    background-color: rgba(var(--spice-rgb-highlight), 0.5);
}
.main-trackList-trackListRow.main-trackList-selected,
.main-trackList-trackListRow.main-trackList-selected:hover,
.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-highlight);
}
.x-entityImage-imageContainer,
.x-entityImage-imageContainer div,
.fRZRXRIV2YBCFLYgwDAr {
    background-color: var(--spice-border-inactive);
}
.main-userWidget-boxCondensed,
.main-userWidget-boxCondensed:focus-visible,
.main-userWidget-boxCondensed:hover,
.main-userWidget-boxCondensed[data-context-menu-open="true"] {
    background-color: var(--spice-border-inactive) !important;
}
.main-cardImage-imageWrapper {
    --card-color: var(--spice-border-inactive);
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* pane borders */
.main-yourLibraryX-entryPoints,
.Root__main-view,
.Root__now-playing-bar,
.Root__right-sidebar .main-buddyFeed-container {
    border: var(--border-width) var(--border-style) var(--spice-border-inactive);
    border-radius: var(--border-radius);
    background-color: var(--spice-main);
}
.main-yourLibraryX-entryPoints:hover,
.Root__main-view:hover,
.Root__now-playing-bar:hover,
.Root__right-sidebar .main-buddyFeed-container:hover {
    border: var(--border-width) var(--border-style) var(--spice-border-active);
}

/* pane headers */
.Root__nav-bar .main-yourLibraryX-entryPoints:nth-child(1)::before,
.Root__nav-bar .main-yourLibraryX-entryPoints:nth-child(2)::before,
.Root__main-view::before,
.Root__now-playing-bar::before,
.Root__right-sidebar > section:not(:empty)::before {
    color: var(--spice-header);
    position: absolute;
    margin: -10px 4px;
    background: var(--spice-main);
    padding: 0 3px;
    z-index: 9;
}
.Root__nav-bar .main-yourLibraryX-entryPoints:nth-child(1)::before {
    content: "Pages";
}
.Root__nav-bar .main-yourLibraryX-entryPoints:nth-child(2)::before {
    content: "Library";
}
.Root__main-view::before {
    content: "Main";
}
.Root__now-playing-bar::before {
    content: "Playing";
}
.Root__right-sidebar > section:not(:empty)::before {
    content: "Sidebar";
}
.Root__nav-bar .main-yourLibraryX-entryPoints:hover::before,
.Root__main-view:hover::before,
.Root__now-playing-bar:hover::before,
.Root__right-sidebar section:not(:empty):hover::before {
    color: var(--spice-border-active);
}

/* scrollbars */
.os-theme-spotify
    > .os-scrollbar-vertical
    > .os-scrollbar-track
    > .os-scrollbar-handle {
    border-radius: var(--border-radius);
    width: 2px;
}
.os-theme-spotify
    > .os-scrollbar-vertical
    > .os-scrollbar-track
    > .os-scrollbar-handle:hover {
    border-radius: var(--border-radius);
    width: 6px;
}
.main-view-container__scroll-node > .os-scrollbar-vertical {
    top: 5px !important;
    right: 5px !important;
}
.os-scrollbar-handle {
    position: absolute;
    top: 0;
    right: 0;
}

/* context menus */
.main-contextMenu-menu {
    border: var(--border-width) var(--border-style) var(--spice-border-active);
    border-radius: var(--border-radius);
}

/* modals */
.GenericModal {
    border: var(--border-width) var(--border-style) var(--spice-border-active);
    border-radius: var(--border-radius);
    outline: 14px solid var(--spice-main) !important;
}
.GenericModal::before {
    content: "Modal";
    color: var(--spice-border-active);
    position: absolute;
    margin: -10px 4px;
    background: var(--spice-main);
    padding: 0 3px;
    z-index: 9;
}
.artist-artistAbout-modal {
    overflow: visible;
}

/*  ================================
    LEFT SIDEBAR
    ================================ */

/* pages pane */
.main-yourLibraryX-navLink {
    height: 24px;
    gap: 8px;
}
.main-yourLibraryX-navLink .home-icon,
.main-yourLibraryX-navLink .search-icon,
.main-yourLibraryX-navLinkActive .home-active-icon,
.main-yourLibraryX-navLinkActive .search-active-icon,
.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper > span {
    transform: scale(0.6);
}

/* library pane */
.main-yourLibraryX-isScrolled {
    box-shadow: none;
}
.Wrapper-md-leading {
    margin-right: 8px;
}
.main-yourLibraryX-listRowSubtitle {
    display: none;
}
.main-yourLibraryX-listItemGroup {
    grid-template-rows: 24px !important;
    min-block-size: auto;
    padding: 4px 18px;
}
.x-entityImage-imageContainer,
.x-entityImage-imageContainer div,
.main-yourLibraryX-rowCover {
    height: 24px !important;
    width: 24px !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.x-entityImage-imagePlaceholder,
.main-yourLibraryX-rowCover .Svg-img-textBrightAccent-24-icon {
    transform: scale(0.5);
}

/* sidebar config */
.main-yourLibraryX-entryPoints:first-child:has(
        .main-yourLibraryX-navItems:empty
    ) {
    display: none;
}

/*  ================================
    MAIN VIEW
    ================================ */

/* check out a cool project: https://github.com/Rigellute/spotify-tui

    _________  ____  / /_(_) __/_  __      / /___  __(_)\A
   / ___/ __ \\/ __ \\/ __/ / /_/ / / /_____/ __/ / / / /\A
  (__  ) /_/ / /_/ / /_/ / __/ /_/ /_____/ /_/ /_/ / /\A
 /____/ .___/\\____/\\__/_/_/  \\__, /      \\__/\\__,_/_/\A
     /_/                    /____/                      

*/
.main-home-home::before {
    content: "   _________  ____  / /_(_) __/_  __      / /___  __(_)\A   / ___/ __ \\/ __ \\/ __/ / /_/ / / /_____/ __/ / / / /\A  (__  ) /_/ / /_/ / /_/ / __/ /_/ /_____/ /_/ /_/ / /\A /____/ .___/\\____/\\__/_/_/  \\__, /      \\__/\\__,_/_/\A     /_/                    /____/                      ";
    white-space: pre-wrap;
    padding: 32px;
    color: var(--spice-banner);
    line-height: 1.2;
}
.main-entityHeader-headerText::before {
    content: "────█▀█▄▄▄▄─────██▄\A────█▀▄▄▄▄█─────█▀▀█\A─▄▄▄█─────█──▄▄▄█\A██▀▄█─▄██▀█─███▀█\A─▀▀▀──▀█▄█▀─▀█▄█▀\A";
    white-space: pre-wrap;
    padding-bottom: 32px;
    color: var(--spice-banner);
    line-height: 1.2;
}

/* top bar */
.queue-tabBar-active,
.marketplace-tabBar-active {
    text-decoration: underline !important;
}
.main-topBar-historyButtons .main-topBar-button,
.main-topBar-buddyFeed {
    background-color: transparent;
}
.main-topBar-button:first-child:before {
    content: "<";
}
.main-topBar-button.main-topBar-forward::before {
    content: ">";
}
.main-topBar-button:first-child > svg,
.main-topBar-button.main-topBar-forward > svg {
    display: none;
}
.main-topBar-topbarContent {
    gap: 24px;
}
.x-searchInput-searchInputInput {
    border-radius: var(--border-radius);
    background-color: transparent;
}
.x-searchInput-searchInputInput:hover,
.x-searchInput-searchInputInput:focus {
    box-shadow: none;
    border: 1px solid var(--spice-button-active);
    background-color: transparent;
}
.search-searchCategory-catergoryGrid * {
    border-radius: var(--border-radius);
}

/* headers */
.main-entityHeader-shadow {
    box-shadow: none;
}
.main-entityHeader-container.main-entityHeader-withBackgroundImage {
    background-image: radial-gradient(
        circle,
        transparent,
        rgba(var(--spice-rgb-main, 0.5)) 75%,
        var(--spice-main)
    );
}

/* compact tracklists */
.main-trackList-trackListRow {
    height: 32px;
}
.main-trackList-rowMainContent {
    grid-template: "title badges subtitle" / auto 1fr;
}
.main-trackList-rowImage {
    height: 24px;
    width: 24px;
}
.main-trackList-rowTitle::after {
    content: " |";
    color: var(--spice-highlight);
}
.main-trackList-number,
.main-trackList-icon {
    top: unset;
}

/* lyrics page & sidebar */
.lyrics-lyrics-background {
    background-color: var(--spice-main);
}
.main-nowPlayingView-sectionHeaderSpacing.main-nowPlayingView-lyricsGradient {
    background-color: var(--background-tinted-base);
}
.lyrics-lyrics-contentContainer {
    justify-content: start;
}
.lyrics-lyrics-container, .main-nowPlayingView-section {
    --lyrics-color-active: var(--spice-text) !important;
    --lyrics-color-inactive: var(--spice-subtext) !important;
    --lyrics-color-passed: var(--spice-subtext) !important;
    --lyrics-color-messaging: var(--spice-subtext) !important;
}
.lyrics-lyricsContent-lyric {
    opacity: 0.3;
    display: flex;
    flex-direction: row;
}
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-highlight {
    opacity: 0.7;
    transition: none;
}
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-active:not(
        :empty
    ) {
    background-color: var(--lyrics-color-background);
    color: var(--spice-main);
    opacity: 1;
    transition: none;
}
.lyrics-lyricsContent-lyric:not(:empty)::before {
    content: ">> ";
    opacity: 0;
    white-space: break-spaces;
}
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-active:not(
        :empty
    )::before {
    content: ">> ";
    opacity: 1;
    white-space: break-spaces;
}

/* lyrics cinema */
.main-lyricsCinema-lyricsCinemaVisible {
    border: var(--border-width) var(--border-style) transparent;
}

.main-nowPlayingView-lyricsContent {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/*  ================================
    PLAYBACK BAR
    ================================ */

/* playback bar itself */
.main-nowPlayingBar-nowPlayingBar {
    padding: 8px 8px 32px 8px;
    height: 96px;
}
.playback-bar {
    position: absolute;
    left: calc(var(--panel-gap) + 8px);
    bottom: calc(var(--panel-gap) + 8px);
    width: calc(100vw - var(--panel-gap) * 2 - 16px);
    justify-content: center;
}

/* playback time indicators */
.playback-bar__progress-time-elapsed {
    pointer-events: none;
}
.playback-bar__progress-time-elapsed::after {
    content: " /";
}
.playback-bar__progress-time-elapsed,
.main-playbackBarRemainingTime-container {
    z-index: 9;
    padding-top: 2px;
}

/* playback seek bar */
.playback-bar > .playback-progressbar {
    position: absolute;
}
.progress-bar {
    --progress-bar-height: 16px;
    --progress-bar-radius: var(--border-radius);
}
.progress-bar__slider {
    box-shadow: none;
    height: 100%;
    border-radius: 0;
}

/* cover art */
.main-nowPlayingWidget-coverArt .cover-art {
    height: 32px !important;
    width: 32px !important;
}
[dir="ltr"] .main-coverSlotCollapsed-navAltContainer {
    -webkit-transform: none;
    transform: none;
}
[dir="ltr"] .main-nowPlayingWidget-coverExpanded {
    transform: translateX(-40px);
}
[dir="ltr"]
    .main-nowPlayingWidget-coverExpanded
    .main-coverSlotCollapsed-container.main-coverSlotCollapsed-navAltContainer {
    opacity: 0;
}

/* volume bar */
.volume-bar__slider-container .x-progressBar-fillColor,
.volume-bar__slider-container
    .playback-progressbar-isInteractive
    .DuvrswZugGajIFNXObAr
    .x-progressBar-fillColor,
.volume-bar__slider-container
    .playback-progressbar-isInteractive
    .progress-bar:focus
    .x-progressBar-fillColor,
.volume-bar__slider-container
    .playback-progressbar-isInteractive
    .volume-bar__slider-container
    .progress-bar:hover
    .x-progressBar-fillColor,
.volume-bar__slider-container
    .playback-progressbar-isInteractive:focus-within
    .x-progressBar-fillColor {
    height: 9px;
    background-color: transparent;
    border-bottom: 2px dashed var(--fg-color);
}
.volume-bar__slider-container .x-progressBar-progressBarBg {
    background-color: transparent;
}

/* player controls */
.player-controls__buttons {
    margin-bottom: 0;
}
.player-controls__buttons,
.main-nowPlayingBar-extraControls {
    opacity: 0.25;
}
.player-controls__buttons:hover,
.main-nowPlayingBar-extraControls:hover {
    opacity: 1;
}
.main-shuffleButton-button::before {
    content: "\21C4";
}
.main-skipBackButton-button::before {
    content: "\25C1";
}
.main-playPauseButton-button[aria-label="Play"]::before,
.main-playPauseButton-button:has(
        path[d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"]
    )::before,
.main-playPauseButton-button:has(
        path[d="m7.05 3.606 13.49 7.788a.7.7 0 0 1 0 1.212L7.05 20.394A.7.7 0 0 1 6 19.788V4.212a.7.7 0 0 1 1.05-.606z"]
    )::before {
    content: "\25B6";
}
.main-playPauseButton-button[aria-label="Pause"]::before,
.main-playPauseButton-button:has(
        path[d="M2.7 1a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7H2.7zm8 0a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7h-2.6z"]
    )::before,
.main-playPauseButton-button:has(
        path[d="M5.7 3a.7.7 0 0 0-.7.7v16.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V3.7a.7.7 0 0 0-.7-.7H5.7zm10 0a.7.7 0 0 0-.7.7v16.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V3.7a.7.7 0 0 0-.7-.7h-2.6z"]
    )::before {
    content: "\275A\275A";
}
.main-skipForwardButton-button::before {
    content: "\25B7";
}
.main-repeatButton-button::before {
    content: "\21BB";
}
.main-repeatButton-button[aria-checked="mixed"]::before {
    content: "\21BB\2474";
}
.main-shuffleButton-button > svg,
.main-skipBackButton-button > svg,
.main-playPauseButton-button > svg,
.main-skipForwardButton-button > svg,
.main-repeatButton-button > svg {
    display: none;
}

/* connect bar */
.nav-ylx .main-connectBar-connectBar {
    position: absolute;
    background-color: transparent !important;
    color: var(--spice-accent-active) !important;
    mix-blend-mode: difference;
    pointer-events: none;
    right: var(--panel-gap);
    bottom: var(--panel-gap);
    padding: 17px;
    opacity: 0.25;
}
.main-devicePicker-indicator.main-devicePicker-connected {
    display: none;
}