/* ==UserStyle==
@name           MoonMonet YTM (Stylus)
@namespace      moonmonet-ytm
@version        0.1.0
@description    Material You style theme for YouTube Music
@author         noxygalaxy
@homepageURL    https://github.com/MoonMonet/YTMTheme
@supportURL     https://github.com/MoonMonet/YTMTheme/issues
@updateURL      https://raw.githubusercontent.com/MoonMonet/YTMTheme/main/moonmonet-stylus.css
@license        GPL-3.0
==/UserStyle== */

@-moz-document domain("music.youtube.com") {
  :root {
    --moonmonet-version: "0.1.0";
    /* colors */
    --md-sys-color-background: #141218;
    --md-sys-color-on-background: #e6e0e9;
    --md-sys-color-surface: #1d1b20;
    --md-sys-color-surface-variant: #49454f;
    --md-sys-color-on-surface: #e6e0e9;
    --md-sys-color-on-surface-variant: #cac4d0;
    --md-sys-color-primary: #d0bcff;
    --md-sys-color-on-primary: #381e72;
    --md-sys-color-primary-container: #4f378b;
    --md-sys-color-on-primary-container: #eaddff;
    --md-sys-color-secondary: #ccc2dc;
    --md-sys-color-on-secondary: #332d41;
    --md-sys-color-secondary-container: #4a4458;
    --md-sys-color-on-secondary-container: #e8def8;
    --md-sys-color-tertiary: #efb8c8;
    --md-sys-color-on-tertiary: #492532;
    --md-sys-color-tertiary-container: #633b48;
    --md-sys-color-on-tertiary-container: #ffd8e4;

    /* surfaces */
    --md-sys-color-surface-container-lowest: #0f0d13;
    --md-sys-color-surface-container-low: #1c1b1f;
    --md-sys-color-surface-container: #211f26;
    --md-sys-color-surface-container-high: #2b2930;
    --md-sys-color-surface-container-highest: #36343b;

    /* ytm variables */
    --ytmusic-color-black1: var(--md-sys-color-background) !important;
    --ytmusic-color-black2: var(--md-sys-color-surface) !important;
    --ytmusic-color-black3: var(--md-sys-color-surface-variant) !important;
    --ytmusic-color-black4: var(--md-sys-color-primary-container) !important;
    --ytmusic-color-black-pure: var(--md-sys-color-background) !important;
    --ytmusic-color-white1: var(--md-sys-color-on-background) !important;
    --ytmusic-color-white1-alpha-70: rgba(230, 225, 229, 0.7) !important;
    --ytmusic-color-white1-alpha-30: rgba(230, 225, 229, 0.3) !important;
    --ytmusic-color-white1-alpha-10: rgba(230, 225, 229, 0.1) !important;
    --ytmusic-text-primary: var(--md-sys-color-on-background) !important;
    --ytmusic-text-secondary: var(--md-sys-color-on-surface-variant) !important;
    --yt-spec-base-background: var(--md-sys-color-background) !important;
    --yt-spec-raised-background: var(--md-sys-color-surface-container) !important;
    --yt-spec-menu-background: var(--md-sys-color-surface-container-high) !important;
    --ytmusic-nav-bar: var(--md-sys-color-surface-container) !important;
    --ytmusic-player-bar-background: transparent !important;
    --yt-spec-brand-button-background: var(--md-sys-color-primary) !important;
    --yt-spec-brand-link-text: var(--md-sys-color-primary) !important;
    --yt-spec-call-to-action: var(--md-sys-color-primary) !important;
    --yt-spec-brand-icon-active: var(--md-sys-color-primary) !important;
    --yt-spec-icon-active-other: var(--md-sys-color-primary) !important;
    --yt-spec-text-primary: var(--md-sys-color-on-background) !important;
    --yt-spec-text-secondary: var(--md-sys-color-on-surface-variant) !important;
    --ytmusic-setting-item-toggle-active: var(--md-sys-color-primary) !important;
    --ytmusic-search-background: var(--md-sys-color-surface-container-highest) !important;
    --yt-spec-badge-chip-background: var(--md-sys-color-surface-container-high) !important;
    --yt-spec-badge-chip-background-checked: var(--md-sys-color-secondary-container) !important;

    /* paper settings */
    --paper-slider-active-color: var(--md-sys-color-primary) !important;
    --paper-slider-secondary-color: var(--md-sys-color-surface-variant) !important;
    --paper-slider-knob-color: var(--md-sys-color-primary) !important;
    --paper-slider-knob-start-color: var(--md-sys-color-primary) !important;
    --paper-slider-knob-start-border-color: var(--md-sys-color-primary) !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--md-sys-color-surface-variant) transparent !important;
  }

  html:not(.style-scope),
  body {
    scrollbar-gutter: stable !important;
  }

  html:not(.style-scope),
  body,
  ytmusic-app,
  ytmusic-app-layout,
  ytmusic-player-page {
    background: var(--md-sys-color-background) !important;
    background-color: var(--md-sys-color-background) !important;
  }

  /* sidebar */
  ytmusic-app[is-bauhaus-sidenav-enabled] #guide-wrapper.ytmusic-app,
  ytmusic-guide-renderer,
  #guide-wrapper {
    background: var(--md-sys-color-surface-container-low) !important;
    background-color: var(--md-sys-color-surface-container-low) !important;
  }

  /* player page */
  /* ambient background */
  .background-gradient.ytmusic-player-page {
    background-color: transparent !important;
    filter: blur(80px) saturate(2) !important;
    opacity: 0.4 !important;
    transform: scale(1.2) !important;
    pointer-events: none !important;
  }

  /* sidebar pages */
  ytmusic-player-page[is-mweb-modernization-enabled][player-page-ui-state=TABS_VIEW] #side-panel.ytmusic-player-page {
    transform: translate(0, 0) !important;
    background: var(--md-sys-color-background) !important;
  }
  ytmusic-player-page[is-mweb-modernization-enabled] .side-panel.ytmusic-player-page {
    --ytmusic-player-page-background: var(--md-sys-color-background) !important;
  }

  /* media controls background */
  div.song-media-controls.style-scope.ytmusic-player {
    background: none !important;
  }
  ytmusic-player[player-ui-state_=MINIPLAYER] .song-media-controls.ytmusic-player {
    background: var(--md-sys-color-surface-container-low) !important;
  }

  /* main player appearance */
  ytmusic-player-page {
    bottom: 0 !important;
    padding-bottom: 100px !important;
    transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1), background-color 0.5s ease-in-out, opacity 0.5s ease-in-out !important;
  }
  ytmusic-player-page #player {
    transform: translateY(-60px) scale(0.9) !important;
    transform-origin: center center !important;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  /* video area */
  ytmusic-player-page #song-video,
  ytmusic-player-page #song-video .player-wrapper,
  ytmusic-player-page #song-video .html5-video-player {
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  /* main player bar */
  #player-bar-background {
    background: transparent !important;
  }
  ytmusic-player-bar {
    background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 60%, transparent) !important;
    backdrop-filter: blur(40px) saturate(2) !important;
    -webkit-backdrop-filter: blur(40px) saturate(2) !important;
    border-radius: 28px !important;
    margin: 0 16px 20px 16px !important;
    width: calc(100% - 32px) !important;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.4) !important;
    bottom: 0 !important;
    padding: 8px 0 !important;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), background-color 0.3s ease !important;
    z-index: 100 !important;
  }

  /* album thumbnail */
  .thumbnail-image-wrapper.ytmusic-player-bar img {
    border-radius: 50% !important;
    object-fit: cover !important;
  }
  .thumbnail-image-wrapper.ytmusic-player-bar img[src*="i.ytimg.com"] {
    border-radius: 16px !important;
  }

  /* progress slider */
  #progress-bar.ytmusic-player-bar {
    margin: 0 24px !important;
    width: calc(100% - 48px) !important;
    --paper-slider-active-color: var(--md-sys-color-primary) !important;
    --paper-slider-knob-color: var(--md-sys-color-primary) !important;
    --paper-slider-knob-start-color: var(--md-sys-color-primary) !important;
    --paper-slider-knob-start-border-color: var(--md-sys-color-primary) !important;
  }

  /* nav bar */
  ytmusic-nav-bar {
    background-color: var(--md-sys-color-surface-container) !important;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
    box-shadow: none !important;
  }
  
  .left-content.ytmusic-nav-bar {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  ytmusic-logo.ytmusic-nav-bar {
    width: 160px !important;
    min-width: 160px !important;
    height: 32px !important;
    display: block !important;
    padding-left: 16px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  ytmusic-logo.ytmusic-nav-bar a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: url("https://raw.githubusercontent.com/MoonMonet/YTMTheme/main/.github/_assets/full-logo.svg") no-repeat center !important;
    background-size: contain !important;
  }
  ytmusic-logo.ytmusic-nav-bar a img,
  ytmusic-logo.ytmusic-nav-bar a picture,
  ytmusic-logo.ytmusic-nav-bar a svg {
    display: none !important;
  }

  /* search */
  ytmusic-nav-bar > div.center-content, 
  .center-content.ytmusic-nav-bar {
    display: flex !important;
    justify-content: center !important;
  }
  ytmusic-search-box {
    margin: 0 auto !important;
    background: transparent !important;
  }
  ytmusic-search-box div.search-box {
    border-radius: 28px !important;
    background-color: var(--md-sys-color-surface-container-high) !important;
    border: 1px solid transparent !important;
    transition: background-color 0.2s, border-color 0.2s !important;
  }
  ytmusic-search-box[has-query] div.search-box, 
  ytmusic-search-box[opened] div.search-box {
    background-color: var(--md-sys-color-surface-container-highest) !important;
    border: 1px solid var(--md-sys-color-primary) !important;
  }
  ytmusic-search-box input.ytmusic-search-box {
    color: var(--md-sys-color-on-surface) !important;
  }

  /* search dropdown */
  ytmusic-search-box #suggestion-list {
    background-color: var(--md-sys-color-surface-container-high) !important;
    border-radius: 24px !important;
    box-shadow: 0px 12px 28px rgba(0, 0, 0, 0.4) !important;
    padding: 8px !important;
    margin-top: 12px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--md-sys-color-surface-variant) !important;
  }
  ytmusic-search-suggestion {
    border-radius: 20px !important;
    margin: 0 !important;
    transition: background-color 0.2s ease !important;
    color: var(--md-sys-color-on-surface) !important;
    background: transparent !important;
  }
  ytmusic-search-suggestion:hover,
  ytmusic-search-suggestion[selected],
  ytmusic-search-suggestion:focus-within {
    background-color: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
  }
  ytmusic-search-suggestion .icon.ytmusic-search-suggestion {
    fill: var(--md-sys-color-primary) !important;
  }
  ytmusic-search-box[is-bauhaus-sidenav-enabled][opened], 
  ytmusic-search-box[is-bauhaus-sidenav-enabled][has-query] {
    --ytmusic-search-background: var(--md-sys-color-surface-container-high) !important;
  }

  /* btns */
  ytmusic-play-button-renderer {
    --ytmusic-play-button-icon-color: var(--md-sys-color-on-primary-container) !important;
    --ytmusic-play-button-background-color: var(--md-sys-color-primary-container) !important;
  }
  .content-wrapper.ytmusic-play-button-renderer {
    background: var(--md-sys-color-primary-container) !important;
    border-radius: 50% !important;
  }
  ytmusic-play-button-renderer:hover .content-wrapper.ytmusic-play-button-renderer {
    background: var(--md-sys-color-primary) !important;
    --ytmusic-play-button-icon-color: var(--md-sys-color-on-primary) !important;
  }

  yt-button-shape[is-paper-button],
  .yt-spec-button-shape-next--filled {
    border-radius: 24px !important;
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
  }
  .yt-spec-button-shape-next--outline {
    border-color: var(--md-sys-color-surface-variant) !important;
    color: var(--md-sys-color-primary) !important;
    border-radius: 24px !important;
  }

  /* icons */
  yt-icon, tp-yt-iron-icon {
    fill: var(--md-sys-color-on-surface) !important;
  }
  .left-controls.ytmusic-player-bar paper-icon-button.ytmusic-player-bar,
  .right-controls-buttons.ytmusic-player-bar paper-icon-button.ytmusic-player-bar {
    --iron-icon-fill-color: var(--md-sys-color-on-surface) !important;
    --paper-icon-button_-_color: var(--md-sys-color-on-surface) !important;
  }
  .left-controls.ytmusic-player-bar paper-icon-button.ytmusic-player-bar:hover,
  .right-controls-buttons.ytmusic-player-bar paper-icon-button.ytmusic-player-bar:hover {
    --iron-icon-fill-color: var(--md-sys-color-primary) !important;
    --paper-icon-button_-_color: var(--md-sys-color-primary) !important;
    background-color: var(--md-sys-color-surface-variant) !important;
    border-radius: 50% !important;
  }

  paper-dialog, tp-yt-paper-dialog, ytmusic-dialog {
    background-color: var(--md-sys-color-surface-container-high) !important;
    border-radius: 28px !important;
    color: var(--md-sys-color-on-surface) !important;
  }
  ytmusic-menu-popup-renderer, tp-yt-paper-listbox {
    background-color: var(--md-sys-color-surface-container-high) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
    border: 1px solid var(--md-sys-color-surface-variant) !important;
  }

  ytmusic-pivot-bar-item-renderer:hover,
  ytmusic-pivot-bar-item-renderer[selected] {
    color: var(--md-sys-color-on-secondary-container) !important;
    background-color: var(--md-sys-color-secondary-container) !important;
    border-radius: 24px !important;
  }
  ytmusic-pivot-bar-item-renderer {
    color: var(--md-sys-color-on-surface-variant) !important;
    margin: 0 4px !important;
    padding: 8px 16px !important;
    transition: all 0.2s ease !important;
  }

  /* song/video toggle */
  ytmusic-av-toggle .av-toggle.ytmusic-av-toggle {
    background-color: var(--md-sys-color-surface-container-high) !important;
    border-radius: 999px !important;
    padding: 4px !important;
    border: 1px solid var(--md-sys-color-surface-variant) !important;
    position: relative !important;
    display: flex !important;
    gap: 8px !important;
    isolation: isolate !important;
  }

  /* sliding pill */
  ytmusic-av-toggle .av-toggle.ytmusic-av-toggle::before {
    content: "" !important;
    position: absolute !important;
    top: 4px !important;
    bottom: 4px !important;
    left: 4px !important;
    width: calc(50% - 8px) !important;
    background-color: var(--md-sys-color-secondary-container) !important;
    border-radius: 999px !important;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1) !important;
    z-index: 1 !important;
  }

  /* video selection shift */
  ytmusic-av-toggle[is-video-playback-mode-selected="true"] .av-toggle.ytmusic-av-toggle::before {
    transform: translateX(calc(100% + 8px)) !important;
  }

  ytmusic-av-toggle button.ytmusic-av-toggle {
    flex: 1 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    color: var(--md-sys-color-on-surface-variant) !important;
    font-weight: 500 !important;
    padding: 6px 20px !important;
    transition: color 0.3s cubic-bezier(0.2, 0, 0, 1), background-color 0.3s ease !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
  }

  /* active state text */
  ytmusic-av-toggle button[aria-pressed="true"].ytmusic-av-toggle {
    background-color: transparent !important;
    color: var(--md-sys-color-on-secondary-container) !important;
  }

  /* hover state text */
  ytmusic-av-toggle button.ytmusic-av-toggle:hover:not([aria-pressed="true"]) {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--md-sys-color-on-surface) !important;
  }

  /* tabs */
  .selection-bar.tp-yt-paper-tabs,
  #selectionBar.tp-yt-paper-tabs {
    border-bottom: none !important;
    background-color: var(--md-sys-color-primary) !important;
    height: 3.5px !important;
    border-radius: 99px 99px 0 0 !important;
  }
  tp-yt-paper-tabs, paper-tabs {
    --paper-tabs-selection-bar-color: var(--md-sys-color-primary) !important;
  }

  /* chips */
  a.ytmusic-chip-cloud-chip-renderer,
  .chip-container.ytmusic-chip-cloud-chip-renderer {
    border-radius: 16px !important;
    background-color: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface) !important;
    border: 1px solid var(--md-sys-color-surface-variant) !important;
  }
  ytmusic-chip-cloud-chip-renderer[is-selected]:not(.iron-selected) a.ytmusic-chip-cloud-chip-renderer,
  a.ytmusic-chip-cloud-chip-renderer[selected] {
    background-color: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
    border-color: var(--md-sys-color-secondary-container) !important;
  }

  /* item rounding */
  img.yt-img-shadow,
  #song-image,
  ytmusic-two-row-item-renderer,
  ytmusic-responsive-list-item-renderer,
  ytmusic-thumbnail-renderer,
  ytmusic-item-thumbnail-overlay-renderer,
  ytmusic-background-overlay-renderer,
  #background.ytmusic-item-thumbnail-overlay-renderer {
    border-radius: 16px !important;
  }
  ytmusic-thumbnail-renderer {
    overflow: hidden !important; 
  }
  #song-image {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  }

  /* browse & home page fixes */
  div.background-gradient.style-scope.ytmusic-browse-response {
    background-image: none !important;
    background-color: var(--md-sys-color-background) !important;
  }

  /* typography */
  yt-formatted-string, span, .title, .subtitle, object {
    font-family: 'Google Sans', 'Product Sans', 'Roboto', 'Inter', sans-serif !important;
  }
  .title.ytmusic-responsive-list-item-renderer {
    color: var(--md-sys-color-on-surface) !important;
  }
  .subtitle.ytmusic-responsive-list-item-renderer {
    color: var(--md-sys-color-on-surface-variant) !important;
  }

  /* scrollbar */
  ::-webkit-scrollbar {
    width: 12px;
  }
  ::-webkit-scrollbar-track {
    background: transparent; 
  }
  ::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-surface-variant); 
    border-radius: 10px;
    border: 3px solid var(--md-sys-color-background);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-primary); 
  }
}