/* ==UserStyle==
@name YouTube Catppuccin
@namespace github.com/Sebagabones/userstyles/styles/youtube
@homepageURL https://github.com/Sebagabones/userstyles/tree/main/styles/youtube
@version 2026.04.14
@updateURL https://github.com/Sebagabones/userstyles/raw/main/styles/youtube/catppuccin.user.less
@supportURL https://github.com/Sebagabones/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ayoutube
@description Soothing pastel theme for YouTube
@author Catppuccin
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]

@var checkbox logo "Enable YouTube logo" 1
@var checkbox oled "Enable black bars" 0
@var checkbox sponsorBlock "Enable SponsorBlock segments" 1
==/UserStyle== */

@import "https://raw.githubusercontent.com/Sebagabones/userstyles/refs/heads/main/lib/lib.less";

@-moz-document domain("youtube.com") {
  :root[dark] {
    #catppuccin(@darkFlavor);
  }
  :root:not([dark]) {
    #catppuccin(@lightFlavor);
  }

  #catppuccin(@flavor) {
    #lib.palette();
    #lib.defaults();

    @white: if(@flavor = latte, @base, @text);
    @black: if(@flavor = latte, @text, @base);

    color: @text;
    background: @base;

    #--variables() {
      &,
      [dark],
      [system-icons],
      [darker-dark-theme],
      &[dark],
      &[system-icons],
      &[darker-dark-theme] {
        --efyt-control-bar-background-color: @mantle;
        --dimmer-text: @text;

        /* Newest Variables */
        --yt-sys-color-baseline--base-background: @base;
        --yt-sys-color-baseline--menu-background: @mantle;
        --yt-sys-color-baseline--raised-background: @surface0;
        --yt-sys-color-baseline--additive-background: @surface0;
        --yt-sys-color-baseline--wordmark-text: @text;
        --yt-sys-color-baseline--text-primary: @text;
        --yt-sys-color-baseline--text-secondary: @subtext0;
        --yt-sys-color-baseline--call-to-action: @accent;
        --yt-sys-color-baseline--suggested-action: mix(@accent, @base, 30%);
        --yt-sys-color-baseline--outline: @surface0;
        --yt-sys-color-baseline--outline-opaque: @surface1;
        --yt-sys-color-baseline--outline-inverse-opaque: @overlay0;
        --yt-sys-color-baseline--overlay-background-medium-light: fade(
          @black,
          60%
        );
        --yt-sys-color-baseline--overlay-background-heavy: fade(@black, 80%);
        --yt-sys-color-baseline--overlay-background-solid: @crust;
        --yt-sys-color-baseline--overlay-text-primary: @text;

        --yt-spec-white-1: @text;
        --yt-spec-white-2: @subtext0;
        --yt-spec-white-3: @subtext1;
        --yt-spec-white-4: darken(@subtext1, 5%);
        --yt-spec-black-1: @overlay1;
        --yt-spec-black-2: @overlay0;
        --yt-spec-black-3: @surface2;
        --yt-spec-black-4: @surface1;
        --yt-spec-black-pure: @surface0;
        --yt-spec-grey-1: @text;
        --yt-spec-grey-2: @subtext0;
        --yt-spec-grey-3: @subtext1;
        --yt-spec-grey-4: @overlay2;
        --yt-spec-grey-5: @overlay1;
        --yt-brand-youtube-red: @accent;
        --yt-brand-medium-red: @accent;
        --yt-brand-light-red: @accent;
        --yt-spec-red-30: @peach;
        --yt-spec-red-70: @red;
        --yt-spec-red-indicator: @accent;
        --yt-spec-pale-blue: @sky;
        --yt-spec-light-blue: @sky;
        --yt-spec-dark-blue: @sapphire;
        --yt-spec-navy-blue: @teal;
        --yt-spec-light-green: @green;
        --yt-spec-dark-green: @green;
        --yt-spec-yellow: @peach;
        --yt-spec-black-pure-alpha-5: @subtext0;
        --yt-spec-black-pure-alpha-10: @overlay2;
        --yt-spec-black-pure-alpha-15: fade(@crust, 85%);
        --yt-spec-black-pure-alpha-30: fade(@crust, 70%);
        --yt-spec-black-pure-alpha-60: fade(@crust, 40%);
        --yt-spec-black-pure-alpha-80: fade(@crust, 20%);
        --yt-spec-black-1-alpha-98: fade(@crust, 2%);
        --yt-spec-black-1-alpha-95: fade(@crust, 5%);
        --yt-spec-white-1-alpha-10: fade(@text, 90%);
        --yt-spec-white-1-alpha-20: fade(@text, 80%);
        --yt-spec-white-1-alpha-25: fade(@text, 75%);
        --yt-spec-white-1-alpha-30: fade(@text, 70%);
        --yt-spec-white-1-alpha-70: fade(@text, 30%);
        --yt-spec-white-1-alpha-95: fade(@text, 5%);
        --yt-spec-white-1-alpha-98: fade(@text, 2%);
        --yt-brand-medium-red-alpha-90: fade(@accent, 10%);
        --yt-brand-medium-red-alpha-30: fade(@accent, 70%);
        --yt-brand-light-red-alpha-30: fade(@accent, 70%);
        --yt-spec-light-blue-alpha-30: fade(@sapphire, 70%);
        --yt-spec-dark-blue-alpha-30: fade(@sapphire, 70%);

        --yt-spec-base-background: @base;
        --yt-spec-raised-background: @surface0;
        --yt-spec-menu-background: @mantle;
        --yt-spec-inverted-background: @text;
        --yt-spec-additive-background: @surface0;
        --yt-spec-outline: @surface0;
        --yt-spec-shadow: fade(@crust, 75%);
        --yt-spec-text-primary: @text;
        --yt-spec-text-secondary: @subtext0;
        --yt-spec-text-disabled: @subtext1;
        --yt-spec-text-primary-inverse: @crust;
        --yt-spec-call-to-action: @accent;
        --yt-spec-call-to-action-inverse: @accent;
        --yt-spec-suggested-action: fade(@accent, 20%);
        --yt-spec-suggested-action-inverse: @text;
        --yt-spec-icon-active-other: @text;
        --yt-spec-button-chip-background-hover: @surface1;
        --yt-spec-touch-response: @surface0;

        --yt-spec-touch-response-inverse: @accent;
        --yt-spec-brand-icon-active: @accent;
        --yt-spec-brand-button-background: @accent;
        --yt-spec-brand-link-text: @sapphire;
        --yt-spec-wordmark-text: @text;
        --yt-spec-error-indicator: @red;
        --yt-spec-themed-blue: @accent;
        --yt-spec-themed-green: @green;
        --yt-spec-ad-indicator: @teal;
        --yt-spec-themed-overlay-background: fade(@crust, 80%);
        --yt-spec-commerce-badge-background: @green;
        --yt-spec-static-brand-red: @accent;
        --yt-spec-static-brand-white: @text;
        --yt-spec-static-brand-black: @base;
        --yt-spec-static-clear-color: fade(@crust, 100%);
        --yt-spec-static-clear-black: @base;
        --yt-spec-static-ad-yellow: @peach;
        --yt-spec-static-grey: @subtext0;
        --yt-spec-static-overlay-background-solid: @crust;
        --yt-spec-static-overlay-background-heavy: @crust;
        --yt-spec-static-overlay-background-medium: fade(@crust, 50%);
        --yt-spec-static-overlay-background-light: fade(
          @crust,
          90%
        );
        --yt-spec-static-overlay-text-primary: @text;
        --yt-spec-static-overlay-text-secondary: fade(
          @subtext0,
          30%
        );
        --yt-spec-static-overlay-text-disabled: fade(
          @subtext0,
          70%
        );
        --yt-spec-static-overlay-call-to-action: @accent;
        --yt-spec-static-overlay-icon-active-other: @crust;
        --yt-spec-static-overlay-icon-inactive: @surface1;
        --yt-spec-static-overlay-icon-disabled: @surface2;
        --yt-spec-static-overlay-button-primary: @accent;
        --yt-spec-static-overlay-touch-response: @overlay1;
        --yt-spec-static-overlay-touch-response-inverse: @surface1;
        --yt-spec-static-overlay-background-brand: @accent;
        --yt-spec-assistive-feed-themed-gradient-1: @subtext0;
        --yt-spec-assistive-feed-themed-gradient-2: @lavender;
        --yt-spec-assistive-feed-themed-gradient-3: @red;
        --yt-spec-brand-background-solid: @base;
        --yt-spec-brand-background-primary: @base;
        --yt-spec-brand-background-secondary: @mantle;
        --yt-spec-general-background-a: @base;
        --yt-spec-general-background-b: @base;
        --yt-spec-general-background-c: @crust;
        --yt-spec-error-background: @base;
        --yt-spec-10-percent-layer: @surface1;
        --yt-spec-snackbar-background: @mantle;
        --yt-spec-snackbar-background-updated: @mantle;
        --yt-spec-badge-chip-background: if(
          @flavor = latte,
          @crust,
          @surface0
        );
        --yt-spec-verified-badge-background: @overlay0;
        --yt-spec-call-to-action-fadeoutd: fade(@sapphire, 70%);
        --yt-spec-call-to-action-hover: @accent;
        --yt-spec-brand-button-background-hover: @accent;
        --yt-spec-brand-link-text-fadeoutd: fade(
          @accent,
          70%
        );
        --yt-spec-filled-button-focus-outline: @surface0;
        --yt-spec-static-overlay-button-hover: @surface1;
        --yt-spec-mono-filled-hover: @surface1;
        --yt-spec-commerce-filled-hover: @accent;
        --yt-spec-mono-tonal-hover: @surface1;
        --yt-spec-commerce-tonal-hover: @surface2;
        --yt-spec-static-overlay-filled-hover: @overlay1;
        --yt-spec-static-overlay-tonal-hover: @surface1;
        --yt-spec-paper-tab-ink: fade(@text, 70%);
        --yt-spec-filled-button-text: @text;
        --yt-spec-selected-nav-text: @text;
        --iron-icon-fill-color: @text;

        --yt-spec-overlay-text-primary: @text;
        --yt-spec-overlay-background-medium-light: fade(@black, 60%);
        --yt-spec-overlay-background-heavy: fade(@black, 80%);
        --yt-spec-overlay-background-solid: @black;

        /* Search bar */
        --ytd-searchbox-border-color: @surface0;
        --ytd-searchbox-legacy-border-color: @surface0;
        --ytd-searchbox-legacy-border-shadow-color: fade(
          @crust,
          100%
        );
        --ytd-searchbox-legacy-button-color: @mantle;
        --ytd-searchbox-legacy-button-border-color: @surface0;
        --ytd-searchbox-legacy-button-focus-color: @accent;
        --ytd-searchbox-legacy-button-hover-color: @mantle;
        --ytd-searchbox-legacy-button-hover-border-color: @surface0;
        --ytd-searchbox-legacy-button-icon-color: @accent;
        --ytd-searchbox-background: @base;
        --ytd-searchbox-text-color: @text;

        /* System icons */
        --yt-spec-icon-inactive: @text;
        --yt-spec-icon-disabled: @overlay1;
        --yt-spec-brand-icon-inactive: @overlay2;

        /* Live chat */
        --yt-live-chat-background-color: @base;
        --yt-live-chat-primary-text-color: @text;
        --yt-live-chat-action-panel-background-color: @base;
        --yt-live-chat-secondary-background-color: @surface1;
        --yt-live-chat-toast-background-color: @surface2;
        --yt-live-chat-mode-change-background-color: @base;
        --yt-live-chat-secondary-text-color: @subtext0;
        --yt-live-chat-tertiary-text-color: fade(@text, 46%);
        --yt-live-chat-text-input-field-inactive-underline-color: @subtext0;

        --yt-live-chat-text-input-field-placeholder-color: @subtext0;
        --yt-live-chat-enabled-send-button-color: @text;
        --yt-live-chat-disabled-icon-button-color: @subtext1;
        --yt-live-chat-picker-button-hover-color: @accent;
        --yt-live-chat-mention-background-color: @accent;
        --yt-live-chat-mention-text-color: @text;
        --yt-live-chat-deleted-message-color: @subtext0;
        --yt-live-chat-deleted-message-bar-color: @subtext1;
        --yt-live-chat-reconnect-message-color: @text;
        --yt-live-chat-disabled-button-background-color: @overlay0;
        --yt-live-chat-sub-panel-background-color: @base;
        --yt-live-chat-sub-panel-background-color-transparent: @mantle;
        --yt-live-chat-moderator-color: @lavender;
        --yt-live-chat-owner-color: @peach;
        --yt-live-chat-message-highlight-background-color: @base;
        --yt-live-chat-sponsor-color: @green;
        --yt-live-chat-overlay-color: fade(@mantle, 50%);
        --yt-live-chat-dialog-background-color: @base;
        --yt-emoji-picker-variant-selector-bg-color: @base;
        --yt-live-chat-moderation-mode-hover-background-color: fade(
          @mantle,
          70%
        );
        --yt-grey: @subtext0;
        --yt-live-chat-text-input-field-suggestion-background-color: @subtext0;

        --yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1;

        --yt-emoji-picker-search-background-color: @surface0;
        --yt-emoji-picker-search-color: @text;
        --yt-emoji-picker-search-placeholder-color: @accent;
        --yt-live-chat-slider-active-color: @accent;
        --yt-live-chat-slider-container-color: @surface0;
        --yt-live-chat-slider-markers-color: @text;
        --yt-live-chat-banner-gradient-scrim: linear-gradient(
          @mantle,
          transparent
        );
        --yt-live-chat-action-panel-gradient-scrim: linear-gradient(
          to top,
          @mantle,
          transparent
        );
        --yt-live-chat-automod-button-background-color-hover: fade(
          @crust,
          50%
        );
        --yt-live-chat-automod-button-explanation-color: fade(
          @accent,
          30%
        );
        --yt-live-chat-shimmer-background-color: fade(@crust, 60%);
        --yt-live-chat-shimmer-linear-gradient: linear-gradient(
          0deg,
          fade(@text, 90%) 40%,
          fade(@base, 70%) 50%,
          fade(@text, 90%) 60%
        );
        --yt-live-chat-vem-background-color: @mantle;
        --yt-live-chat-product-picker-icon-color: fade(@text, 50%);
        --yt-live-chat-product-picker-hover-color: @overlay0;
        --yt-live-chat-product-picker-disabled-icon-color: fade(
          @text,
          70%
        );
        --yt-live-chat-action-panel-background-color-transparent: (null);

        --paper-tooltip-background: @surface2;
        --paper-tooltip-text-color: @text;
        .ytTooltipContainerDefaultTooltipContent {
          background: var(--paper-tooltip-background);
          color: var(--paper-tooltip-text-color);
        }

        /* Links */
        --yt-endpoint-color: @text;
        --yt-endpoint-visited-color: @text;
        --yt-endpoint-hover-color: @accent;

        --sb-dark-red-outline: @accent;
        --sb-main-bg-color: @base;
        --sb-main-fg-color: @text;
        --sb-grey-bg-color: @base;
        --sb-grey-fg-color: @subtext0;
        --sb-red-bg-color: @accent;

        & when (@sponsorBlock = 1) {
          --sb-category-sponsor: @green;
          --sb-category-selfpromo: @yellow;
          --sb-category-exclusive_access: @teal;
          --sb-category-interaction: @mauve;
          --sb-category-poi_highlight: @pink;
          --sb-category-intro: @sky;
          --sb-category-outro: @blue;
          --sb-category-preview: @sapphire;
          --sb-category-filler: @lavender;
          --sb-category-music_offtopic: @peach;
        }
      }

      &:not(.style-scope) {
        --primary-text-color: @text;
        --primary-background-color: @base;
        --secondary-text-color: @subtext0;
        --disabled-text-color: @subtext1;
        --divider-color: @overlay0;
        --error-color: @red;
        --primary-color: @accent;
        --light-primary-color: @accent;
        --dark-primary-color: @blue;
        --accent-color: @accent;
        --light-accent-color: @accent;
        --dark-accent-color: @accent;
        --light-theme-background-color: @base;
        --light-theme-base-color: @text;
        --light-theme-text-color: @text;
        --light-theme-secondary-color: @subtext0;
        --light-theme-disabled-color: @subtext1;
        --light-theme-divider-color: @overlay0;
        --dark-theme-background-color: @base;
        --dark-theme-base-color: @text;
        --dark-theme-text-color: @text;
        --dark-theme-secondary-color: @subtext0;
        --dark-theme-disabled-color: @subtext1;
        --dark-theme-divider-color: @overlay0;
      }
    }

    #--variables() !important;

    /* Misc */

    & when (@logo = 0) {
      ytd-topbar-logo-renderer,
      svg.ytd-consent-bump-v2-lightbox {
        display: none;
      }
    }

    #progress.yt-page-navigation-progress {
      background: @accent;
    }

    /* Selected chapter */
    ytd-macro-markers-list-item-renderer {
      --ytd-macro-markers-list-item-background-color: @surface0;
      --ytd-macro-markers-list-item-title-color: @text;
      --ytd-macro-markers-list-item-secondary-color: @subtext1;
      --ytd-macro-markers-list-item-timestamp-background-color: @surface1;
    }

    ytd-playlist-panel-video-renderer {
      --yt-lightsource-section2-color: @surface1;
      --yt-lightsource-section4-color: @surface2;
      --yt-lightsource-primary-title-color: @text;
      --yt-lightsource-secondary-title-color: @text;
      --yt-active-playlist-panel-background-color: @surface0;
    }

    ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette]
      .header.ytd-playlist-panel-renderer {
      --iron-icon-fill-color: @text;
      background-color: @base;
    }

    #container.ytd-masthead {
      --iron-icon-fill-color: @text;
    }

    #background.ytd-masthead,
    #frosted-glass {
      --yt-frosted-glass-desktop: @base;
      --yt-spec-frosted-glass-desktop: @base;
    }

    ytd-feed-filter-chip-bar-renderer[expand-instead-of-scroll]
      #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
      --iron-icon-fill-color: @text;
      background-color: @base;
    }

    .ytp-progress-list when not(@flavor = latte) {
      background: fade(@surface0, 80%);
    }
    .ytp-load-progress when not(@flavor = latte) {
      background: fade(@overlay0, 100%);
    }

    ytd-expandable-metadata-renderer {
      --yt-lightsource-section1-color: @base;
      --yt-lightsource-section2-color: @surface0;
      --yt-lightsource-section3-color: @surface1;
      --yt-lightsource-section4-color: @surface2;
      --yt-lightsource-primary-title-color: @text;
      --yt-lightsource-secondary-title-color: @subtext0;
    }

    yt-live-chat-renderer {
      --yt-button-default-text-color: @text;
      --yt-button-default-background-color: @base;
      --yt-button-dark-text-color: @base;
      --yt-button-dark-background-color: @accent;
      --yt-button-payment-background-color: @accent;
    }

    yt-icon-button.yt-live-chat-item-list-renderer {
      background-color: @accent;
      color: @base;

      &:hover {
        background-color: darken(@accent, 5%);
      }
    }

    /* Skeleton */
    #guide-skeleton,
    #home-container-skeleton,
    #home-chips {
      background-color: @base;
      z-index: -1;
    }

    ytd-app[is-shorts-page] {
      background: var(
        --yt-spec-base-background
      ); // fix unset background on shorts page
    }

    #guide-skeleton .guide-ghost-icon,
    #guide-skeleton .guide-ghost-text,
    .masthead-skeleton-icon,
    #home-page-skeleton .skeleton-bg-color,
    .watch-skeleton .skeleton-bg-color {
      background-color: @surface1;
    }

    /* Ambient mode */
    #cinematics,
    #cinematic-container {
      display: none;
    }

    .ytp-settings-button.ytp-hd-quality-badge::after,
    .ytp-settings-button.ytp-hdr-quality-badge::after,
    .ytp-settings-button.ytp-4k-quality-badge::after,
    .ytp-settings-button.ytp-5k-quality-badge::after,
    .ytp-settings-button.ytp-8k-quality-badge::after,
    .ytp-settings-button.ytp-3d-badge-grey::after,
    .ytp-settings-button.ytp-3d-badge::after {
      background-color: @accent;
    }

    /* Icons */

    [fill="red"],
    [fill="#F00"],
    [fill="#FF0000"],
    [fill="#f03"],
    [fill="#FF0033"] {
      fill: @accent;
    }

    [fill="white"] {
      fill: if(@flavor = latte, @base, @text);
    }

    yt-icon.ytd-logo [fill="white"] {
      fill: @crust;
    }

    .yt-spec-icon-shape {
      [fill="#FAFAFA"],
      [fill="#000"],
      [fill="#fff"],
      [fill="#FFF"],
      [fill="#FFFFFF"] {
        fill: @crust;
      }
    }

    /* Notifications Bell and Indicator */
    .ytSpecIconBadgeShapeStyleOverlay .ytSpecIconBadgeShapeIcon,
    .ytSpecIconBadgeShapeBadge {
      color: @text;
    }
    .ytSpecIconBadgeShapeTypeNotification .ytSpecIconBadgeShapeBadge {
      background-color: @accent;
      color: @base;
    }

    /* Buttons */

    .yt-spec-button-shape-next--mono {
      &.yt-spec-button-shape-next--tonal {
        color: @text;
        background-color: @surface0;

        [fill="rgb(3,3,3)"],
        [fill="rgb(0,0,0)"],
        [fill="rgb(255,255,255)"] {
          fill: @text;
        }

        [stroke="rgb(0,0,0)"],
        [stroke="rgb(255,255,255)"] {
          stroke: @text;
        }

        /* Accent for filled-in thumbs up (like button) */
        [animated-icon-type="LIKE"] {
          g path[fill] {
            fill: @accent;

            + [stroke] {
              stroke: @accent;
            }
          }
        }

        &:hover {
          background-color: @surface1;
        }
      }

      &.yt-spec-button-shape-next--outline {
        color: @text;
        border-color: @surface2;

        &:hover {
          background-color: @surface2;
        }
      }

      &.yt-spec-button-shape-next--text {
        color: @text;

        /* Accent for filled-in thumbs up (like button) */
        path[d="M3,11h3v10H3V11z M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11v10h10.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z"] {
          fill: @accent;
        }

        &:hover {
          background-color: @surface1;
        }
      }

      &.yt-spec-button-shape-next--filled {
        color: @base;
        background-color: @accent;

        &:hover {
          background-color: darken(@accent, 5%);
        }
      }
    }

    .yt-spec-button-shape-next--disabled {
      color: @overlay1;
    }

    .yt-spec-button-shape-next--overlay {
      &.yt-spec-button-shape-next--tonal {
        color: @text;
        background-color: @surface0;
        &:hover {
          background-color: @surface1;
        }
      }
      &.yt-spec-button-shape-next--text {
        color: @text;
        &:hover {
          background-color: @surface0;
        }
      }

      &.yt-spec-button-shape-next--filled {
        color: @base;
        background-color: @accent;
      }

      &.yt-spec-button-shape-next--outline {
        color: @text;
        border-color: @surface1;
        &:hover {
          background: @surface0;
        }
      }
    }

    .yt-spec-button-shape-next--call-to-action {
      &.yt-spec-button-shape-next--outline {
        color: @accent;
        border-color: @surface2;

        &:hover {
          background-color: fade(@accent, 30%);
          color: @accent;
        }
      }

      &.yt-spec-button-shape-next--text {
        color: @accent;

        &:hover {
          background-color: fade(@accent, 30%);
        }
      }

      &.yt-spec-button-shape-next--filled {
        color: @base;
        background-color: @accent;

        &:hover {
          background-color: lighten(@accent, 5%);
        }
      }
    }

    .yt-spec-button-shape-next--disabled.yt-spec-button-shape-next--filled {
      color: @subtext0;
      background-color: fade(@surface1, 70%);
    }

    /* Search box */

    .ytSearchboxComponentInputBox,
    .ytSearchboxComponentInputBoxDark {
      background: var(--ytd-searchbox-background);
      color: var(--ytd-searchbox-text-color);
      border-color: var(--ytd-searchbox-border-color);
      box-shadow: none;
    }

    .ytSearchboxComponentInputBoxHasFocus,
    .ytSearchboxComponentInputBoxHasFocusDark {
      border-color: @accent;
    }

    .ytSuggestionComponentPersonalizedSuggestion {
      color: @text;
    }
    .ytSuggestionComponentHighlighted {
      background: @surface1;
    }
    .ytSuggestionComponentLargerRemovedText {
      color: @overlay1;
    }

    .ytSearchboxComponentSuggestionsContainer,
    .ytSearchboxComponentSuggestionsContainerDark {
      background: var(--yt-spec-raised-background);
      border-color: var(--yt-spec-raised-background);
    }

    .ytSuggestionComponentSuggestion,
    .ytSuggestionComponentSuggestionDark {
      color: var(--ytd-searchbox-text-color);
    }

    .ytSearchboxComponentSearchButton,
    .ytSearchboxComponentSearchButtonDark {
      color: var(--ytd-searchbox-text-color);
      background: var(--yt-spec-raised-background);
      border-color: var(--ytd-searchbox-border-color);
    }

    .ytSearchboxComponentClearButtonIcon,
    .ytSearchboxComponentClearButtonIconDark {
      color: var(--ytd-searchbox-text-color);
    }

    /* Video description */

    // Video description background (collapsed on hover)
    ytd-watch-metadata {
      --yt-saturated-raised-background: @surface1 !important;
      --yt-saturated-text-primary: @text !important;
      --yt-saturated-text-secondary: @subtext1 !important;
    }
    // Video description text (expanded)
    ytd-text-inline-expander
      .ytAttributedStringLinkInheritColor:not(
        .ytAttributedStringLink
      ) {
      color: @text !important;
    }
    // Video description YouTube links
    .ytAttributedStringHighlightTextDecorator {
      background-color: @surface2 !important;
    }

    /* Links */
    .ytAttributedStringLinkCallToActionColor {
      color: @accent;
    }

    /* Course Playlist (e.g. https://www.youtube.com/playlist?list=PLZHQObOWTQDNPOjrT6KVlfJuKtYTftqH6) */
    .ytwCourseProgressViewModelHostProgressTitle,
    .ytwCourseProgressViewModelHostProgressSubtitle {
      color: @text;
    }
    .ytwCourseProgressViewModelHostProgressBar {
      background-color: fade(@white, 20%);

      .ytwCourseProgressViewModelHostProgressBarFill {
        background-color: @text;
      }
    }

    .ytwHowThisWasMadeSectionViewModelSectionTitle,
    .ytwHowThisWasMadeSectionViewModelBodyHeader {
      color: @text;
    }

    .ytwHowThisWasMadeSectionViewModelBodyText {
      color: @subtext0;
    }

    // "Ask" - AI chat
    .ytVideoDescriptionYouchatSectionViewModelSectionTitle {
      color: @text;
    }
    .ytVideoDescriptionYouchatSectionViewModelSubHeaderText {
      color: @subtext0;
    }
    .ytwYouChatItemViewModelHost {
      color: @text;
    }
    .ytwYouChatChipsDataChip {
      color: @text;
      border-color: @surface2;

      &:hover {
        background-color: @surface1;
      }
    }
    .chatInputViewModelChatDisclaimer {
      color: @subtext0;
    }

    // Timeline/Transcript
    .ytwTimelineChapterViewModelTitle,
    .ytShelfHeaderLayoutTitle {
      color: @text;
    }
    .ytwTranscriptSegmentViewModelHost {
      color: @subtext0;
    }
    .ytwTranscriptSegmentViewModelTimestamp {
      background-color: @surface2;
      color: @subtext1;
    }
    .ytwTranscriptSegmentViewModelTimestampActive {
      background-color: @overlay0;
      color: @text;
    }

    // Video Attributes (Music, Games)
    .videoAttributesSectionViewModelTitle,
    .ytVideoAttributeViewModelTitle {
      color: @text;
    }
    .ytVideoAttributeViewModelSubtitle,
    .ytVideoAttributeViewModelSecondarySubtitle {
      color: @subtext1;
    }

    /* Thumbnails */

    .ytp-sb-unsubscribe {
      background-color: @surface2;
      color: @text;
    }
    .ytp-sb-subscribe {
      background-color: @accent;
      color: @base;
    }

    // Watch progress bar
    .ytThumbnailOverlayProgressBarHostWatchedProgressBar {
      background-color: @surface2;
    }
    .ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment {
      background: @accent;
    }
    // Watch progress bar (legacy component)
    ytd-thumbnail-overlay-resume-playback-renderer {
      background-color: @surface2;

      #progress.ytd-thumbnail-overlay-resume-playback-renderer {
        background: @accent;
      }
    }

    /* Panels, popups, tooltips */

    .ytp-tooltip-bottom-text {
      background: fade(@surface0, 90%);
      color: @text;
      text-shadow: none;
    }

    .ytp-popup {
      background: fade(@surface0, 90%);
      text-shadow: none;
    }

    .ytp-panel-menu,
    .ytp-panel-header,
    .ytp-panel-footer,
    .ytp-menuitem-label,
    .ytp-premium-label,
    .ytp-menuitem-content,
    .ytp-menuitem-label-count,
    .ytp-menu-label-secondary,
    .ytd-menu-title-renderer {
      color: @text;
    }

    .ytp-panel-footer-content-link {
      color: @accent;
    }

    .ytp-panel-back-button {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 32 32" version="1.1"><path d="m19.41 20.09-4.58-4.59 4.58-4.59L18 9.5l-6 6 6 6z" fill="@{text}"/></svg>'
      );
      background-image: url("data:image/svg+xml,@{svg}");
    }

    .ytp-menuitem[aria-checked="false"] .ytp-menuitem-toggle-checkbox {
      &::after {
        background-color: @overlay1;
      }
    }
    .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
      background-color: @surface2;

      &::after {
        background-color: @text;
      }
    }

    .ytp-menuitem {
      &:not([aria-disabled="true"]):hover {
        background-color: @surface1;
      }
    }

    /* Video player */

    // Shorts and video hover preview progress bars
    yt-progress-bar {
      .ytProgressBarLineProgressBarPlayed,
      .ytProgressBarPlayheadProgressBarPlayheadDot {
        background: @accent;
      }

      .ytProgressBarLineProgressBarHovered,
      .ytProgressBarLineProgressBarBackground {
        background: @text; // (background) opacity is already adequately set
      }
    }

    .ytp-cards-button {
      .ytp-cards-button-icon {
        use {
          fill: @black;
        }
        path {
          fill: @white;
        }
      }
    }
    .ytp-cards-teaser {
      .ytp-cards-teaser-box {
        background-color: @surface2;
        border-bottom-color: @surface2;
      }
      .ytp-cards-teaser-text {
        color: @text;
      }
    }

    .html5-video-player {
      color: @white;
      & when (@oled = 0) {
        background-color: @crust;
      }

      .ytp-swatch-background-color,
      .ytp-play-progress {
        background: @accent;
      }

      .ytp-svg-fill,
      [fill="#fff"] {
        fill: @white;
      }

      .ytp-volume-slider-handle {
        &,
        &::before {
          background-color: @white;
        }
        &::after {
          background-color: fade(@white, 20%);
        }
      }

      .ytp-time-current,
      .ytp-time-separator,
      .ytp-time-duration {
        color: @white;
      }

      .ytp-live-badge {
        &[disabled]::before {
          background: @accent;
        }
        &::before {
          background: @overlay0;
        }
      }

      .ytp-button,
      .ytp-subtitles-button {
        &[aria-pressed]::after {
          background-color: @accent;
        }
      }

      /* stats for nerds */
      .ytp-sfn {
        background: fade(@base, 80%);
        color: @text;
      }

      .ytp-autonav-toggle-button {
        background-color: @surface2;

        &::after {
          @svg: escape(
            '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path d="M12.75 4.5h-3c-.6 0-1.17.23-1.6.65-.42.43-.65 1-.65 1.6v22.5c0 .59.23 1.16.65 1.59.43.42 1 .66 1.6.66h3c.59 0 1.16-.24 1.59-.66.42-.43.66-1 .66-1.59V6.75c0-.6-.24-1.17-.66-1.6-.43-.42-1-.65-1.59-.65m13.5 0h-3c-.6 0-1.17.23-1.6.65-.42.43-.65 1-.65 1.6v22.5c0 .59.23 1.16.65 1.59.43.42 1 .66 1.6.66h3c.59 0 1.16-.24 1.59-.66.42-.43.66-1 .66-1.59V6.75c0-.6-.24-1.17-.66-1.6-.43-.42-1-.65-1.59-.65" fill="@{white}"/></svg>'
          );
          background-image: url("data:image/svg+xml,@{svg}");
          background-color: @overlay1;
        }

        &[aria-checked="true"] {
          &::after {
            @svg: escape(
              '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path d="m17 8.6-6.11-3.61c-1.5-.88-3.39.2-3.39 1.94v22.13c0 1.74 1.89 2.82 3.39 1.94L17 27.4zm0 0v18.8L33 18z" fill="@{black}"/></svg>'
            );
            background-image: url("data:image/svg+xml,@{svg}");
            background-color: @white;
          }
        }
      }
    }

    /* Video highlight */
    ytd-rich-item-renderer.ytd-rich-item-renderer-highlight {
      background-color: fade(@accent, 10%);
      box-shadow: fade(@accent, 10%) 0 0 0 10px;
    }

    #shorts-container {
      --yt-spec-static-overlay-text-primary: @white;

      .YtwFactoidRendererLabel {
        color: @subtext0;
      }
      .YtwFactoidRendererValue {
        color: @text;
      }

      ytd-reel-video-renderer:not([is-watch-while-mode]) {
        .ytSpecButtonShapeWithLabelLabel {
          color: @subtext1;
        }
      }
      ytd-reel-video-renderer[is-watch-while-mode]
        .ytSpecButtonShapeWithLabelLabel {
        color: @white;
      }

      .ytdVolumeControlsMuteIcon {
        color: @white;
      }

      /* Buy super thanks button */
      .YtdShortsSuggestedActionStaticHostContainer {
        background-color: fade(@black, 60%);

        .YtdShortsSuggestedActionStaticHostLeadingIcon,
        .YtdShortsSuggestedActionStaticHostPrimaryText {
          color: @text;
        }
      }
    }
    // Video/thumbnail renderer overlayed buttons
    .ytBadgeShapeThumbnailDefaultRedesign, // Timestamp
    // Play Next
    .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--tonal[style="background-color: rgba(0, 0, 0, 0.3);"],
    .ytdVolumeControlsBackgroundScrim, // Shorts Volume Slider
    .ytInlinePlayerControlsTopRightControlsCircleButton // Homepage
    {
      background: fade(@black, 60%) !important;
      color: @white;
    }

    .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--filled {
      background: @accent;
      color: @base;
    }

    /* Video previews */

    // Background (on hover)
    .ytSpecTouchFeedbackShapeHoverEffect {
      background-color: @surface0 !important;
    }
    // Title
    .ytLockupMetadataViewModelTitle {
      color: @text !important;
    }
    // Details
    .ytLockupMetadataViewModelMetadata {
      color: @subtext0 !important;
    }
    // Badges (e.g. "CC", "New")
    .ytBadgeShapeDefault {
      color: @subtext0;
      background: @surface1;

      &.ytBadgeShapeModern {
        background: none;
      }
    }
    // "Fundraiser"
    .ytBadgeShapeCommerce {
      color: @green;
    }
    // "Live"
    .ytBadgeShapeThumbnailLive {
      background: @accent;
      color: @base;
    }

    /* Shorts titles and views on homepage */
    .shortsLockupViewModelHostOutsideMetadataEndpoint {
      color: @text;
    }
    .shortsLockupViewModelHostOutsideMetadataSubhead {
      color: @subtext0;
    }

    /* Buy super thanks bar */
    #progressContainer.tp-yt-paper-progress {
      background-color: @mantle;
    }

    #comment-chip-container.yt-pdg-comment-chip-renderer,
    .slider-knob-inner.tp-yt-paper-slider {
      background: @accent;
    }

    #primaryProgress.tp-yt-paper-progress {
      background: linear-gradient(139deg, @peach, @maroon, @red, @pink);
    }

    #container.ytd-pdg-comment-preview-renderer {
      background-color: @mantle;
    }

    #comment-chip-price.yt-pdg-comment-chip-renderer,
    yt-icon.yt-pdg-comment-chip-renderer {
      color: @crust;
    }

    /* Avatar */
    .ytSpecAvatarShapeLiveRing::after {
      background: @accent !important;
    }
    .ytSpecAvatarShapeLiveBadge {
      background-color: @accent;
    }
    .ytSpecAvatarShapeLiveBadgeText {
      color: @base;
    }

    /* Channel pages */

    // Channel name
    .ytPageHeaderViewModelHost {
      .ytPageHeaderViewModelTitle {
        color: @text;
      }

      // Subscribers and video statistics
      .ytPageHeaderViewModelContentMetadata {
        color: @subtext0;
      }

      // Handle and verified checkmark
      [style$="color: rgb(255, 255, 255);"] {
        color: @text !important;
      }
    }
    // Channel bio
    .ytTruncatedTextHost {
      color: @subtext0;
    }
    // "...More", "and X more links"
    .ytAttributionViewModelSuffix .ytAttributedStringLinkCallToActionColor,
    .ytTruncatedTextAbsoluteButton {
      color: @text;
    }

    // Channel tabs
    .ytTabShapeTab {
      color: @subtext1;
    }
    .ytTabShapeTabSelected {
      color: @text;
    }
    .tabGroupShapeSlider {
      background-color: @text;
    }
    .ytTabShapeHost:hover .ytTabShapeTabBar {
      background-color: @subtext1;
    }

    /* Components */

    /* Menus and context sheets */
    .ytContextualSheetLayoutHost, ytd-menu-popup-renderer {
      background-color: @mantle;
    }
    .ytListItemViewModelTappable:hover {
      background-color: @surface0;
    }
    .ytPanelHeaderViewModelTitle,
    .ytListItemViewModelTitle,
    .ytListItemViewModelAccessory {
      color: @text;
    }
    .ytListItemViewModelSubtitle {
      color: @subtext1;
    }
    /* Dialogs */
    .ytSpecDialogLayoutHost {
      background-color: @mantle;

      .ytDialogHeaderViewModelText {
        color: @text;
      }
    }

    /* Dropdowns */
    .ytDropdownViewModelTitle {
      color: @text;
    }
    .ytDropdownViewModelLabel {
      color: @subtext0;
    }
    .ytDropdownViewModelSupportError {
      color: @red;
    }
    .ytDropdownViewModelDropdownContainerErrorBorder {
      border-color: @red;
    }
    .ytStandardsTextareaShapeTextareaContainerOutline:focus-within {
      border-color: @text;
    }

    /* Toggles/Switches */

    .ytSwitchShapeTrack {
      background-color: @surface2;
    }
    .ytSwitchShapeKnob {
      background-color: @mantle;
    }
    .ytSwitchShapeTrackActive {
      background-color: @accent;
    }

    /* Textareas */
    .ytStandardsTextareaShapeTextarea {
      color: @text;
    }
    .ytStandardsTextareaShapePlaceholder {
      color: @subtext0;
    }
    .ytStandardsTextareaShapeTextarea::placeholder {
      color: transparent !important; // defaults important overrides this
    }

    /* Comments */
    .ytSubThreadConnection,
    .ytSubThreadContinuation {
      border-left-color: @surface1;
    }
    .ytSubThreadConnection {
      border-bottom-color: @surface1;
    }
    .ytSubThreadHovered > .ytSubThreadThreadline .ytSubThreadConnection,
    .ytSubThreadHovered > .ytSubThreadThreadline .ytSubThreadContinuation {
      border-left-color: @overlay0;
    }
    .ytSubThreadHovered > .ytSubThreadThreadline .ytSubThreadConnection {
      border-bottom-color: @overlay0;
    }

    /* Profile Card */
    // (Click a user's profile picture in the comments to view.)
    .ytProfileCardViewModelHost {
      background-color: @mantle;

      // Name and handle
      .ytProfileIdentityInfoViewModelChannelName,
      .ytProfileIdentityInfoViewModelMetadataHandleWithBoldFont {
        color: @text;
      }
      // Verification badge
      .ytProfileIdentityInfoViewModelBadge {
        filter: @text-filter;
      }
      // Statistics
      .ytProfileIdentityInfoViewModelMetadataContent {
        color: @subtext0;
      }

      // Subsection (e.g. "On this channel")
      .ytProfileInfoViewModelSectionTitle {
        color: @text;
      }
      .ytProfileInfoViewModelSectionSubtitle {
        color: @subtext1;
      }
      .ytProfileInfoViewModelSectionHeartIcon {
        filter: @subtext1-filter;
      }

      // Subsection - "Recent comments on this channel"
      .ytCommentInteractionViewModelVideoTitle {
        color: @text;
      }
      .ytCommentInteractionViewModelCommentContent {
        color: @subtext1;
      }
    }

    /* Live chat replay */
    .ytVideoMetadataCarouselViewModelHost,
    .YtVideoMetadataCarouselViewModelHost {
      background-color: @surface0;

      .ytCarouselTitleViewModelTitle,
      .YtCarouselTitleViewModelTitle,
      .yt-core-attributed-string,
      .yt-icon-shape {
        color: @text;
      }
      .ytTextCarouselItemViewModelHost {
        color: @subtext1;
      }
    }

    /* Category tag pills */
    .ytChipShapeInactive {
      background-color: @surface0;
      color: @text;
    }
    .ytChipShapeActive {
      background-color: @accent;
      color: @base;
    }
  }
}

