/* ==UserStyle==
@name YouTube Catppuccin
@namespace github.com/catppuccin/userstyles/styles/youtube
@homepageURL https://github.com/catppuccin/youtube
@version 3.0.8
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.css
@description Soothing pastel theme for YouTube
@author isabelroses
@license MIT
@preprocessor less
@var select lightTheme "Light Theme" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkTheme "Dark Theme" ["latte:Latte", "frappe:Frappe", "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 "Logo" 0
@var checkbox oledOn "Enable black bars" 0
==/UserStyle== */
@-moz-document regexp('https?:\\/\\/(?!gaming\\.)(?!consent\\.)(?!vr\\.)(?!music\\.)(?!tv\\.)(?!artists\\.)(?!studio\\.).*youtube(?!kids\\.).*\\.com\\/(?!premium|howyoutubeworks).*$') {

  /* youtube.com */
  :root[dark] {
    #catppuccin(@darkTheme, @accentColor);
    #oled(@oledOn);
    #logo(@logo);
  }
  :root {
    #catppuccin(@lightTheme, @accentColor);
    #oled(@oledOn);
    #logo(@logo);
  }

  /* for oled monitors */
  #oled(@oled) when (@oled =0) {
    #ytd-player #container {
      background: @base !important;
    }
  }

  #logo(@logo) {
    ytd-topbar-logo-renderer.style-scope a svg > g,
    svg.ytd-consent-bump-v2-lightbox > g:nth-child(1) {
      path[fill="#FF0000"] {
        fill: @accent-Color !important;
      }
      path[fill="white"] {
        fill: @base !important;
      }
    }
    & when (@logo =1) {
      ytd-topbar-logo-renderer,
      svg.ytd-consent-bump-v2-lightbox {
        display: none;
      }
    }
  }

  #catppuccin(@lookup, @accent) {
    @rosewater: @catppuccin[@@lookup][@rosewater];
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-Color: @catppuccin[@@lookup][@@accent];


    /* apply everywhere */
    &,
    [dark],
    html,
    html[system-icons][dark],
    html[system-icons] [dark],
    html[darker-dark-theme][dark],
    [darker-dark-theme] [dark] {
      --yt-spec-white-1: @text !important;
      --yt-spec-white-2: @subtext0 !important;
      --yt-spec-white-3: @subtext1 !important;
      --yt-spec-white-4: darken(@subtext1, 5%) !important;
      --yt-spec-black-1: @overlay1 !important;
      --yt-spec-black-2: @overlay0 !important;
      --yt-spec-black-3: @surface2 !important;
      --yt-spec-black-4: @surface1 !important;
      --yt-spec-black-pure: @surface0 !important;
      --yt-spec-grey-1: @text !important;
      --yt-spec-grey-2: @subtext0 !important;
      --yt-spec-grey-3: @subtext1 !important;
      --yt-spec-grey-4: @overlay2 !important;
      --yt-spec-grey-5: @overlay1 !important;
      --yt-brand-youtube-red: @accent-Color !important;
      --yt-brand-medium-red: @accent-Color !important;
      --yt-brand-light-red: @accent-Color !important;
      --yt-spec-red-30: @peach !important;
      --yt-spec-red-70: @red !important;
      --yt-spec-pale-blue: @sky !important;
      --yt-spec-light-blue: @sky !important;
      --yt-spec-dark-blue: @sapphire !important;
      --yt-spec-navy-blue: @teal !important;
      --yt-spec-light-green: @green !important;
      --yt-spec-dark-green: @green !important;
      --yt-spec-yellow: @peach !important;
      --yt-spec-black-pure-alpha-5: fadeout(@crust, 0.05) !important;
      --yt-spec-black-pure-alpha-10: fadeout(@crust, 0.1) !important;
      --yt-spec-black-pure-alpha-15: fadeout(@crust, 0.15) !important;
      --yt-spec-black-pure-alpha-30: fadeout(@crust, 0.3) !important;
      --yt-spec-black-pure-alpha-60: fadeout(@crust, 0.6) !important;
      --yt-spec-black-pure-alpha-80: fadeout(@crust, 0.8) !important;
      --yt-spec-black-1-alpha-98: fadeout(@crust, 0.98) !important;
      --yt-spec-black-1-alpha-95: fadeout(@crust, 0.95) !important;
      --yt-spec-white-1-alpha-10: fadeout(@text, 0.1) !important;
      --yt-spec-white-1-alpha-20: fadeout(@text, 0.2) !important;
      --yt-spec-white-1-alpha-25: fadeout(@text, 0.25) !important;
      --yt-spec-white-1-alpha-30: fadeout(@text, 0.3) !important;
      --yt-spec-white-1-alpha-70: fadeout(@text, 0.7) !important;
      --yt-spec-white-1-alpha-95: fadeout(@text, 0.95) !important;
      --yt-spec-white-1-alpha-98: fadeout(@text, 0.98) !important;
      --yt-brand-medium-red-alpha-90: fadeout(@accent-Color, 0.9) !important;
      --yt-brand-medium-red-alpha-30: fadeout(@accent-Color, 0.3) !important;
      --yt-brand-light-red-alpha-30: fadeout(@accent-Color, 0.3) !important;
      --yt-spec-light-blue-alpha-30: fadeout(@sapphire, 0.3) !important;
      --yt-spec-dark-blue-alpha-30: fadeout(@sapphire, 0.3) !important;

      --yt-spec-base-background: @base !important;
      --yt-spec-raised-background: @mantle !important;
      --yt-spec-menu-background: @mantle !important;
      --yt-spec-inverted-background: @text !important;
      --yt-spec-additive-background: fadeout(@surface0, 0.1) !important;
      --yt-spec-outline: @surface0 !important;
      --yt-spec-shadow: fadeout(@crust, 0.25) !important;
      --yt-spec-text-primary: @text !important;
      --yt-spec-text-secondary: @subtext0 !important;
      --yt-spec-text-disabled: @subtext1 !important;
      --yt-spec-text-primary-inverse: @crust !important;
      --yt-spec-call-to-action: @accent-Color !important;
      --yt-spec-call-to-action-inverse: @accent-Color !important;
      --yt-spec-suggested-action: @surface1 !important;
      --yt-spec-suggested-action-inverse: @text !important;
      --yt-spec-icon-active-other: @overlay0 !important;
      --yt-spec-icon-inactive: @overlay1 !important;
      --yt-spec-icon-disabled: @overlay2 !important;
      --yt-spec-button-chip-background-hover: @surface1 !important;
      --yt-spec-touch-response: @surface0 !important;

      --yt-spec-touch-response-inverse: @accent-Color !important;
      --yt-spec-brand-icon-active: @accent-Color !important;
      --yt-spec-brand-icon-inactive: @overlay1 !important;
      --yt-spec-brand-button-background: @accent-Color !important;
      --yt-spec-brand-link-text: @sapphire !important;
      --yt-spec-wordmark-text: @text !important;
      --yt-spec-error-indicator: @red !important;
      --yt-spec-themed-blue: @sky !important;
      --yt-spec-themed-green: @green !important;
      --yt-spec-ad-indicator: @teal !important;
      --yt-spec-themed-overlay-background: fadeout(@crust, 0.8) !important;
      --yt-spec-commerce-badge-background: @green !important;
      --yt-spec-static-brand-red: @accent-Color !important;
      --yt-spec-static-brand-white: @text !important;
      --yt-spec-static-brand-black: @base !important;
      --yt-spec-static-clear-color: fadeout(@crust, 0) !important;
      --yt-spec-static-clear-black: fadeout(@crust, 0) !important;
      --yt-spec-static-ad-yellow: @peach !important;
      --yt-spec-static-grey: @subtext0 !important;
      --yt-spec-static-overlay-background-solid: @crust !important;
      --yt-spec-static-overlay-background-heavy: @surface0 !important;
      --yt-spec-static-overlay-background-medium: fadeout(@crust, 0.6) !important;
      --yt-spec-static-overlay-background-medium-light: fadeout(@crust, 0.3) !important;
      --yt-spec-static-overlay-background-light: fadeout(@crust, 0.1) !important;
      --yt-spec-static-overlay-text-primary: @text !important;
      --yt-spec-static-overlay-text-secondary: fadeout(@subtext0, 0.7) !important;
      --yt-spec-static-overlay-text-disabled: fadeout(@subtext0, 0.3) !important;
      --yt-spec-static-overlay-call-to-action: @accent-Color !important;
      --yt-spec-static-overlay-icon-active-other: @text !important;
      --yt-spec-static-overlay-icon-inactive: @surface1 !important;
      --yt-spec-static-overlay-icon-disabled: @surface2 !important;
      --yt-spec-static-overlay-button-primary: @accent-Color !important;
      --yt-spec-static-overlay-button-secondary: @surface0 !important;
      --yt-spec-static-overlay-touch-response: @overlay1 !important;
      --yt-spec-static-overlay-touch-response-inverse: @surface1 !important;
      --yt-spec-static-overlay-background-brand: @accent-Color !important;
      --yt-spec-assistive-feed-themed-gradient-1: @subtext0 !important;
      --yt-spec-assistive-feed-themed-gradient-2: @lavender !important;
      --yt-spec-assistive-feed-themed-gradient-3: @red !important;
      --yt-spec-brand-background-solid: @base !important;
      --yt-spec-brand-background-primary: @surface0 !important;
      --yt-spec-brand-background-secondary: @mantle !important;
      --yt-spec-general-background-a: @base !important;
      --yt-spec-general-background-b: @mantle !important;
      --yt-spec-general-background-c: @crust !important;
      --yt-spec-error-background: @base !important;
      --yt-spec-10-percent-layer: @surface0 !important;
      --yt-spec-snackbar-background: @mantle !important;
      --yt-spec-snackbar-background-updated: @mantle !important;
      --yt-spec-badge-chip-background: @surface0 !important;
      --yt-spec-verified-badge-background: @overlay0 !important;
      --yt-spec-call-to-action-fadeoutd: fadeout(@sapphire, 0.3) !important;
      --yt-spec-call-to-action-hover: @accent-Color !importantr;
      --yt-spec-brand-button-background-hover: @accent-Color !important;
      --yt-spec-brand-link-text-fadeoutd: fadeout(@accent-Color, 0.3) !important;
      --yt-spec-filled-button-focus-outline: @surface0 !important;
      --yt-spec-static-overlay-button-hover: @surface1 !important;
      --yt-spec-mono-filled-hover: @surface1 !important;
      --yt-spec-commerce-filled-hover: @accent-Color !important;
      --yt-spec-mono-tonal-hover: @surface1 !important;
      --yt-spec-commerce-tonal-hover: @surface2 !important;
      --yt-spec-static-overlay-filled-hover: @overlay1 !important;
      --yt-spec-static-overlay-tonal-hover: @surface1 !important;
      --yt-spec-paper-tab-ink: fadeout(@text, 0.3);
      --yt-spec-filled-button-text: @text !important;
      --yt-spec-selected-nav-text: @text !important;
      --iron-icon-fill-color: @text !important;

      /* Search bar */
      --ytd-searchbox-border-color: @surface0 !important;
      --ytd-searchbox-legacy-border-color: @surface0 !important;
      --ytd-searchbox-legacy-border-shadow-color: fadeout(@crust, 0) !important;
      --ytd-searchbox-legacy-button-color: @mantle !important;
      --ytd-searchbox-legacy-button-border-color: @surface0 !important;
      --ytd-searchbox-legacy-button-focus-color: @accent-Color !important;
      --ytd-searchbox-legacy-button-hover-color: @mantle !important;
      --ytd-searchbox-legacy-button-hover-border-color: @surface0 !important;
      --ytd-searchbox-legacy-button-icon-color: @accent-Color !important;
      --ytd-searchbox-background: @base !important;
      --ytd-searchbox-text-color: @text !important;

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

      /* Yt video Page */
      --yt-live-chat-background-color: @base !important;
      --yt-live-chat-action-panel-background-color: @base !important;
      --yt-live-chat-action-panel-background-color-transpart: @base !important;
      --yt-live-chat-secondary-background-color: @surface1;
      --yt-live-chat-banner-gradient-scrim: linear-gradient(@mantle, transparent) !important;
      --yt-live-chat-toast-background-color: @surface2 !important;
      --yt-live-chat-mode-change-background-color: @base !important;
      --yt-live-chat-secondary-text-color: @subtext0 !important;
      --yt-live-chat-tertiary-text-color: fadeout(@text, 0.54) !important;
      --yt-live-chat-text-input-field-inactive-underline-color: @subtext0 !important;
      --yt-live-chat-text-input-field-placeholder-color: @subtext0 !important;
      --yt-live-chat-enabled-send-button-color: @text !important;
      --yt-live-chat-disabled-icon-button-color: @subtext1 !important;
      --yt-live-chat-picker-button-hover-color: @accent-Color !important;
      --yt-live-chat-mention-background-color: @accent-Color !important;
      --yt-live-chat-mention-text-color: @text !important;
      --yt-live-chat-deleted-message-color: @subtext0;
      --yt-live-chat-deleted-message-bar-color: @subtext1 !important;
      --yt-live-chat-reconnect-message-color: @text !important;
      --yt-live-chat-disabled-button-background-color: @overlay0 !important;
      --yt-live-chat-sub-panel-background-color: @base !important;
      --yt-live-chat-sub-panel-background-color-transparent: @mantle !important;
      --yt-live-chat-moderator-color: @lavender !important;
      --yt-live-chat-owner-color: @peach !important;
      --yt-live-chat-message-highlight-background-color: @base !important;
      --yt-live-chat-sponsor-color: @green !important;
      --yt-live-chat-overlay-color: fadeout(@mantle, 0.5);
      --yt-live-chat-dialog-background-color: @base !important;
      --yt-emoji-picker-variant-selector-bg-color: @base !important;
      --yt-live-chat-moderation-mode-hover-background-color: fadeout(@mantle, 0.3) !important;
      --yt-grey: @subtext0 !important;
      --yt-live-chat-text-input-field-suggestion-background-color: @subtext0 !important;
      --yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1 !important;
      --yt-emoji-picker-search-background-color: @surface0 !important;
      --yt-emoji-picker-search-color: @text !important;
      --yt-emoji-picker-search-placeholder-color: @accent-Color !important;
      --yt-live-chat-slider-active-color: @accent-Color !important;
      --yt-live-chat-slider-container-color: @surface0 !important;
      --yt-live-chat-slider-markers-color: @text !important;
      --yt-live-chat-banner-gradient-scrim: linear-gradient( @mantle, transparent) !important;
      --yt-live-chat-action-panel-gradient-scrim: linear-gradient( to top, @mantle, transparent) !important;
      --yt-live-chat-automod-button-background-color-hover: fadeout(@crust, 0.5) !important;
      --yt-live-chat-automod-button-explanation-color: fadeout(@accent-Color, 0.7) !important;
      --yt-live-chat-shimmer-background-color: fadeout(@crust, 0.4) !important;
      --yt-live-chat-shimmer-linear-gradient: linear-gradient( 0deg, fadeout(@text, 0.1) 40%, fadeout(@base, 0.3) 50%, fadeout(@text, 0.1) 60%) !important;
      --yt-live-chat-vem-background-color: @mantle !important;
      --yt-live-chat-product-picker-icon-color: fadeout(@text, 0.5) !important;
      --yt-live-chat-product-picker-hover-color: @overlay0 !important;
      --yt-live-chat-product-picker-disabled-icon-color: fadeout(@text, 0.3) !important;
      --yt-live-chat-action-panel-background-color-transparent: (null) !important;

      /* Tooltip */
      --paper-tooltip-background: @overlay0 !important;
      --paper-tooltip-text-color: @text !important;

      /* links */
      --yt-endpoint-color: @accent-Color !important;
      --yt-endpoint-visited-color: @accent-Color !important;
      --yt-endpoint-hover-color: @accent-Color !important;

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

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

    #channel-name.ytd-video-meta-block {
      --yt-endpoint-color: @accent-Color !important;
      --yt-endpoint-visited-color: @accent-Color !important;
      color: @accent-Color !important;
    }

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

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

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

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

    yt-live-chat-renderer {
      --yt-emoji-picker-renderer-height: 180px;
      --yt-button-default-text-color: @text !important;
      --yt-button-default-background-color: @base !important;
      --yt-button-dark-text-color: @base !important;
      --yt-button-dark-background-color: @accent-Color !important;
      --yt-button-payment-background-color: @accent-Color ! important;
    }

    yt-icon.ytd-pinned-comment-badge-renderer * {
      fill: @text !important;
    }

    .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after {
      background: @overlay0 !important;
    }

    .html5-ypc-purchase {
      background: @accent-Color !important;
      &:hover {
        background: ligten(@accent-Color, 10%) !important;
      }
    }

    yt-notification-action-renderer[darker-dark-theme] tp-yt-paper-toast.yt-notification-action-renderer {
      background: @overlay0 !important;
    }

    /* volume bar */
    .ytp-volume-slider-handle {
      background: @accent-Color !important;
      &::before {
        background: @accent-Color !important;
      }
      &::after {
        z-index: -1;
      }
    }

    /* new videos dot */
    #newness-dot {
      background-color: @accent-Color !important;
    }

    /* subtitle */
    .ytp-chrome-controls .ytp-button[aria-pressed]:after {
      background-color: @accent-Color !important;
    }

    /* menu items */
    /* checbox subitem */
    .ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox {
      background: @accent-Color !important;
      &::after {
        background: @overlay1 !important;
      }
    }
    .ytp-menuitem:not([aria-disabled=true]):hover {
      background: @surface1 !important;
    }
    .ytp-settings-button.ytp-hd-quality-badge,
    .ytp-settings-button.ytp-4k-quality-badge,
    .ytp-settings-button.ytp-5k-quality-badge,
    .ytp-settings-button.ytp-8k-quality-badge,
    .ytp-settings-button.ytp-3d-badge {
      &::after {
        background-color: @accent-Color !important;
      }
    }

    .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover {
      fill: @accent-Color !important;
    }

    .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled,
    .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
      background-color: @accent-Color !important;
      .yt-spec-button-shape-next__icon yt-icon svg g path {
        fill: @base !important;
      }
    }

    /* link */
    .yt-core-attributed-string__link--call-to-action-color {
      color: @sapphire !important;
      &:hover {
        color: @teal !important;
      }
    }

    /* search results */
    .sbpqs_a:before,
    .sbqs_c:before {
      filter: invert(1);
    }

    /* Results backgrounds */
    .sbsb_a,
    .sbdd_b {
      background: @mantle !important;
      border: none !important;
    }

    /* text color */
    .gsfs {
      color: @text !important;
    }

    /* Hover and keyboard select background */
    .sbsb_c.gsfs:hover,
    .sbsb_d {
      background-color: @surface0 !important;
    }

    .sbfl_b {
      background-color: @mantle !important;
      &:hover {
        background-color: @surface0 !important;
        color: @accent-Color !important;
      }
    }

    .sbpqs_a {
      color: @accent-Color !important;
    }

    .sbfl_a {
      color: @subtext0 !important;
    }

    .sbsb_i {
      color: @subtext0;
    }

    /* Keyboard select text color and hover text color */
    .sbsb_c:hover .sbqs_c,
    .sbsb_c.gsfs.sbsb_d .sbqs_c {
      color: @accent-Color !important;
    }

    .ytp-swatch-background-color {
      background-color: @accent-Color !important;
    }

    /* exmplation box */
    .explanation-box[correct] * {
      color: @crust !important;
    }

    /* custom likes + anims */
    yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) {
      /* not liked */
      > g:nth-child(2),
      > g:nth-child(4) {
        > path:nth-child(1) {
          stroke: @text !important;
        }
      }
      /* liked */
      > g:nth-child(1),
      > g:nth-child(3) {
        > path:nth-child(1) {
          fill: @accent-Color !important;
        }
        > path:nth-child(2) {
          stroke: @accent-Color !important
        }
      }
    }

    /* iv branding */
    /* Popup for when you hover over the channel avatar in the video */
    .iv-branding .branding-context-container-inner {
      background-color: @base !important;
    }

    .iv-branding .iv-branding-context-name {
      color: @text !important;
      text-shadow: none !important;
    }

    /* Popup for when you hover over the channel avatar in the video */
    .iv-branding .branding-context-container-inner {
      background-color: @base !important;
    }

    /* Cards */
    .iv-drawer-content {
      background-color: fadeout(@mantle, 5%) !important;
    }

    .iv-drawer-header-text {
      color: @text !important;
    }

    .iv-card-content,
    .ytp-ce-expanding-overlay-background,
    .ytp-cards-teaser .ytp-cards-teaser-text,
    .ytp-cards-teaser .ytp-cards-teaser-box {
      background-color: @base !important;
    }

    .ytp-cards-teaser .ytp-cards-teaser-box,
    .iv-card-image {
      border: 0px !important;
    }

    .iv-card-content > :first-child,
    .html5-video-player a,
    .iv-card h2,
    .ytp-cards-teaser .ytp-cards-teaser-text {
      color: @text !important;
    }

    /*Player tooltip background*/
    .ytp-tooltip-text {
      background: @surface0 !important
    }

    .iv-card:hover .iv-card-primary-link,
    .ytp-ce-website-title {
      color: @accent-Color !important;
    }

    .ytp-popup {
      background: @surface0 !important;
    }

    tp-yt-paper-dialog {
      background-color: @base !important;
    }

    /* Temporary fix */
    .yt-core-attributed-string--link-inherit-color {
      color: @text !important;
      /*&:hover {
       * color: @teal !important;
      }*/
    }

    /* live badges */
    .badge-style-type-live-now-alternate,
    ytd-thumbnail-overlay-time-status-renderer[overlay-style="LIVE"] {
      color: @crust !important;
      yt-icon svg {
        g path,
        path {
          fill: @crust !important;
        }
      }
    }
    .ytp-live-badge {
      &:before {
        background: @subtext1 !important;
      }
      &[disabled]:before {
        background: @accent-Color !important;
      }
    }

    /* notification idicator */
    .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
      background-color: @accent-Color !important;
      color: @crust !important;
    }
    .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon {
      color: @text !important;
    }

    /* creator badges */
    ytd-author-comment-badge-renderer {
      --yt-basic-background-color: @surface0 !important;
      --yt-basic-foreground-title-color: @surface0 !important;
      --ytd-author-comment-badge-background-color: @surface0 !important;
      --ytd-author-comment-badge-name-color: @text !important;
      --ytd-author-comment-badge-icon-color: @text !important;
      padding-right: 6px;
      padding-left: 8px;
    }

    /* disable ambient mode */
    #cinematics > div > canvas {
      visibility: hidden;
    }

    /* badges e.g. popular */
    yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT][selected],
    yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER][selected] {
      background: @surface0 !important;
      border: 1px solid @accent-Color !important;
      color: @text !important;
    }

    /* Search border */
    ytd-searchbox[has-focus] #container.ytd-searchbox {
      border-color: @accent-Color !important;
    }

    /* Error page */
    #error-page {
      background-color: @base !important;
    }

    #error-page-content {
      color: @text !important;
      text-shadow: none;
      background-color: @base !important;
      > p {
        color: @text !important;
        text-shadow: none;
      }
      #masthead-search-terms.masthead-search-terms-border {
        border: 1px solid @accent-Color !important;
        box-shadow: none !important;
      }
      #yt-masthead {
        color: @text !important;
        text-shadow: none;
        #logo-container {
          .logo {
            filter: invert(1) grayscale(1);
          }
          .content-region {
            color: @text !important;
            text-shadow: none;
          }
        }
        #masthead-search #masthead-search-terms-border {
          input[type="text"] {
            color: @text !important;
            &:focus {
              color: @accent-Color !important;
            }
          }
        }
        .search-button {
          background-color: @mantle !important;
        }
      }
    }

    /* Scrollbar */
    ::-webkit-scrollbar-thumb {
      background: @accent-Color !important;
    }

    ::-webkit-scrollbar {
      width: 8px !important;
    }

    ::-webkit-scrollbar-track {
      background: @base !important;
    }

    ::-webkit-scrollbar-thumb {
      background: @accent-Color !important;
    }

    /* text highlight */
    ::selection {
      background: fadeout(@accent-Color, 80%) !important;
      color: @text !important;
    }

    ::-moz-selection {
      background: fadeout(@accent-Color, 80%) !important;
      color: @text !important;
    }
  }
}
@-moz-document url-prefix('https://www.youtube.com/redirect') {

  /* youtube.com-redirect */
  :root[dark] {
    #catppuccin(@darkTheme, @accentColor);
  }
  :root {
    #catppuccin(@lightTheme, @accentColor);
  }

  #catppuccin(@lookup, @accent) {

    @rosewater: @catppuccin[@@lookup][@rosewater];
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-Color: @catppuccin[@@lookup][@@accent];

    h1 {
      color: @text !important;
    }

    #redirect-main-text {
      color: @overlay2 !important;
      .bolded {
        color: @accent-Color !important;
      }
    }

    /* search */
    #masthead-search-terms-border {
      border-color: @surface0 !important;
      background-color: @surface0 !important;
      box-shadow: fadeout(@crust, 10%) !important;
    }

    /*Community Cross-posting*/
    ytd-shared-post-renderer[uses-compact-lockup] #repost-context.ytd-shared-post-renderer {
      background-color: var(--second-background);
    }
    #divider-line-container.ytd-shared-post-renderer {
      background-color: var(--yt-spec-10-percent-layer);
    }

    #masthead-search-terms {
      color: @text !important;
    }

    .search-button {
      background: @surface0 !important;
      border-color: @surface0 !important;
    }

    .search-button-content {
      filter: invert(1);
    }

    #redirect-backto-safety-button:hover {
      color: @text !important;
    }

    #logo-container .content-region {
      color: @text !important;
    }

    /* text highlight */
    ::selection {
      background: fadeout(@accent-Color, 80%) !important;
      color: @text !important;
    }

    ::-moz-selection {
      background: fadeout(@accent-Color, 80%) !important;
      color: @text !important;
    }
  }
}

