/* ==UserStyle==
@name Twitch Catppuccin
@namespace github.com/catppuccin/userstyles/styles/twitch
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitch
@version 2025.09.06
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitch/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitch
@description Soothing pastel theme for Twitch
@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"]
==/UserStyle== */

@import "https://userstyles.catppuccin.com/lib/lib.less";

@-moz-document domain("twitch.tv") {
  @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css");

  .tw-root--theme-dark {
    #catppuccin(@darkFlavor);
  }
  .tw-root--theme-light {
    #catppuccin(@lightFlavor);
  }

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

    body {
      background-color: @base;
    }

    &,
    .tw-dialog-layer,
    [class*="ScLayoutCssVars-sc-"],
    .tw-tooltip-layer {
      --color-background-input-focus: @crust;
      --color-background-interactable-hover: fade(@surface0, 48%);
      --color-background-interactable-alpha-hover: @surface0;
      --color-background-interactable-active: @surface1;
      --color-background-button-secondary-active: @surface1;
      --color-background-button-text-default: null !important;
      --color-background-pill-subtle: @subtext0;
      --color-background-placeholder: @surface0;
      --color-background-selectable: @surface0;
      --color-text-input-placeholder: @text;
      --color-border-input: @base;
      --color-border-tab: @surface0;
      --color-text-button-primary: @crust;
      --color-text-overlay: @base;
      --color-text-overlay-alt: @subtext0;
      --color-text-overlay-link-hover: @subtext0;
      --color-text-base: @subtext1;
      --color-text-alt: @text;
      --color-text-alt-2: @subtext0;
      --color-text-interactable-selected: @crust;
      --color-text-interactable-inverted: @base;
      --color-background-alt-2: @crust;
      --color-text-tag: @subtext0;
      --color-background-button-secondary-default: @crust;
      --color-background-button-primary-hover: darken(@accent, 5%);
      --color-background-button-secondary-hover: @surface0;
      --color-background-button-overlay-secondary-default: fade(@text, 13%);
      --color-background-tag-default: @surface0;
      --color-background-tag-hover: @surface1;
      --color-background-float: @mantle;
      --color-background-body: @base;
      --color-background-base: @mantle;
      --color-background-alt: @mantle;
      --color-background-input: @crust;
      --color-brand-muted-cupcake: @pink;
      --color-brand-muted-mint: @green;
      --color-brand-muted-sky: @sky;
      --color-brand-muted-blush: @peach;
      --color-brand-muted-canary: @peach;
      --color-brand-muted-lavender: @lavender;
      --color-brand-muted-mustard: @yellow;
      --color-brand-muted-emerald: @green;
      --color-brand-muted-coral: @peach;
      --color-brand-muted-ocean: @blue;
      --color-brand-accent-grape: @mauve;
      --color-brand-accent-dragonfruit: @flamingo;
      --color-brand-accent-carrot: @peach;
      --color-brand-accent-sun: @peach;
      --color-brand-accent-lime: @green;
      --color-brand-accent-turquoise: @sky;
      --color-brand-accent-eggplant: @mauve;
      --color-brand-accent-wine: @flamingo;
      --color-brand-accent-slime: @green;
      --color-brand-accent-seafoam: @green;
      --color-brand-accent-cherry: @red;
      --color-brand-accent-marine: @blue;
      --color-brand-accent-seaweed: @teal;
      --color-brand-accent-fiji: @green;
      --color-brand-accent-blueberry: @blue;
      --color-brand-accent-arctic: @sky;
      --color-brand-accent-highlighter: @yellow;
      --color-brand-accent-flamingo: @flamingo;
      --color-brand-accent-ruby: @red;
      --color-brand-accent-punch: @flamingo;
      --color-brand-accent-creamsicle: @yellow;
      --color-red: @maroon;
      --color-red-darker: @red;
      --color-orange: @peach;
      --color-yellow: @yellow;
      --color-green: @green;
      --color-green-darker: @green;
      --color-blue: @blue;
      --color-prime-blue: @blue;
      --color-magenta: @flamingo;
      --color-error: @red;
      --color-warn: @yellow;
      --color-success: @green;
      --color-white: @text;
      --color-black: @crust;
      --color-info: @blue;
      --color-twitch-purple: @accent;
      --color-twitch-purple-4: @accent;
      --color-twitch-purple-5: @accent;
      --color-twitch-purple-6: @accent;
      --color-twitch-purple-7: @accent;
      --color-twitch-purple-8: @accent;
      --color-twitch-purple-9: @accent;
      --color-twitch-purple-10: @accent;
      --color-twitch-purple-11: @accent;
      --color-twitch-purple-12: @accent;
      --color-orange-7: @yellow;
      --color-orange-8: @yellow;
      --color-orange-9: @yellow;
      --color-orange-10: @yellow;
      --color-orange-11: @yellow;
      --color-orange-12: @yellow;
      --color-orange-13: @yellow;
      --color-yellow-6: @peach;
      --color-yellow-7: @peach;
      --color-yellow-8: @peach;
      --color-yellow-9: @peach;
      --color-yellow-10: @peach;
      --color-yellow-11: @peach;
      --color-yellow-12: @peach;
      --color-yellow-13: @peach;
      --color-yellow-14: @peach;
      --color-yellow-15: @peach;
      --color-green-5: @green;
      --color-green-6: @green;
      --color-green-7: @green;
      --color-green-8: @green;
      --color-green-9: @green;
      --color-green-10: @green;
      --color-green-11: @green;
      --color-green-12: @green;
      --color-green-13: @green;
      --color-green-14: @green;
      --color-green-15: @teal;
      --color-cyan-9: @sapphire;
      --color-cyan-10: @sapphire;
      --color-cyan-11: @sapphire;
      --color-cyan-12: @sapphire;
      --color-cyan-13: @sapphire;
      --color-cyan-14: @sapphire;
      --color-cyan-15: @sky;
      --color-blue-4: @blue;
      --color-blue-5: @blue;
      --color-blue-6: @blue;
      --color-blue-7: @blue;
      --color-blue-8: @blue;
      --color-blue-9: @blue;
      --color-blue-10: @sky;
      --color-blue-11: @sky;
      --color-blue-12: @sky;
      --color-blue-14: @sky;
      --color-magenta-5: @flamingo;
      --color-magenta-6: @flamingo;
      --color-magenta-7: @flamingo;
      --color-magenta-8: @flamingo;
      --color-magenta-9: @flamingo;
      --color-magenta-10: @flamingo;
      --color-magenta-11: @pink;
      --color-magenta-12: @pink;
      --color-magenta-14: @pink;
      --color-red-4: @accent;
      --color-red-5: @accent;
      --color-red-6: @accent;
      --color-red-7: @accent;
      --color-red-8: @accent;
      --color-red-9: @accent;
      --color-red-10: @red;
      --color-red-11: @peach;
      --color-red-12: @peach;
      --color-red-14: @peach;
      --color-twitter: @blue;
      --color-facebook: @blue;
      --color-reddit: @peach;
      --color-snapchat: @yellow;
      --color-instagram: @blue;
      --color-youtube: @red;
      --color-paypal: @blue;
      --color-paypal-blue: @blue;
      --color-paypal-yellow: @yellow;
      --color-venmo: @blue;
      --color-vk: @blue;
      --color-amazon: @yellow;
      --color-background-button-text-hover: @surface0;
      --color-text-accessible-red: @accent;
      --color-border-input-checkbox: @subtext0;
      --color-border-input-checkbox-hover: @text;
      --color-text-label: @text;
      --color-border-input-hover: @surface0;
      --color-opac-b-14: @crust;
      --color-text-button-overlay: @text !important;
      --color-background-progress: @surface0;
      --color-background-range-overlay-fill: @text !important;
      --color-text-button-overlay-hover: @text !important;
      --color-text-tooltip: @base !important;
      --color-background-tooltip: @text !important;
      --color-hinted-grey-2: @surface0;
      --color-hinted-grey-5: @surface0;
      --color-hinted-grey-8: @subtext0;
      --color-hinted-grey-12: @subtext0;
      --color-hinted-grey-15: @text;
      --color-background-overlay-alt: fade(@mantle, 60%);
      --color-background-button-overlay-primary-hover: @subtext1;
      --color-background-button-overlay-text-hover: @crust;
      --color-border-overlay: @surface0;
      --color-border-base: @surface0;
      --color-background-button-disabled: @surface0;
      --color-text-button-disabled: @subtext0;
      --color-background-toggle-handle: @text;
      --color-border-toggle: @text;
      --color-border-toggle-hover: @text;
      --color-background-toggle-checked: @mantle;
      --color-background-input-checkbox-checked-background: @crust;
      --color-border-balloon-overlay: @surface0;
      --color-opac-gd-1: fade(@surface0, 35%);
      --color-text-number-badge: @base;

      & when (@flavor = latte) {
        --color-white: @base;
        --color-black: @text;
        --color-hinted-grey-12: @mantle;
        --color-text-pill: @base;
        --color-text-overlay-link-hover: @surface0;
        --color-background-overlay-alt: fade(@text, 60%);
        --color-text-button-destructive: @base;
        --color-text-button-overlay: @base !important;
      }
    }

    --color-text-link: @accent;
    --color-text-link-active: darken(@accent, 5%);
    --color-text-link-focus: darken(@accent, 5%);
    --color-text-link-hover: darken(@accent, 5%);
    --color-text-link-visited: @accent;

    &,
    [class*="ScAccentRegionCssVars"] {
      --color-accent: @accent;
    }
    /* Hardcoded accent color */
    [style="color: rgb(160, 84, 255);"] {
      color: @accent !important;
    }

    /* `Pinned message` popup */

    div.pinned-chat__pinned-by svg {
      color: @text;
    }

    p.pinned-chat__message {
      span {
        color: @text !important;
      }

      a {
        color: @accent;
      }
    }

    /* `Intended for certain audiences` label */

    div[data-a-target="content-classification-warning-disclosure-overlay"] p {
      color: @text !important;
    }

    /* `Hype Train` popup */

    div.hype-train-progress-bar-info-view__level-container p,
    div.hype-train-approaching-view__leftSide p,
    div.hype-train-expanded-layout p,
    div.hype-train-expanded-layout svg {
      color: @text;
    }

    path[d="m18 17 4-4V2H6v15h4v4l4-4h4zM12 6h2v6h-2V6zm7 0h-2v6h2V6z"] {
      fill: @mantle;
    }

    /* `Is video buffering?` warning */

    div.low-latency-notification {
      p {
        color: @text;
      }
      border-color: @accent;
    }

    /* `Includes paid promotion` label */

    div.disclosure-card {
      p,
      svg,
      a {
        color: @text;
      }
      background: fade(@mantle, 80%);
    }

    /* Raiding popup */

    div[data-test-selector="raid-banner"] {
      color: @text;
    }

    /* `Predict with Channel Points` popup */

    div[data-test-selector="expanded-content"] p,
    p[data-test-selector="community-prediction-highlight-header__top-predictors"],
    p[data-test-selector="community-prediction-highlight-body__outcome-title"] {
      color: @text;
    }

    /* TODO: ensure that the poll does not default to this */
    div[data-test-selector="header-content"] p {
      color: @text !important;
    }

    div.channel-points-icon svg,
    div[data-test-selector="header-content"] span,
    div[data-test-selector="community-prediction-highlight-body__outcome-points"]
      span {
      color: @accent;
    }

    button[data-test-selector="community-prediction-highlight-header__how-to-play"],
    button[data-test-selector="community-prediction-highlight-header__terms-and-conditions"],
    button[data-test-selector="community-prediction-highlight-header__send-feedback"],
    button[data-test-selector="community-prediction-highlight-header__dismiss-message"] {
      color: @text;
    }

    /* ??? */

    div.happening-now-disable-prompt p {
      color: @text !important;
    }

    /* Gifting sub popup */

    div.mystery-gift-chat-banner {
      span {
        color: @accent;
      }

      p {
        color: @text;
      }
    }

    /* VOD metadata */

    div.tw-media-card-stat when not(@flavor = latte) {
      --color-text-overlay: @text;
    }

    /* Seekbar segment */

    div[data-test-selector="seekbar-interaction-area__interactionArea"]
      span[data-test-selector="seekbar-segment__segment"] {
      background: @accent !important;
    }

    /* Seekbar DMCA muted segment */

    div[data-test-selector="seekbar-interaction-area__interactionArea"]
      span[data-test-selector="seekbar-segment__segment"][style*="background-color: rgba(212, 73, 73, 0.5);"] {
      background: @red !important;
    }

    /* Seekbar buffered segment */

    div[data-test-selector="seekbar-interaction-area__interactionArea"]
      span[data-test-selector="seekbar-segment__segment"][style*="background-color: rgba(255, 255, 255, 0.85);"] {
      background: @overlay2 !important;
    }

    /* Recent VOD title */

    div.player-overlay-background h4 {
      color: @subtext0 !important;
    }

    a.offline-recommendations-video-card p {
      color: @text;
    }

    /* Offline screen follow panel */

    div[data-test-selector="follow-panel-overlay"] p {
      color: @text !important;
    }

    div[data-test-selector="follow-panel-overlay"] button div {
      color: @crust !important;
    }

    /* Front page warning sign */

    div.content-overlay-gate__content[data-a-target="player-overlay-content-gate"]
      div.content-overlay-icon
      svg {
      color: @red;
    }

    /* Front page age warning */

    div.content-overlay-gate__content[data-a-target="player-overlay-content-gate"]
      p.content-overlay-gate__allow-pointers {
      color: @red !important;
    }

    /* Front page age selector */

    div[data-a-target="player-overlay-age-gate-form"] select {
      color: @text;
    }

    /* Followers list usercard */

    div[data-a-target="user-card-modal"] p when not(@flavor = latte) {
      --color-text-overlay: @text;
    }

    /* Usercard mod log tabs */

    .viewer-card-mod-drawer-tab--active {
      box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent inset
        !important;
    }

    /* Usercard header */

    .viewer-card-header__overlay {
      background-color: fade(@mantle, 60%) !important;
    }

    /* PiP username */

    div.mini-overlay__title span {
      color: @text;
    }

    /* Viewercard username */

    div.viewer-card-header__display-name h4 {
      color: @accent !important;
    }

    /* Viewercard metadata */

    div.viewer-card-header__display-name svg:not(button svg) {
      color: @subtext1;
    }

    div.viewer-card-header__display-name p {
      color: @text !important;
    }

    /* Extension name */

    div[aria-describedby="popover-extensions-body"] h6 {
      color: @text;
    }

    /* Extension description */

    div.extensions-popover-view-layout__body p {
      color: @text;
    }

    /* Extension service buttons */

    div.extensions-popover-view-layout__body svg {
      color: @subtext0;
    }

    div.extensions-popover-view-layout__body div {
      color: @text;
    }

    /* Extension overlay */

    .extension-view__iframe {
      color-scheme: light;
    }

    .carousel-metadata {
      background: @crust;
    }
    .carousel-metadata--fadeout {
      background: @crust;
    }
    .chat-line__timestamp {
      color: @subtext0;
    }
    .chat-line__message-body--highlighted {
      background-color: @accent;
      color: @crust;
      border-color: @accent;
    }
    .chat-scrollable-area__message-container {
      background-color: @mantle;
    }
    .side-nav-card__link:hover,
    .side-nav-card__link:focus {
      background: @surface0 !important;
    }
    .footer {
      background: @crust;
    }
    .whispers-list-item--selected,
    .whispers-list-item:hover {
      background-color: @surface0;
    }
    .thread-header__title-bar-container--focused {
      background-color: @mantle;
    }
    .thread-header__title-bar-container {
      background: @mantle;
    }
    .thread-header__click-area:focus .thread-header__title-bar-container {
      background-color: @mantle;
    }
    .navigation-link {
      color: @text;

      &:hover,
      .active {
        color: @accent;
      }
    }
    .navigation-link__active-indicator {
      background-color: @accent !important;
    }
    .chat-room {
      background: @mantle;
    }
    div.pinned-chat__highlight-card div.highlight {
      background: @mantle;
    }

    .server-message-alert {
      border-color: @red !important;
      border-left-color: @red !important;
    }

    .server-message-alert__icon {
      color: @red !important;
    }

    /* Predictions */
    .fixed-prediction-button {
      color: @mantle !important;

      .channel-points-icon svg {
        color: @mantle !important;
      }

      &.fixed-prediction-button--disabled {
        color: @text !important;

        .channel-points-icon svg {
          color: @text !important;
        }
      }
    }
    [style*="rgb(255, 255, 255)"] {
      color: @base !important;
      .channel-root,
      .channel-info-content,
      .chat-author__display-name,
      .chatter-name,
      &[data-a-target="chat-message-username"],
      &.message-author__display-name {
        color: @text !important;
      }
    }

    .chatter-name [style*="rgb(255, 255, 255)"] {
      color: @text !important;
    }

    [style="color: rgb(56, 122, 255);"] {
      color: @blue !important;
    }
    [style="color: rgb(245, 0, 155);"] {
      color: @pink !important;
    }

    /* FrankerFaceZ uptime timer */
    .ffz-il-tooltip__container {
      p,
      figure.ffz-i-flag {
        color: @text;
      }
    }

    [data-a-target="preview-card-image-link"] when (@flavor = latte) {
      .tw-media-card-stat,
      p,
      figure.ffz-i-flag {
        color: @base;
      }
    }

    /* VOD chapters */
    .preview-card-game-balloon__content .tw-interactable:hover {
      p,
      figure {
        color: @text !important;
      }
      .media-row__image-play-overlay {
        background-color: fade(@base, 80%) !important;
      }
    }

    .fixed-prediction-button--blue,
    [style*="background-color: rgb(56, 122, 255);"],
    [style*="background: rgb(56, 122, 255);"] {
      background-color: @blue !important;
    }
    .fixed-prediction-button--pink,
    [style*="background-color: rgb(245, 0, 155);"],
    [style*="background: rgb(245, 0, 155);"] {
      background-color: @pink !important;
    }

    input[disabled] {
      background-color: @surface0;
    }
    .chat-wysiwyg-input__placeholder {
      color: @subtext0;
    }

    button[aria-label="Play"],
    button[aria-label="Pause"] {
      + div svg {
        color: @subtext0;
      }
    }

    [data-a-target="video-ad-label"],
    [data-a-target="video-ad-countdown"] {
      color: @text !important;
    }

    /* Override for logo icon */
    .tw-animated-glitch-logo {
      --color-white: @crust;
    }

    /* Modals */
    .modal__content {
      color: @text;
    }

    /* Leaderboard highlighted username */
    .bits-leaderboard-expanded-top-three-entry__marquee-username,
    .channel-leaderboard-header-runner-up-entry__username,
    .bits-leaderboard-expanded-top-three-entry__username {
      div {
        color: @base !important;
      }
    }

    .channel-leaderboard-header-rotating__expand-grabber {
      background: @surface0 !important;
    }

    /* Privacy center */

    .privacy-center-root__number-item {
      background: @accent;
      color: @base;
    }

    .privacy-center-accordion {
      border-color: @accent;
    }

    .privacy-center-home-tabs {
      color: @base !important;
      &[aria-selected="true"],
      &:hover {
        color: @surface1 !important;
      }
    }

    .home-page__title-container,
    .tw-responsive-wrapper {
      svg path {
        &[fill="#fff"],
        &[fill="#FFF"] {
          fill: transparent !important;
        }
      }
    }

    .home-page__title {
      color: @base !important;
    }

    .tw-balloon {
      .tw-callout-message__title {
        color: var(--color-text-variable) !important;
      }

      .tw-callout__close div.tw-svg {
        fill: var(--color-text-variable) !important;
      }
    }

    /* Home page tips and analytics */

    .analytics-tip-card {
      color: @base !important;

      button {
        color: @base !important;
      }
    }

    [class*="analyticsTargetProgressCard--"], .analytics-highlights-card {
      .creator-home-card__icon
        :not(.creator-home-card__icon-background--undefined)
        ~ .creator-home-card__icon-svg {
        color: @base !important;
      }
    }

    .creator-home-welcome-title__overlay-text,
    .analytics-highlights-chart-tooltip__label--dark {
      color: @base !important;
    }

    .creator-home-focus-position {
      background: linear-gradient(@accent, @base);
    }

    /* Shield mode tray */

    .shield-mode-icon svg path {
      fill: @peach;
    }

    .tray-highlight,
    .chat-input-highlight,
    .shield-mode-shortcut__btn {
      border-color: @peach !important;
    }

    /* Shield mode mod view button */

    .shield-mode-shortcut__inner,
    .shield-mode-view-toggle--active {
      color: @base;
      background: @peach;
    }

    /* Channel points reward cost */

    .reward-icon__cost {
      color: @text !important;
      background: fade(@mantle, 60%) !important;

      & when (@flavor = latte) {
        color: @base !important;
        background: fade(@text, 60%) !important;
      }
    }

    /* Directory banner */

    .directory-header-new__banner-cover {
      background:
        linear-gradient(0deg, @base, fade(@mantle, 25%)),
        linear-gradient(90deg, @base, fade(@mantle, 25%));
    }

    .home-video when not(@flavor = latte) {
      --color-text-overlay: @text;
    }

    /* Cookies and Advertising Choices */

    .top-bar--pointer-enabled .consent-banner__content--gdpr-v2,
    .consent-banner {
      a,
      button,
      p {
        color: @base !important;
      }

      button:not([data-a-target="consent-banner-accept"]) {
        background-color: fade(@base, 10%);
      }
    }

    /* Mod view changelog shadow */

    .mod-view-whats-new-list--more-posts-to-see::after {
      background-image: linear-gradient(transparent, @mantle);
    }

    /* Unban requests */

    .unban-requests-tabs__load-previous {
      background-image: linear-gradient(@mantle, fade(@mantle, 0%));
    }

    .unban-requests-action-button__selected {
      color: @base !important;
      background: @accent;
    }

    .unban-requests-tabs__load-previous > div {
      background: @surface0;
    }

    /* Timestamps, mod actions and deleted messages */

    .targeted-mod-action,
    .message__timestamp,
    .vcml-message__timestamp,
    .chat-line__message--deleted {
      color: @subtext0;
    }

    /* Suspicious user banner in usercard */

    .low-trust-user-banner div {
      color: @text !important;
    }

    /* Emote preview */

    .chat-input__preview__text {
      color: @base !important;
    }

    /* Twitch logo in onboarding screen */

    .onboarding-modal-splash-screen__container {
      svg path[fill="#fff"] {
        fill: transparent !important;
      }
    }

    /* Stream category subtitle in onboarding screen */

    .onboarding-modal-main-list-live-channels-live-channel-card__sub-title {
      color: @subtext0 !important;
    }

    /* Subscriptions */

    .tier-display {
      color: @mauve;
    }

    .tier-display__prime {
      color: @blue;
    }

    .sub-badge-progress p,
    .sub-badge-progress__all-badges--text,
    .expired-sub-message {
      color: @subtext0 !important;
    }

    .sunlight-modal__content {
      color: @text !important;
    }

    .tw-loading-spinner {
      color: @text;
    }

    .video-player__container, .clips-root__main {
      & when not(@flavor = latte) {
        --color-text-overlay: @text;
      }
    }

    .vertical-selector a:hover {
      background: darken(@accent, 5%);
    }

    /* Chat popouts */

    div[data-test-selector="chat-private-callout-queue__callout-container"] {
      .tw-callout__close > button {
        color: @base !important;
      }
      div[data-a-target="tw-progress-bar-animation"] {
        background: @base;
      }
      div.tw-progress-bar {
        background: fade(@base, 10%);
      }
      button .tw-svg, svg {
        fill: @base;
      }
    }

    /* SUBtember subscribe button */

    .gift-subtember-button {
      background: @teal;
    }

    .player-controls when (@flavor = latte) {
      --color-text-button-overlay: @base !important;
      --color-background-range-overlay-fill: @base !important;
      --color-text-button-overlay-hover: @mantle !important;
    }

    /* Clips watch live prompt */

    .watch-live-prompt {
      h5 {
        color: @text !important;
      }
      h6 {
        color: @subtext0 !important;
      }
    }

    .clips-top-nav-user {
      .clips-top-nav-user__username,
      .tw-svg {
        color: @text !important;
      }
    }

    /* AutoMod caught message */

    .chat-line__message--alert {
      border-color: @red !important;
      background-color: @base !important;
    }

    .text-fragment--moderated-highlight {
      color: @text !important;
      background-color: fade(@red, 30%) !important;
    }

    /* Activity feed icons */

    .activity-feed-v2-event--follow {
      color: @pink;
    }

    .activity-feed-v2-event--subscription {
      color: @blue;
    }

    .activity-feed-v2-event--reward-request,
    .activity-feed-v2-event--raiding {
      color: @yellow;
    }

    .activity-feed-v2-event--multi-stage {
      color: @teal;
    }

    .activity-feed-v2-event--creator-goal {
      color: @green;
    }

    /* Chat message highlights */

    div[style*="border"] {
      /* Suspicious user */
      &[style*="rgb(255, 130, 128)"] {
        border-color: @red !important;
      }

      /* First message */
      &[style*="rgb(255, 117, 230)"] {
        border-color: @pink !important;
      }

      /* Returning chatter */
      &[style*="rgb(0, 163, 163)"] {
        border-color: @teal !important;
      }

      /* Raider */
      &[style*="rgb(245, 245, 0)"] {
        border-color: @yellow !important;
      }

      /* Mention */
      &[style*="rgb(173, 173, 184)"] {
        border-color: @text !important;
      }

      /* Moderator */
      &[style*="rgb(0, 168, 101)"] {
        border-color: @green !important;
      }

      /* VIP */
      &[style*="rgb(219, 0, 179)"] {
        border-color: @mauve !important;
      }

      /* Subscriber */
      &[style*="rgb(82, 139, 255)"] {
        border-color: @blue !important;
      }
    }

    /* "Account suspended or deactivated" status banner */

    .viewer-card-header__account-status-banner {
      color: @text;
      background-color: @mantle !important;
    }

    /* Chat mentions */

    .mention-fragment {
      color: @text;
      background-color: @surface0;

      &.mention-fragment--recipient {
        color: @base;
        background-color: @text;
      }
    }

    /* Clips sharing buttons */

    .converter(@bg, @fg: @base) {
      color: @fg !important;
      background-color: @bg;

      &:not([disabled]):hover {
        background-color: darken(@bg, 5%);
      }
    }

    .converter-youtube-button button {
      .converter(@red);
    }

    .converter-instagram-button button {
      .converter(@mauve);
    }

    .share-tiktok-button {
      background-image: linear-gradient(135deg, @sky, @red);

      button {
        color: @text !important;
        background-color: @mantle;

        &:not([disabled]):hover {
          background-color: @surface0;
        }
      }
    }

    .clips-root__main .seekbar-bar {
      background-color: @surface0 !important;
    }

    /* Clips editor timeline */

    .draggable-slider__overlay--purple {
      border-color: @accent;
      background-color: fade(@accent, 30%);
    }

    .draggable-slider-handle--purple {
      background-color: @accent;
      --color-white: @base;
    }

    .clip-editor-timeline-background {
      background-color: @base;
    }

    .clip-editor-slider-popover {
      color: @base;
      background-color: @text;
    }

    /* Pinned message shadow */
    .pinned-chat__scrollable-area__gradient {
      background-image: linear-gradient(180deg, transparent 60%, @mantle);
    }

    /* What's new mod view icon */
    .whats-new-button--has-new-posts {
      color: @green;
    }

    /* Guest star thumbnail border */
    .guest-star-live-card-border {
      background-image: linear-gradient(180deg, @mauve 0, @teal 61.98%, @blue);
    }

    /* Guest Star circle buttons */

    .guest-star-circle-button:not(
      .guest-star-circle-button--inverted,
      .guest-star-circle-button--alert
    ),
    .guest-star-circle-button__dropdown:not(
      .guest-star-circle-button__dropdown--inverted,
      .guest-star-circle-button__dropdown--alert
    ) {
      background-color: @mantle;
      &:hover {
        background-color: var(--color-hinted-grey-5);
      }

      & when (@flavor = latte) {
        --color-hinted-grey-5: @subtext0;
        color: @base;
        background-color: @text;
        &:hover {
          background-color: var(--color-hinted-grey-5);
        }
      }
    }

    .guest-star-circle-button--inverted,
    .guest-star-circle-button__dropdown--inverted {
      color: @base;
      border-color: @base;
      & when (@flavor = latte) {
        color: @text;
        border-color: @text;
      }
    }

    /* End Stream Together button */
    .guest-star-circle-button--alert {
      color: @base;
    }

    /* Guest Star What's new icon */
    .notification-icon--green svg {
      fill: @green;
    }

    .video-player__overlay when (@flavor = latte) {
      --color-text-pill: @base;
    }

    /* Polls */
    .community-highlight-stack__card {
      .container--default {
        background-color: @base;
      }

      .container--winner p {
        color: @base !important;
      }

      .choice-progress__fill--default {
        background-color: @surface0;
      }

      .top-poll-community-points-contributor {
        color: @green;
      }
    }

    /* Channel points rewards - Learn more */
    [class*="rewardsLearnMoreHeadersDark"],
    [class*="rewardsLearnMoreExpandedView"] {
      background-color: @base;
    }

    .footer__link, .footer__link:hover {
      color: @text;
    }

    .footer__glitch
      path[d="m18 17 4-4V2H6v15h4v4l4-4h4zM12 6h2v6h-2V6zm7 0h-2v6h2V6z"] {
      fill: @text;
    }

    .bits-leaderboard-expanded__collapse {
      svg {
        fill: @surface0;
      }
    }

    .tw-channel-status-text-indicator {
      color: @base;
    }

    .player-captions-container {
      .player-captions-container__caption-line[style*="; color: rgb(255, 255, 255)"] {
        color: if(@flavor = latte, @base, @text) !important;
      }
    }

    article {
      .tw-callout-message {
        color: @base;
      }
      .tw-callout__close svg {
        fill: @base !important;
      }
      div.tw-root--theme-dark, div.tw-root--theme-light {
        .tw-callout-message {
          color: @subtext0;
        }

        .tw-callout__close svg {
          fill: @text !important;
        }
      }
    }

    .vod-seekbar-preview-overlay__wrapper [class^="CoreText-sc-"] {
      color: @text !important;
    }

    #chapter-select-popover-body .media-row {
      --color-text-overlay: @text;
      --color-background-interactable-selected: @surface0;
      .media-row__image-wrapper figure {
        color: @text;
      }
    }
  }
}