@-moz-document url-prefix("https://studio.youtube.com") {
  :root[dark] {
    #catppuccin(@darkFlavor);
  }
  :root {
    #catppuccin(@lightFlavor);
  }

  #catppuccin(@flavor) {
    #lib.palette();

    [src="https://www.gstatic.com/youtube/img/creator/yt_studio_logo_white.svg"] {
      @svg: escape(
        '<svg viewBox="0 0 97.55 24" xmlns="http://www.w3.org/2000/svg"><path fill="@{accent}" d="M17.1 0S6.4 0 3.8.7a4.15 4.15 0 0 0-3 3C0 6.4 0 12 0 12a45 45 0 0 0 .7 8.2 4.32 4.32 0 0 0 3 3c2.7.8 13.4.8 13.4.8s10.7 0 13.4-.7a4.32 4.32 0 0 0 3-3 45 45 0 0 0 .7-8.2s.1-5.7-.6-8.3a4.32 4.32 0 0 0-3-3C27.9 0 17.1 0 17.1 0m-3.4 6.9 8.9 5.1-8.9 5.1z"/><path fill="@{text}" d="M76.3.9v4.4c0 1.1 0 2 .1 3.3h-.1A3.36 3.36 0 0 0 73.4 7c-2.3 0-3.3 2-3.3 6.6V16c0 4.9.8 6.6 3.2 6.6a3.42 3.42 0 0 0 3.2-2.4h.1l.4 2.1h2.6V.9zm6.688.4c-1.126.032-1.687.55-1.687 2.1 0 1.7.599 2.1 1.799 2.1s1.8-.5 1.8-2.1-.6-2.1-1.8-2.1zM45 1.4c-3.6 0-5 1.7-5 4.9s1.1 4.5 3.7 6.8c1.6 1.4 2.8 2.5 2.8 4.8 0 1.5-.4 2.2-1.6 2.2s-1.7-.8-1.6-3.6h-3.1c-.6 4.2.8 6.1 4.5 6.2 3.5 0 5-1.5 5-5.4 0-3.1-1.3-4.4-3.7-6.6-1.9-1.8-2.8-2.5-2.8-4.6 0-1.4.3-2.2 1.6-2.2s1.6 1.1 1.5 3.9l3.1-.2c.5-4.2-.8-6.2-4.4-6.2m7.6 1.4-.4 4.5h-1.4v2.6H52v8.8c0 2.7.4 3.8 2.6 3.8a7.4 7.4 0 0 0 3.1-.6l-.6-2.2a5.2 5.2 0 0 1-1.3.2c-.5 0-.7-.3-.7-1.7V9.9h2.2V7.3H55V2.8zM91 7c-3.3 0-4.7 1.8-4.7 6.7v2.2c0 4.7 1.1 6.7 4.6 6.7s4.7-2 4.7-6.7v-2.2C95.6 8.9 94.3 7 91 7m-31.8.3v11.4c0 2.7.9 4 2.9 4a3.46 3.46 0 0 0 3.2-2.1h.1l.3 1.8h2.7V7.3H65v12a1.51 1.51 0 0 1-1.4 1c-.7 0-1-.6-1-1.9V7.3zm22.3 0v15.1h3.2V7.3zm9.4 2c1 0 1.3 1 1.3 3.1v4.7c0 2.2-.4 3.1-1.3 3.1s-1.2-.9-1.2-3.1v-4.7c0-2 .2-3.1 1.2-3.1M75 9.4a1.56 1.56 0 0 1 1.3.8v8.5c-.2.9-.9 1.4-1.4 1.3-1 0-1.3-1-1.3-4.4v-1.9c0-3.3.3-4.3 1.4-4.3"/></svg>'
      );
      content: url("data:image/svg+xml,@{svg}");
    }

    &,
    html,
    html[dark],
    html[dark][dark],
    &[dark],
    &[light],
    [light],
    html[light],
    html[light][light] {
      --yt-spec-black-pure-alpha-80: (null);
      --yt-spec-black-pure-alpha-60: (null);
      --yt-spec-black-1-alpha-98: (null);
      --yt-spec-black-1-alpha-95: (null);
      --iron-icon-fill-color: unset;

      --yt-spec-text-primary: @text;
      --ytcp-text-primary: @text;
      --ytcp-text-primary-inverse: @base;
      --ytcp-static-overlay-text-primary-inverse: @base;
      --ytcp-wordmark-text: @text;
      --ytcp-text-secondary: @subtext0;
      --ytcp-text-disabled: @subtext1;
      --ytcp-overlay-text-primary: @overlay2;

      --ytcp-general-background-a: @base;
      --yt-spec-base-background: @base;
      --yt-spec-black-3: @base;

      --yt-spec-brand-background-solid: @mantle;
      --ytcp-brand-background-solid: @mantle;
      --yt-spec-raised-background: @mantle;
      --ytcp-general-background-b: @mantle;
      --ytcp-analytics-reach-background: @mantle;
      --yt-spec-black-2: @mantle;

      --ytcp-general-background-c: @crust;
      --ytcp-menu-background: @surface0;

      --ytcp-container-border-color: @surface0;
      --ytcp-container-hovered-border-color: @surface0;
      --ytcp-line-divider-solid: @surface0;
      --ytcp-container-border-color-inverse: @subtext0;
      --ytcp-line-divider-solid-inverse: @subtext0;

      --ytcp-call-to-action: @accent;
      --ytcp-call-to-action-inverse: @mantle;
      --ytcp-call-to-action-raised-background: @accent;
      --yt-spec-brand-button-background: @accent;
      --ytcp-call-to-action-raised-disabled: @surface2;
      --ytcp-call-to-action-raised-disabled-background: @overlay2;
      --ytcp-call-to-action-raised-background-inverse: @base;
      --ytcp-call-to-action-raised-disabled-inverse: @surface2;
      --ytcp-call-to-action-raised-disabled-background-inverse: @overlay2;

      --yt-spec-brand-background-primary: @surface0;

      --yt-compact-link-icon-color: @overlay2;
      --ytcp-icon-active: @accent;
      --ytcp-icon-inactive: @overlay2;
      --ytcp-icon-disabled: @overlay0;
      --ytcp-icon-active-inverse: @overlay1;
      --ytcp-icon-disabled-inverse: @subtext1;

      --ytcp-error-red: @red;
      --ytcp-badge-red: @red;
      --ytcp-error-red-inverse: @red;
      --ytcp-themed-red-inverse: @red;
      --ytcp-themed-red: @accent;
      --ytcp-themed-blue: @accent;
      --ytcp-badge-blue: fade(@accent, 30%);
      --ytcp-badge-blue-solid: @blue;
      --ytcp-themed-blue-inverse: @blue;
      --ytcp-themed-green: @green;
      --ytmus-genre-primary-melon: @green;
      --ytcp-themed-green-inverse: @green;
      --ytcp-analytics-pine: @green;
      --ytcp-analytics-pine-inverse: @green;
      --ytcp-analytics-parrot: @green;
      --ytcp-themed-yellow: @peach;
      --ytmus-genre-primary-gold: @peach;
      --ytcp-yellow-inverse: @peach;
      --ytcp-badge-yellow: @peach;
      --ytcp-analytics-yellow: @peach;
      --ytcp-analytics-apricot: @peach;
      --ytcp-suggested-action: @teal;
      --ytcp-analytics-overview: @teal;
      --ytcp-analytics-revenue: @teal;
      --ytcp-analytics-default-secondary: @teal;
      --ytcp-analytics-royal-blue: @lavender;
      --ytcp-analytics-reach: @lavender;
      --ytcp-analytics-audience: @lavender;
      --ytcp-analytics-engagement: @pink;
      --ytcp-analytics-revenue-secondary: @pink;
      --ytcp-analytics-bubblegum: @flamingo;
      --ytmus-genre-primary-ruby: @flamingo;
      --ytmus-genre-primary-salmon: @mauve;
      --ytmus-genre-primary-orange: @maroon;
      --ytmus-genre-primary-sky: @sky;
      --ytmus-genre-primary-sky-inverse: @sky;

      --yt-spec-badge-chip-background: @surface1;
      --ytcp-focus-inverse: @accent;
      --ytcp-focus: @accent;
      --ytcp-selected-item: @accent;
      --ytcp-hover-item: @overlay2;
      --ytcp-chip-active-focus: @accent;
      --ytcp-playhead: @overlay2;
      --ytcp-playhead-inverse: @overlay2;
    }

    ytcp-button.destructive.ytls-error-dialog {
      color: @base;
    }

    yt-formatted-string.ytls-error-dialog,
    tp-yt-iron-icon.ytls-error-dialog {
      color: @text;
    }
  }
}