@-moz-document url-prefix('https://studio.youtube.com') {

  /* studio.youtube.com */
  :root[dark] {
    #catppuccin(@darkTheme, @accentColor);
  }
  :root {
    #catppuccin(@lightTheme, @accentColor);
  }

  #catppuccin(@lookup, @accent) {

    @rosewater: @catppuccin[@@lookup][@rosewater];
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-Color: @catppuccin[@@lookup][@@accent];

    &,
    html,
    html[dark],
    html[dark][dark],
    &[dark],
    &[light],
    [light],
    html[light],
    html[light][light] {
      /* disable */
      --yt-spec-black-pure-alpha-80: (null) !important;
      --yt-spec-black-pure-alpha-60: (null) !important;
      --yt-spec-black-1-alpha-98: (null) !important;
      --yt-spec-black-1-alpha-95: (null) !important;

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

      /* main bg */
      --ytcp-general-background-a: @base !important;
      --yt-spec-base-background: @base !important;
      --yt-spec-black-3: @base !important;

      /* secondary bg */
      --yt-spec-brand-background-solid: @mantle !important;
      --ytcp-brand-background-solid: @mantle !important;
      --yt-spec-raised-background: @mantle !important;
      --ytcp-general-background-b: @mantle !important;
      --ytcp-analytics-reach-background: @mantle !important;
      --yt-spec-black-2: @mantle !important;

      /* additonal bg */
      --ytcp-general-background-c: @crust !important;

      /* menu */
      --ytcp-menu-background: @surface0 !important;

      /* card borders */
      --ytcp-container-border-color: @surface0 !important;
      --ytcp-container-hovered-border-color: @surface0 !important;
      --ytcp-line-divider-solid: @surface0 !important;
      --ytcp-container-border-color-inverse: @subtext0 !important;
      --ytcp-line-divider-solid-inverse: @subtext0 !important;

      /* links */
      --ytcp-call-to-action: @sapphire !important;
      --ytcp-call-to-action-inverse: @mantle !important;

      /* buttons */
      --ytcp-call-to-action-raised-background: @accent-Color !important;
      --yt-spec-brand-button-background: @accent-Color !important;
      --ytcp-call-to-action-raised-disabled: @surface2 !important;
      --ytcp-call-to-action-raised-disabled-background: @overlay2 !important;
      --ytcp-call-to-action-raised-background-inverse: @base !important;
      --ytcp-call-to-action-raised-disabled-inverse: @surface2 !important;
      --ytcp-call-to-action-raised-disabled-background-inverse: @overlay2 !important;

      /* dropdown */
      --yt-spec-brand-background-primary: @surface0 !important;

      /* icons */
      --yt-compact-link-icon-color: @overlay2 !important;
      --ytcp-icon-active: @accent-Color !important;
      --ytcp-icon-inactive: @overlay2 !important;
      --ytcp-icon-disabled: @overlay2 !important;
      --ytcp-icon-active-inverse: @overlay1 !important;
      --ytcp-icon-disabled-inverse: @subtext1 !important;

      /* colors */
      --ytcp-error-red: @red !important;
      --ytcp-badge-red: @red !important;
      --ytcp-error-red-inverse: @red !important;
      --ytcp-themed-red-inverse: @red !important;
      --ytcp-themed-red: @red !important;
      --ytcp-themed-blue: @blue !important;
      --ytcp-badge-blue-solid: @blue !important;
      --ytcp-themed-blue-inverse: @blue !important;
      --ytcp-themed-green: @green !important;
      --ytmus-genre-primary-melon: @green !important;
      --ytcp-themed-green-inverse: @green !important;
      --ytcp-analytics-pine: @green !important;
      --ytcp-analytics-pine-inverse: @green !important;
      --ytcp-analytics-parrot: @green !important;
      --ytcp-themed-yellow: @peach !important;
      --ytmus-genre-primary-gold: @peach !important;
      --ytcp-yellow-inverse: @peach !important;
      --ytcp-badge-yellow: @peach !important;
      --ytcp-analytics-yellow: @peach !important;
      --ytcp-analytics-apricot: @peach !important;
      --ytcp-suggested-action: @teal !important;
      --ytcp-analytics-overview: @teal !important;
      --ytcp-analytics-revenue: @teal !important;
      --ytcp-analytics-default-secondary: @teal !important;
      --ytcp-analytics-royal-blue: @lavender !important;
      --ytcp-analytics-reach: @lavender !important;
      --ytcp-analytics-audience: @lavender !important;
      --ytcp-analytics-engagement: @pink !important;
      --ytcp-analytics-revenue-secondary: @pink !important;
      --ytcp-analytics-bubblegum: @flamingo !important;
      --ytmus-genre-primary-ruby: @flamingo !important;
      --ytmus-genre-primary-salmon: @mauve !important;
      --ytmus-genre-primary-orange: @maroon !important;
      --ytmus-genre-primary-sky: @sky !important;
      --ytmus-genre-primary-sky-inverse: @sky !important;

      /* misc */
      --yt-spec-badge-chip-background: @surface1 !important;
      --ytcp-focus-inverse: @accent-Color !important;
      --ytcp-focus: @accent-Color !important;
      --ytcp-selected-item: @accent-Color !important;
      --ytcp-hover-item: @overlay2 !important;
      --ytcp-chip-active-focus: @accent-Color !important;
      --ytcp-playhead: @overlay2 !important;
      --ytcp-playhead-inverse: @overlay2 !important;
    }

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

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

    /* text highlight */
    ::selection {
      background: fadeout(@accent-Color, 80%) !important;
      color: @text !important;
    }

    ::-moz-selection {
      background: fadeout(@accent-Color, 80%) !important;
      color: @text !important;
    }
  }
}