@-moz-document domain("dashboard.twitch.tv") {
  .tw-root--theme-dark {
    #catppuccin(@darkFlavor);
  }
  .tw-root--theme-light {
    #catppuccin(@lightFlavor);
  }

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

    .edit-video-properties-modal__content {
      --color-background-float: @base;
    }

    .simplebar-content {
      background-color: @mantle;
    }

    .scrollable-area--suppress-scroll-x > .simplebar-scroll-content,
    .scrollable-area--suppress-scroll-x
      > .simplebar-scroll-content
      > .simplebar-content {
      background-color: @base;
    }

    .sunlight-page .simplebar-scroll-content .simplebar-content {
      background-color: @base;
    }
    .info_box_row {
      background: @crust;
    }
    .info_box_row_label {
      color: @text;
    }
    .video-card-thumbnail__video-state-overlay {
      color: @text !important;
      background: fade(@mantle, 80%) !important;
    }

    /* Twitch alerts */

    .alerts-home-main-wrapper {
      color: @text !important;
    }

    .alerts-home-scrollable-area,
    .alert-boxes-section-border-container {
      color: @text !important;
      .simplebar-content {
        background: @mantle !important;
      }
      .alert-set-card {
        background: @crust !important;
      }
    }

    /* Analytics */

    .top-stats-tab--active {
      color: @accent !important;
      box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent inset;
      .top-stats-tab__title {
        color: @accent !important;
      }
    }

    .top-stats-tab:hover {
      box-shadow: inset 0 -2px 0 @accent, 0 4px 6px -4px @accent;
      background: @base !important;
    }

    /* Stream Manager */

    .stream-manager--page-view {
      .mosaic-tile .simplebar-content,
      .stream-manager-edit-mode-item,
      .stream-manager-edit-mode-stat-item {
        background: @mantle !important;
      }
    }

    /* Autohost / managed channels list */

    .dashboard-centered-page {
      --color-background-alt: @base;
      .simplebar-scroll-content,
      .simplebar-content {
        background: transparent !important;
      }

      .autohost-list-item--hovered {
        color: @text;
        background: @base;

        button svg path {
          fill: @text !important;
        }
      }
    }

    /* Research */

    .time-to-stream-tab--active {
      box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent inset;
    }

    /* Collection thumbnails */

    .collection-preview-image__wrapper {
      color: @text !important;
      background: linear-gradient(
        90deg,
        fade(@mantle, 0%),
        fade(@mantle, 100%) 75%
      );
    }

    /* AutoMod shadow */

    .automod-level-controls__categories--bottom::after {
      background-image: linear-gradient(fade(@mantle, 0%), @mantle);
    }

    /* Tables */

    .tw-table,
    .tw-table-heading {
      border-color: @surface0;
      background: @crust;
    }

    /* Achievements & activity page */

    .ach-sb,
    .activity-page__scrollable .simplebar-content {
      background: @mantle !important;
    }

    /* Clips player background */

    .clips-player-container {
      background: @crust;
    }

    .clmgr-table__row {
      &:hover {
        background: @surface0 !important;
      }
    }

    /* Announcements button */

    .announcements-icon--green svg {
      fill: @green !important;
    }

    /* Achievements */

    .ach-q-item {
      &.ach-q-item--expanded {
        box-shadow: 0 0 0 1px @accent;
      }

      [data-test-selector="is-affiliate-banner"] {
        span,
        a {
          color: @base !important;
        }
      }

      .quest-progress-bars__incomplete {
        background-color: @surface0 !important;
      }
    }

    [data-target="video-card"] {
      background: @mantle !important;
    }

    /* Stream Manager quick actions */

    .quick-action,
    .quick-actions-store-card-layout--top {
      color: @base;

      &.quick-action--purple,
      &.quick-actions-store-card-layout--purple {
        background-color: @mauve;
      }

      &.quick-action--blue,
      &.quick-actions-store-card-layout--blue {
        background-color: @blue;
      }

      &.quick-action--magenta,
      &.quick-actions-store-card-layout--magenta {
        background-color: @pink;
      }

      &.quick-action--green,
      &.quick-actions-store-card-layout--green {
        background-color: @green;
      }

      &.quick-action--red,
      &.quick-actions-store-card-layout--red {
        background-color: @red;
      }

      &.quick-action-layout--disabled {
        color: @subtext0;
        background-color: @surface0;
      }
    }

    /* Stream Manager statistics */
    .sunlight-tile {
      background-color: @crust;
    }

    .creator-home-card__icon-background--yellow {
      background-color: @yellow;
    }

    .stream-manager--page-view .mosaic-window-body,
    .sunlight-expanded-nav-drop-down-menu-layout__scrollable-area,
    .sunlight-collapsed-nav-drop-down-menu__scrollable-area {
      background-color: @mantle;
    }

    [class*="progressContainer--"] {
      background-color: @surface0;
    }
  }
}

