/* ==UserStyle==
@name Snapchat Web Catppuccin
@namespace github.com/catppuccin/userstyles/styles/snapchat-web
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/snapchat-web
@version 2025.09.06
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/snapchat-web/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asnapchat-web
@description Soothing pastel theme for Snapchat Web
@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 url-prefix("https://www.snapchat.com/web") {
  :root[theme="dark"] {
    #catppuccin(@darkFlavor);
  }
  :root[theme="light"] {
    #catppuccin(@lightFlavor);
  }

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

    /* Snapchat applies the variables (overrides?) to specific elements so we need to apply to every element (with high specificity) to override those. */
    &,
    body > main#root * {
      --sigMain: @base;
      --sigSurface: @mantle;
      --sigSurfaceRGB: red(@mantle), green(@mantle), blue(@mantle);
      --sigAboveSurface: @crust;
      --sigSurfaceDown: @base;
      --sigSubscreen: @crust;
      --sigTextField: @crust;
      --sigDivider: @surface0;
      --sigDividerLight: @surface0;
      --sigColorBackgroundBorder: @surface0;
      --sigBackgroundPrimary: @base;
      --sigBackgroundSecondary: @mantle;
      --sigBackgroundSecondaryHover: darken(@mantle, 5%);
      --sigBackgroundTertiary: @crust;
      --sigBackgroundMessageHover: @surface1;
      --sigBackgroundMessageSaved: @surface0;
      --sigBackgroundMessageSavedHover: @surface2;
      --sigOverlay: fade(@surface1, 40%);
      --sigOverlayHover: fade(@surface1, 35%);
      --sigBrandSecondary: @accent;
      --sigObject: rgba(255, 255, 255, 0.05);

      --sigTextPrimary: @text;
      --sigButtonOnPrimary: @crust;
      --sigTextSecondary: @subtext0;
      --sigButtonOnSecondary: @subtext0;
      --sigTextTertiary: @subtext1;
      --sigButtonOnTertiary: @subtext1;
      --sigTextNegative: @red;
      --sigButtonOnSuccess: @base;
      --sigButtonOnError: @base;
      --sigButtonOnNegative: @base;
      --sigButtonOnChatSurfaceCalling: @base;
      --sigTextPlayer: @crust;
      --sigButtonGreyHover: darken(@surface0, 5%);
      --sigButtonGreyActive: darken(@surface0, 8%);

      --sigButtonPrimary: @accent;
      --sigButtonPrimaryHover: darken(@accent, 5%);
      --sigButtonPrimaryActive: darken(@accent, 8%);
      --sigButtonSecondary: @surface0;
      --sigButtonSecondaryHover: @surface1;
      --sigButtonSecondaryActive: @surface2;
      --sigButtonNegative: @red;
      --sigButtonError: @red;
      --sigButtonErrorHover: darken(@red, 5%);
      --sigButtonSuccess: @green;
      --sigButtonSuccessHover: darken(@green, 5%);
      --sigIconCalling: @green;
      --sigIconCallingHover: darken(@green, 5%);
      --sigChatSurfaceCalling: @green;
      --sigChatSurfaceCallingDisabled: darken(@green, 20%);
      --sigChatSurfaceCallingHover: darken(@green, 5%);

      --sigChat: @blue;
      --sigChatIcon: @blue;
      --sigSnapWithoutSound: @red;
      --sigSnapWithSound: @mauve;
    }

    // new chat button
    button[title="New Chat"],
    // checkbox to choose camera
    [id*="downshift-"] a,
    // checkbox in new chat popup
    [aria-label="Unselect chosen user"] {
      path[fill="#fff"] {
        fill: @crust;
      }
      // replaces blue fill
      path[fill="#51B7FF"] {
        fill: @accent;
      }
    }

    // new group button
    form > div > div > div[role="searchbox"] button {
      color: @crust;
      path {
        fill: @crust;
      }
    }

    // story reply text
    li button[type="button"].replyText {
      background-color: rgba(30, 30, 30, 0.8);
    }

    // buttons when in call
    [data-projection-id] button {
      --sigColorAlwaysWhite: @surface0;
    }

    // replay button on stories
    img[role="presentation"][src^="blob:"] + div > svg > path[fill="#fff"] {
      fill: @text;
    }
  }
}