@catppuccin: {
  @latte: {
    @rosewater: #dc8a78;
    @flamingo: #dd7878;
    @pink: #ea76cb;
    @mauve: #8839ef;
    @red: #d20f39;
    @maroon: #e64553;
    @peach: #fe640b;
    @yellow: #df8e1d;
    @green: #40a02b;
    @teal: #179299;
    @sky: #04a5e5;
    @sapphire: #209fb5;
    @blue: #1e66f5;
    @lavender: #7287fd;
    @text: #4c4f69;
    @subtext1: #5c5f77;
    @subtext0: #6c6f85;
    @overlay2: #7c7f93;
    @overlay1: #8c8fa1;
    @overlay0: #9ca0b0;
    @surface2: #acb0be;
    @surface1: #bcc0cc;
    @surface0: #ccd0da;
    @base: #eff1f5;
    @mantle: #e6e9ef;
    @crust: #dce0e8;
  }
  @frappe: {
    @rosewater: #f2d5cf;
    @flamingo: #eebebe;
    @pink: #f4b8e4;
    @mauve: #ca9ee6;
    @red: #e78284;
    @maroon: #ea999c;
    @peach: #ef9f76;
    @yellow: #e5c890;
    @green: #a6d189;
    @teal: #81c8be;
    @sky: #99d1db;
    @sapphire: #85c1dc;
    @blue: #8caaee;
    @lavender: #babbf1;
    @text: #c6d0f5;
    @subtext1: #b5bfe2;
    @subtext0: #a5adce;
    @overlay2: #949cbb;
    @overlay1: #838ba7;
    @overlay0: #737994;
    @surface2: #626880;
    @surface1: #51576d;
    @surface0: #414559;
    @base: #303446;
    @mantle: #292c3c;
    @crust: #232634;
  }
  @macchiato: {
    @rosewater: #f4dbd6;
    @flamingo: #f0c6c6;
    @pink: #f5bde6;
    @mauve: #c6a0f6;
    @red: #ed8796;
    @maroon: #ee99a0;
    @peach: #f5a97f;
    @yellow: #eed49f;
    @green: #a6da95;
    @teal: #8bd5ca;
    @sky: #91d7e3;
    @sapphire: #7dc4e4;
    @blue: #8aadf4;
    @lavender: #b7bdf8;
    @text: #cad3f5;
    @subtext1: #b8c0e0;
    @subtext0: #a5adcb;
    @overlay2: #939ab7;
    @overlay1: #8087a2;
    @overlay0: #6e738d;
    @surface2: #5b6078;
    @surface1: #494d64;
    @surface0: #363a4f;
    @base: #24273a;
    @mantle: #1e2030;
    @crust: #181926;
  }
  @mocha: {
    @rosewater: #f5e0dc;
    @flamingo: #f2cdcd;
    @pink: #f5c2e7;
    @mauve: #cba6f7;
    @red: #f38ba8;
    @maroon: #eba0ac;
    @peach: #fab387;
    @yellow: #f9e2af;
    @green: #a6e3a1;
    @teal: #94e2d5;
    @sky: #89dceb;
    @sapphire: #74c7ec;
    @blue: #89b4fa;
    @lavender: #b4befe;
    @text: #cdd6f4;
    @subtext1: #bac2de;
    @subtext0: #a6adc8;
    @overlay2: #9399b2;
    @overlay1: #7f849c;
    @overlay0: #6c7086;
    @surface2: #585b70;
    @surface1: #45475a;
    @surface0: #313244;
    @base: #1e1e2e;
    @mantle: #181825;
    @crust: #11111b;
  }