@-moz-document domain("dev.twitch.tv"),
  url-prefix("https://discuss.dev.twitch.com/embed/topics") {
  :root {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
  }

  #catppuccin(@flavor) {
    #lib.palette();
    #lib.css-variables();

    &,
    body {
      color: @text !important;
      background: @base;
      --primary-medium: @text;
      --primary-low: @surface0;
      scrollbar-color: @surface0 @mantle;
    }

    a.btn,
    button.btn {
      border-color: @accent;
      background: @accent !important;
      color: @base !important;
    }

    a.btn:hover,
    button.btn:hover {
      background: fade(@accent, 80%) !important;
    }

    /* Recent announcements */
    .topics-list .topic-list-item .main-link a {
      color: @accent;
    }

    .topic-created-at,
    .topic-last-posted-at,
    .topic-like-count,
    .topic-post-count {
      color: @subtext0 !important;
    }

    /* Header */
    .nav__container,
    .dev-top-nav {
      background: @crust !important;

      .tw-link,
      .dev-top-nav__nav-items-container {
        color: @text !important;
        background: @crust !important;
      }
      .online {
        border-color: @crust !important;
      }
      a.btn.light {
        background: fade(@accent, 10%) !important;
        color: @text !important;
      }
      .nav__links a {
        color: @text;

        &:hover {
          color: @subtext0;
        }
        &.active {
          color: @accent;
          border-color: @accent;
        }
      }
      .nav__logo svg path {
        fill: @text;
      }
    }

    /* Footers */
    .footer,
    .dev-footer,
    .subscribe-footer {
      h5,
      p,
      a,
      div {
        color: @text !important;
      }
      a:hover {
        color: @accent !important;
      }

      svg path {
        fill: @text !important;
      }

      background: @crust;
    }

    .bright-cta {
      * {
        color: @mantle !important;
      }
      background: @accent;
    }
    .content-alternate-2 {
      background: @base;
    }

    .sandbox-tab {
      color: @text !important;
    }

    .why-twitch ul li {
      background: @base;
      border-color: @surface0 !important;
    }

    .sandbox-tab.active {
      color: @accent !important;
      border-color: @accent !important;
    }

    .hero,
    .extension-cta,
    .subscribe-footer {
      background: @mantle;
    }

    thead tr th {
      border-color: @surface0;
      background: @mantle;
    }

    tbody tr td {
      border-color: @surface0;
    }

    tbody tr:nth-child(odd) {
      background: @base !important;
    }
    tbody tr:nth-child(even) {
      background: @mantle !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr {
      color: @text !important;
      border-color: @surface0 !important;
    }

    .right-code {
      p {
        color: @subtext0;
      }
      background-color: @base !important;
    }

    blockquote {
      border-color: @accent;
      background: @mantle;
    }

    .content,
    .main,
    .topics-list,
    .doc-content {
      background: @base;
      border-color: @base !important;
      a {
        color: @accent;
      }
      border-bottom-color: @surface0 !important;
      border-image: none;
      -webkit-border-image: none;
    }

    code {
      border-color: @accent !important;
      background: fade(@accent, 5%) !important;
      color: @text !important;
    }

    /* Code */
    .right-code pre,
    pre.highlight,
    pre {
      border-color: @mantle !important;
      background: @mantle !important;
      code {
        background: transparent !important;
        color: @text !important;
      }
    }

    /* Pills */
    .pill-new {
      color: @base !important;
      background: @accent !important;
    }
    .pill-beta {
      color: @base !important;
      background: @yellow !important;
    }

    /* Navbar */
    .sidebar {
      background: @mantle !important;
      dl {
        border-color: @base !important;
      }
      dt a,
      dl dd a {
        color: @text !important;
      }
      dl dd a.active-highlight {
        color: @accent !important;
      }
      dl dd a.active-highlight::before {
        border-left-color: @accent !important;
      }
      dt a:hover {
        background: @base !important;
      }

      /* Search */

      input {
        color: @text;
        &::placeholder {
          color: @subtext0;
        }
        &:focus {
          background: @crust !important;
          box-shadow: 0 0 3px 1px fade(@accent, 70%);
          color: @text;
        }
      }

      .search-icon svg path {
        fill: @text !important;
      }

      .algolia-autocomplete {
        .algolia-docsearch-suggestion--category-header {
          color: @text !important;
          background: @mantle !important;
          border-color: @base !important;
        }

        .algolia-docsearch-suggestion--highlight {
          background: @accent !important;
          color: @base !important;
        }

        .algolia-docsearch-suggestion--content {
          background: @mantle !important;
        }

        .algolia-docsearch-suggestion--title {
          color: @text !important;
        }

        .algolia-docsearch-suggestion--text {
          color: @subtext0 !important;
        }

        .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
          .algolia-docsearch-suggestion--title,
          .algolia-docsearch-suggestion--text {
            background: @crust !important;
            .algolia-docsearch-suggestion--highlight {
              background: @base !important;
            }
          }
        }
      }
    }

    ul.grid li.story {
      h4 a,
      a.btn {
        color: @text !important;
      }
      a {
        color: @accent !important;
      }
      .story__links a {
        color: @base !important;
      }

      border-color: @surface0;
    }

    .submission .relative .outer {
      svg path {
        fill: @text;
      }
      button {
        border-color: @accent !important;
      }

      .tag button {
        background: @accent !important;
        border-color: @accent !important;
      }

      .author {
        color: @subtext0 !important;
      }
      background: @mantle;
    }
  }
}