@-moz-document domain("m.youtube.com") {
  html[darker-dark-theme] {
    #catppuccin(@darkFlavor);
  }
  html {
    #catppuccin(@lightFlavor);
  }

  #catppuccin(@flavor) {
    #lib.palette();

    background-color: @base !important;
    color: @text !important;

    /* Ambient mode */
    #cinematics {
      mix-blend-mode: lighten;
    }

    .mobile-topbar-header[data-mode="watch"],
    ytm-mobile-topbar-renderer:not([ambient-topbar]) {
      background: @base;
    }

    .mobile-topbar-header[data-mode="watch"] .mobile-topbar-logo,
    .mobile-topbar-header[data-mode="watch"] .mobile-topbar-title,
    .mobile-topbar-header[data-mode="watch"] .mobile-topbar-header-content {
      color: @text;
    }

    .yt-spec-bottom-sheet-layout__bottom-sheet-renderer-container,
    .modern-styling {
      background: @surface0;
    }

    .yt-spec-bottom-sheet-layout__bottom-sheet-layout-header-wrapper {
      border-bottom-color: @surface0;
    }

    .yt-spec-bottom-sheet-layout__bottom-sheet-content {
      color: @text;
    }

    /* Comment box */
    .engagement-panel-container {
      background: @mantle;
    }

    /* Bottom bar */
    ytm-pivot-bar-renderer {
      background: @mantle;
      color: @text;
      border-top-color: @surface0;
    }

    /* Chips */
    .chip-bar {
      background-color: @base;
    }

    [chip-style*="STYLE_"] {
      .chip-container {
        color: @text;
        background-color: @surface0;
      }

      &.selected .chip-container {
        color: @base;
        background-color: @accent;
      }
    }

    /* Buttons */

    .yt-spec-touch-feedback-shape--touch-response {
      .yt-spec-touch-feedback-shape__fill {
        background-color: @text;
      }

      .yt-spec-touch-feedback-shape__stroke {
        border-color: @surface1;
      }
    }

    .yt-spec-touch-feedback-shape--overlay-touch-response-inverse
      .yt-spec-touch-feedback-shape__fill {
      background-color: @accent;
    }
    .yt-spec-touch-feedback-shape--overlay-touch-response
      .yt-spec-touch-feedback-shape__fill {
      background-color: @text;
    }
  }
}