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

@-moz-document regexp(
    "^https?:\\/\\/(www|[a-z]{2}).pinterest.(com(.(au|mx))?|co(.(uk|kr))?|at|ca|ch|cl|de|dk|es|fr|ie|it|jp|nz|ph|pt|ru|se)\\/.*"
  ) {
  :root {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
  }

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

    color-scheme: if(@flavor = latte, light, dark);

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

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    --color-text-light: @mantle;
    --color-text-dark: @text;
    --color-text-default: @text;
    --color-text-inverse: @mantle;
    --color-text-subtle: @subtext0;
    --color-text-error: @red;
    --color-text-shopping: @accent;
    --color-text-link: @accent;
    --color-text-formfield-default: @text;

    --color-text-icon-light: @subtext1;
    --color-text-icon-dark: @mantle;
    --color-text-icon-default: @subtext0;
    --color-icon-subtle: @subtext1;
    --color-text-icon-inverse: @mantle;
    --color-text-icon-subtle: @subtext0;
    --color-text-icon-error: @red;
    --color-text-icon-brand-primary: @accent;

    --color-background-light: if((@flavor = latte), @mantle, @subtext1);
    --color-background-dark: if((@flavor = latte), @text, @mantle);
    --color-background-default: @base;
    --color-background-inverse-base: @subtext1;
    --color-background-primary-base: @accent;
    --color-background-secondary-base: @mantle;
    --color-background-secondary-active: @mantle;
    --color-background-selected-base: @subtext1;
    --color-background-box-default: @mantle;
    --color-background-box-selected: @accent;
    --color-background-box-primary: @accent;
    --color-background-box-secondary: @surface0;
    --color-background-box-info-base: @blue;
    --color-background-box-info-weak: fade(@blue, 20%);
    --color-background-overlay: @surface0;
    --color-background-popover-primary: @base;
    --color-background-popover-secondary: @overlay2;
    --color-background-tag-primary-hover: @surface2;
    --color-background-box-light: @base;
    --color-background-button-secondary-default: @surface0;
    --color-background-button-secondary-hover: @surface1;
    --color-background-button-secondary-active: @surface2;
    --color-background-button-selected-default: @subtext1;
    --color-background-button-tertiary-hover: @surface0;
    --color-background-button-shopping-default: @blue;
    --color-background-button-shopping-hover: darken(@blue, 12%);
    --color-background-tag-primary-default: @surface1;
    --color-background-button-disabled-default: @surface0;
    --color-background-formfield-primary: @base;
    --color-background-avatar-placeholder: @mantle;
    --color-background-tabs-default-base: @base;
    --color-background-tabs-default-hover: @surface0;
    --color-background-button-semitransparentwhite-default: fade(@base, 80%);
    --color-background-button-semitransparentwhite-hover: @surface0;
    --color-background-button-semitransparentdefault-default: fade(@surface1, 80%);
    --color-background-button-semitransparentdefault-hover: @surface2;
    --color-background-switch-default-selected: @accent;
    --color-background-switch-default-unselected: @base;
    --color-background-switch-hover-selected: @accent;
    --color-background-switch-hover-unselected: @surface0;
    --color-background-switch-pressed-selected: fade(@accent, 50%);
    --color-background-switch-pressed-unselected: fade(@accent, 50%);  
    --color-background-checkbox-disabled: darken(@mantle, 2%);
    --color-background-checkbox-checked-default: @accent;
    --color-background-checkbox-checked-: @red;
    --color-background-checkbox-unchecked-default: @base;
    --color-background-checkbox-unchecked-: @red;  
    --color-border-container: @surface1;
    --color-border-default: @mantle;
    --color-border-popover-primary: @surface0;
    --color-border-popover-secondary: @text;
    --color-border-focus: fade(@blue, 50%);
    --color-border-switch-default-selected: @surface2;
    --color-border-switch-default-unselected: @surface2;
    --color-border-switch-focus-inner: @surface2;
    --color-border-switch-focus-outer: @surface2;
    --color-border-switch-hover-unselected: @surface2;
    --color-border-switch-pressed-unselected: @surface2; 
    --color-border-checkbox-checked-default: @accent;
    --color-border-checkbox-checked-: @red;
    --color-border-checkbox-disabled: darken(@mantle, 2%);
    --color-border-checkbox-unchecked-default: @surface1;
    --color-border-checkbox-unchecked-: @red;
    --color-border-checkbox-unchecked-hover: @surface2;
    --color-border-checkbox-unchecked-pressed: fade(@accent, 50%);  
    --color-text-success: @green;
    --color-text-warning: @yellow;
    --color-icon-default: @subtext1;
    --color-icon-success: @green;
    --color-icon-warning: @yellow;
    --color-icon-: @red;
    --color-icon-info: @blue;
    --color-icon-recommendation: @mauve;
    --color-icon-brand-primary: @accent;
    --color-icon-inverse: @crust;
    --color-background-brand: @accent;
    --color-background-box-brand: @accent;
    --color-background-button-primary-default: @accent;
    --color-background-button-primary-hover: desaturate(
      darken(@accent, 12%),
      20%
    );
    --color-background-button-primary-active: desaturate(
      darken(@accent, 30%),
      30%
    );
    --color-background-button-white-default: @base;
    --color-background-button-white-hover: @surface0;
    --color-background-badge-warning: @yellow;
    --color-background-badge-success: @green;
    --color-background-education: @blue;
    --color-background-primary-strong: @accent;
    --color-background-shopping: @blue;

    --g-colorTransparentWhite: fade(@base, 70%);
    --g-colorTransparentDarkGray: fade(@mantle, 80%);
    --g-colorGray0: @mantle;
    --g-colorGray0Hovered: darken(@mantle, 2.5%);
    --g-colorGray0Active: darken(@mantle, 5%);
    --g-colorGray50: @mantle;
    --g-colorGray100: @mantle;
    --g-colorGray100Hovered: darken(@surface0, 2.5%);
    --g-colorGray100Active: darken(@surface0, 5%);
    --g-colorGray200: @subtext0;
    --g-colorGray300: @subtext1;
    --g-colorRed100: @accent;
    --g-colorRed100Hovered: darken(@accent, 7.5%);
    --g-colorRed100Active: darken(@accent, 10%);
    --g-color-focus: fade(@accent, 50%);
    --color-gray-roboflow-400: @surface2;
    --color-gray-roboflow-200: @mantle;

    --g-blue: @accent;
    --color-background-info-base: @blue;
    --color-background-error-base: @red;
    --color-background-warning-base: @peach;
    --color-background-success-base: @green;


    body {
      background-color: @base;
      color: @text;
    }

    /* the void (parts not loaded yet) */
    background: @base !important;

    .EmojiPickerReact {
      --epr-bg-color: @base;
      --epr-text-color: @text;
      --epr-picker-border-color: @base;
      --epr-category-label-bg-color: @base;
      --epr-search-input-bg-color: @mantle;
      --epr-skin-tone-picker-menu-color: @mantle;
      --epr-category-icon-active-color: @accent;
      --epr-highlight-color: @accent;
      --epr-hover-bg-color: @surface0;
      --epr-focus-bg-color: @surface0;
    }

    .C1J,
    .LI1.iyn[focus-within],
    .iyn:focus,
    ._gestalt .react-datepicker__month-select:focus,
    ._gestalt .react-datepicker__year-select:focus {
      box-shadow: 0 0 0 4px var(--g-color-focus);
    }

    .NUb {
      color: var(--color-text-inverse);
    }
    // loading screen
    .mainContainer > div[style*="0.5"] {
      background-color: @base !important;
    }

    // Profile button
    // Invite collaborators buttons
    div[style="border: 1px solid white;"],
    div[data-test-id="gestalt-avatar-svg"] {
      outline-color: @base !important;
      border-color: @base !important;

      .WhU {
        background-color: @surface1;
      }
    }

    svg circle[fill="white"] ~ path[fill="#e60023"] {
      fill: @accent !important;
    }

    div#mweb-unauth-container,
    div#mainContainer {
      background-color: @base !important;
    }

    // "Accounts and more options" popup
    div#HeaderAccountOptionsFlyout {
      background-color: @mantle;
      border-color: transparent;
      // external link icons
      .Hn_.Uvi.gUZ {
        color: var(--color-text-icon-light);
      }
    }

    div[role="tooltip"] {
      background-color: @surface0;
      color: @text;
      .B1n {
        color: @text;
      }
    }

    /* Header & Search */

    div[data-test-id="header-Header"] div.P_h span.xnr {
      color: @text !important;
    }

    // search
    div[data-test-id="dynamic-search-placeholder"] > div.Lfz.MIw.zI7.iyn.Hsu {
      &.ojN,
      &.QLY {
        display: none;
      }
    }

    // make top bar match
    div[data-test-id="header-background"] {
      background-color: @base;
    }

    div[data-test-id="one-bar-pill"] {
      div {
        color: @base !important;
      }

      .PLa {
        color: var(--color-text-icon-light) !important;
      }

      .R19 {
        color: var(--color-text-icon-dark) !important;
      }

      &[style*='background-color: rgb(215, 237, 255)'] {
        background-color: @blue !important;
      }
      &[style*='background-color: rgb(218, 212, 255)'] {
        background-color: @mauve !important;
      }
      &[style*='background-color: rgb(255, 226, 235)'] {
        background-color: @pink !important;
      }
      &[style*='background-color: rgb(255, 228, 193)'] {
        background-color: @maroon !important;
      }
      &[style*='background-color: rgb(255, 253, 146)'] {
        background-color: @yellow !important;
      }
      &[style*='background-color: rgb(207, 255, 202)'] {
        background-color: @green !important;
      }
      &[style*='background-color: rgb(218, 255, 246)'] {
        background-color: @teal !important; 
      }
    }

    div[data-test-id='one-bar-pill-cover-image-container'] {
      border-color: transparent !important;
    }
    
    div[data-test-id="one-bar-navigation-arrows"] {
      background: linear-gradient(to left, @base, transparent 40px) !important;
    }

    div[data-test-id="one-bar-module-0"] div[data-test-id="one-bar-pill"] {
      background-color: var(--color-background-box-default) !important;
        svg {
          fill: var(--color-text-icon-subtle) !important;
        }
        &:has(.AR6) {
          background-color: var(--color-background-box-secondary) !important;
        }
    }

    div#searchBoxContainer {
      // search bar
      > div {
        background-color: @mantle !important;
      }

      div[style*="box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px"] {
        box-shadow: 0 0 0 4px var(--g-color-focus) !important;
      }

      input {
        color: @subtext1 !important;
      }

      div.MMh._Y5.feh.s7I.zI7.iyn.Hsu {
        background-color: @surface2 !important;
      }
    }

    // make selected search suggestions darker
    div[aria-selected="true"][data-test-id="search-suggestion"] {
      .C9q.Jea.KS5.Lfz.TMJ.XiG.Zr3.zI7.iyn.Hsu {
        background-color: @surface0;
      }
    }

    /* Home */

    div.moreIdeasBoardRepCarousel
      div[data-carousel-indicator="carousel-card"]
      div.Jea.XiG.hA-.ho-.zI7.iyn.Hsu {
      background-color: @mantle !important;
    }

    div.moreIdeasBoardRepCarousel & ~ div.MIw.QLY.zI7.iyn.Hsu {
      background: none !important;
    }

    /* Nav */

    nav#VerticalNavContent {
      a[data-test-id="home-tab"] div[aria-label="Home"] {
        &[style*="M11.3217 0.307444C11.7345 0.0407477"] {
          @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.322.307a1.25 1.25 0 0 1 1.356 0l9.684 6.256c.356.23.571.625.571 1.05V23.25H1.067V7.613c0-.425.215-.82.571-1.05zM3.567 8.293V20.75h16.866V8.293L12 2.846z" fill="@{subtext1}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.25 16.047V20.5h-.016V23h2.516v-6.953a4.75 4.75 0 1 0-9.5 0V23h2.5v-6.953a2.25 2.25 0 1 1 4.5 0" fill="@{subtext1}"/></svg>');
          background-image: url(~'data:image/svg+xml,@{svg}') !important;
        }
        &[style*="M21.6834 22H2.31659V7.61275"] {
          @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M21.683 22H2.317V7.613L12 1.357l9.683 6.256z" fill="@{subtext1}"/><path d="M2.317 22h-1v1h1zm19.366 0v1h1v-1zm0-14.387h1a1 1 0 0 0-.457-.84zm-19.366 0-.543-.84a1 1 0 0 0-.457.84zM12 1.357l.543-.84a1 1 0 0 0-1.086 0zM2.317 23h19.366v-2H2.317zm20.366-1V7.613h-2V22zM1.317 7.613V22h2V7.613zm20.909-.84L12.543.517l-1.086 1.68 9.684 6.256zM11.457.517 1.774 6.773l1.085 1.68 9.684-6.256z" fill="@{subtext1}"/><path d="M9.25 17.047a2.75 2.75 0 1 1 5.5 0v6.482h-5.5z" fill="@{base}"/></svg>');
          background-image: url(~'data:image/svg+xml,@{svg}') !important;
        }
      }

      a[data-test-id="create-tab"] div[aria-label="Create"] {
        &[style*="M19 3.5H5C4.17157 3.5"] {
          @svg: escape('<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 3.5H5A1.5 1.5 0 0 0 3.5 5v14A1.5 1.5 0 0 0 5 20.5h14a1.5 1.5 0 0 0 1.5-1.5V5A1.5 1.5 0 0 0 19 3.5M5 1a4 4 0 0 0-4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4z" fill="@{subtext1}"/><path d="M13.25 7a1.25 1.25 0 1 0-2.5 0v3.75H7a1.25 1.25 0 1 0 0 2.5h3.75V17a1.25 1.25 0 1 0 2.5 0v-3.75H17a1.25 1.25 0 1 0 0-2.5h-3.75z" fill="@{subtext1}"/></svg>');
          background-image: url("data:image/svg+xml,@{svg}") !important;
        }
        &[style*="M12 4.75C12.6904 4.75"] {
          @svg: escape('<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1a4 4 0 0 0-4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4zm7 3.75c.69 0 1.25.56 1.25 1.25v4.75H18a1.25 1.25 0 1 1 0 2.5h-4.75V18a1.25 1.25 0 1 1-2.5 0v-4.75H6a1.25 1.25 0 1 1 0-2.5h4.75V6c0-.69.56-1.25 1.25-1.25" fill="@{subtext1}"/></svg>');
          background-image: url("data:image/svg+xml,@{svg}") !important;
        }
      }

      div[aria-label*="Notifications"] div[style*="background-image"],
      div[aria-label="Updates"] div[aria-label*="Updates"] {
        &[style*="M16.5 14.227"] {
          @svg: escape('<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 14.227V7a4.5 4.5 0 1 0-9 0v7.227l-.764.737c-.475.458-.89.974-1.233 1.536h12.994a7.7 7.7 0 0 0-1.233-1.536zm4.801 2.273A10 10 0 0 1 22 19H2a10 10 0 0 1 .699-2.5A10.2 10.2 0 0 1 5 13.165V7a7 7 0 1 1 14 0v6.165a10.2 10.2 0 0 1 2.301 3.335M15 21H9q0 .255.041.5A3 3 0 0 0 15 21" fill="@{subtext1}"/></svg>');
          background-image: url("data:image/svg+xml,@{svg}") !important;
        }
        &[style*="clip0_449_32470"] {
          @svg: escape('<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M19 7v6.165A10.1 10.1 0 0 1 22 19H2a10.1 10.1 0 0 1 3-5.835V7a7 7 0 1 1 14 0m-4 14a3 3 0 1 1-6 0z" fill="@{subtext1}"/></g><defs><clipPath id="a"><rect width="24" height="24" fill="@{base}"/></clipPath></defs></svg>');
          background-image: url(~"data:image/svg+xml,@{svg}") !important;
        }
      }

      div[data-test-id="notifications-button"] div[style*="background-image"] {
        &[style*="clip0_800_18532"] {
          @svg: escape('<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><rect width="24" height="24" fill="none"/><path d="m4.683 18.274.166-.619-.404-.496A9.7 9.7 0 0 1 2.25 11c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75a9.7 9.7 0 0 1-3.696-.73l-.549-.224-.521.282-3.555 1.928z" stroke="@{subtext1}" stroke-width="2.5"/><circle cx="6.99219" cy="11.0078" r="1.5" fill="@{subtext1}"/><path d="M13.496 11.008a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" fill="@{subtext1}"/><circle cx="17" cy="11.0078" r="1.5" fill="@{subtext1}"/></g><defs><clipPath id="a"><rect width="24" height="24" fill="@{base}"/></clipPath></defs></svg>');
          background-image: url("data:image/svg+xml,@{svg}") !important;    
        }
        &[style*="clip0_449_32468"] {
          @svg: escape('<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 12.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m-6 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m-6-3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M12 0C5.925 0 1 4.925 1 11c0 2.636.93 5.054 2.476 6.949l-1.46 5.428a.5.5 0 0 0 .733.556l5.081-2.756c1.287.527 2.693.823 4.17.823 6.075 0 11-4.925 11-11S18.075 0 12 0" fill="@{subtext1}"/></g><defs><clipPath id="a"><rect width="24" height="24" fill="@{base}"/></clipPath></defs></svg>');
          background-image: url("data:image/svg+xml,@{svg}") !important;
        }
      }
      
      div[data-test-id="vertical-nav-more-options-button"] div[aria-label="More options"] {
        &[style*="clip0_449_32461"] {
          @svg: escape('<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 7.45v9.1l8 4.57 8-4.57v-9.1l-8-4.57zM12 0 1.5 6v12L12 24l10.5-6V6z" fill="@{subtext1}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6m-5.5 3a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0" fill="@{subtext1}"/></g><defs><clipPath id="a"><rect width="24" height="24" fill="@{base}"/></clipPath></defs></svg>');
          background-image: url("data:image/svg+xml,@{svg}") !important; 
        }
        &[style*="clip0_449_32472"] {
          @svg: escape('<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 16.25a4.25 4.25 0 1 1 0-8.5 4.25 4.25 0 0 1 0 8.5M12 0 1.5 6v12L12 24l10.5-6V6z" fill="@{subtext1}"/></g><defs><clipPath id="a"><rect width="24" height="24" fill="@{base}"/></clipPath></defs></svg>');
          background-image: url("data:image/svg+xml,@{svg}") !important;
        }
      }

      a[data-test-id="today-tab"] div[aria-label="Explore"] {
        &[style*="clip0_449_32453"] {
          @svg: escape('<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.5a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19m0 2.5c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12" fill="@{subtext1}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.384 5.616c.354.354.462.884.277 1.348l-2.917 7.292-.008.019a2.95 2.95 0 0 1-1.677 1.656l-7.11 2.736a1.25 1.25 0 0 1-1.616-1.616l2.735-7.108a2.95 2.95 0 0 1 1.657-1.679l7.31-2.925a1.25 1.25 0 0 1 1.349.277m-4.972 7.74.003-.008 1.841-4.604-4.605 1.842a.45.45 0 0 0-.25.254l-1.724 4.483 4.483-1.725a.45.45 0 0 0 .252-.242" fill="@{subtext1}"/></g><defs><clipPath id="a"><rect width="24" height="24" fill="@{base}"/></clipPath></defs></svg>');
          background-image: url("data:image/svg+xml,@{svg}") !important;
        }    
        &[style*="clip0_449_32464"] {
          @svg: escape('<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M12.867 12.902a1.25 1.25 0 0 0 .001-1.77 1.251 1.251 0 1 0 .001 1.768zm2.27 1.132c-.207.516-.62.923-1.139 1.124L5.62 18.38l3.223-8.376c.2-.52.607-.934 1.124-1.14l8.617-3.447zm5.348-10.52C15.8-1.17 8.201-1.17 3.515 3.515c-4.687 4.688-4.687 12.286 0 16.971 4.686 4.687 12.284 4.687 16.97 0 4.686-4.685 4.686-12.284 0-16.97" fill="@{subtext1}"/></g><defs><clipPath id="a"><rect width="24" height="24" fill="@{base}"/></clipPath></defs></svg>');
          background-image: url("data:image/svg+xml,@{svg}") !important;
        }
      }
    }

    /* Pins */
    
    // image container
    [data-test-id^="closeup-image"] div div {
      background-color: @mantle !important;
    }
    
    // pin icons
    button[data-test-id="feedback-button"],
    div[data-test-id="share-icon-button"] {
      div div {
        background-color: @base;
          &:hover {
            background-color: @surface0;
          }
        }
    }
    
    // board name to save to
    // preview / dropdown
   [data-test-id="PinBetterSaveDropdown"],
    div[data-test-id="boardSelectionDropdown"] {
      .B1n {
        color: var(--color-text-light);
      }
      .AR6 {
        color: var(--color-text-light);
      }
      // background when opened
      .G0a {
        background-color: @subtext0 !important;
      }
    }

    div[data-test-id="pinrep-source-link"] {
      background-color: @base !important;

      a div {
        color: @text !important;
      }
    }

    div[data-test-id="savedInfo"] a {
      background-color: transparent !important;

      div {
        color: var(--color-text-light) !important;
      }
    }

    div[data-test-id="PinTypeIdentifier"] {
      background-color: @base !important;
      color: @text !important;
    }

    div[data-test-id="persistent-one-click-save"] {
      div[style="background-color: rgba(255, 255, 255, 0.85);"] {
        background-color: @mantle !important;
      }

      a {
        background-color: transparent !important;
      }
    }

    div[style="padding-bottom: 100%; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px;"] {
      box-shadow: 0 0 0 1px @crust !important;
    }

    // "Saved to" popup
    div[role="status"],
    div[data-test-id="toast"] {
      // needed for Latte
      .X8m {
        color: @text !important;
      }
      // "Removed from your board" text after pressing undo
      .B1n {
        color: @text !important;
      }
      // popup color
      .b0h {
        background-color: @surface0;
      }
      // undo button
      .a_A {
        background-color: @surface1;
      }
    }

    // back of send and ... buttons on pins
    .NSs {
      background-color: @mantle !important;
    }

    // Save button
    button[aria-label="Save"] {
      // text
      .B1n {
        color: var(--color-text-inverse);
      }
    }

    // Button when saved
    button[aria-label="Pin Saved"] {
      // text
      .B1n {
        color: @text;
      }
      // background
      .kJo {
        background-color: @surface0;
      }
      // border
      .gSJ {
        border-color: transparent;
      }
    }

    // pin editing popout
    // text
    .X8m.zDA.IZT.tBJ.dyH.iFc.j1A.swG {
      color: @text !important;
    }
    // buttons when hovered
    .TzN {
      background-color: @surface0 !important;
    }
    // pin notes
    textarea[id="PinNoteField"] {
      color: @text;
    }

    /* Pin page */

    // pin body shadow
    div[data-test-id="closeup-body-style"] {
      box-shadow: 0 1px 20px 0 fade(@text, 15%) !important;
      background-color: @mantle;
    }

    div[data-test-id="closeup-body-sticky-content"] {
      background-color: @mantle;
    }

    div[data-test-id="closeup-action-items"] {
      background-color: @mantle;
      .imm {
        background-color: @mantle;
      }
    }

    // pin discover bubble
    div[data-test-id="discover-bubble"] div div {
      color: if(@flavor = latte, @base, @text) !important;
    }

    // comment bar
    div[data-test-id='comment-editor-container'] {
      color: @text !important;
    }
    div[data-test-id="inline-comment-composer-container"] {
      border-color: @mantle !important;
      background: @mantle !important;
    }

    div.public-DraftEditorPlaceholder-root {
      color: @subtext1 !important;
    }
    .LJB.Pw5.XgI.fev.ujU.wsz.zI7.iyn.Hsu {
      border-color: @surface0 !important;
    }

    div[data-test-id="more-description-container"],
    div[data-test-id="less-description-container"] {
      background-color: @base !important;
        div:first-child {
            background: linear-gradient(90deg, transparent 0%, @base 100%) !important;
        }
    }

    div[data-test-id="truncated-text"] {
      div[data-test-id="more-button"] {
        background: linear-gradient(
          90deg,
          transparent 0%,
          @base 15%
        ) !important;
      }

      div[style="background: rgb(255, 255, 255);"] {
        background-color: @base !important;
      }
    }

    div[data-test-id="media-viewer-button"],
    div[data-test-id="flashlight-button"],
    div[data-test-id="flashlight"],
    div[data-test-id="shop-button"] {
      background-color: fade(@base, 85%) !important;
    }

    div[data-test-id="flashlight-dot-style"] {
      background-color: var(--color-text-light);
    }

    div[data-test-id="visual-search-cropper"] {
      path.v2cropperHandle {
        fill: var(--color-text-light) !important;
      }

      use.v2cropSection {
        stroke: var(--color-text-light) !important;
      }
    }

    textarea#pinNoteText {
      background-color: transparent;
      color: @subtext1;
      caret-color: @text;
    }
    div[data-test-id="react-button"] {
      .Jea.KS5.mQ8.zI7.iyn.Hsu {
        //background-color: @accent;
        color: @accent;
      }
      div:hover {
        background-color: @surface0 !important;
        border-radius: var(--rounding-circle);
      }
      div div {
        div[style*='background-image: url("https://s.pinimg.com/webapp/reactionHeartOutline-24ab75a6.svg")'] {
          @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="@{text}" d="M5.94 6c.92 0 1.83.37 2.49 1.02L12 10.5l3.57-3.48C16.23 6.37 17.13 6 18.06 6c.49 0 1.2.11 1.85.63.66.53 1.05 1.27 1.09 2.08s-.27 1.57-.86 2.15c-2.51 2.53-8 8.75-8 8.75s-5.49-6.22-8-8.75c-.59-.58-.89-1.34-.86-2.15.04-.81.43-1.55 1.09-2.08C4.73 6.11 5.45 6 5.94 6m12.12-3c-1.66 0-3.33.65-4.58 1.87L12 6.31l-1.48-1.44A6.6 6.6 0 0 0 5.94 3c-1.33 0-2.65.42-3.73 1.29-2.79 2.25-2.94 6.28-.44 8.72 0 0 6.29 7.01 8.48 9.26.47.49 1.11.73 1.75.73s1.28-.24 1.75-.73c2.19-2.25 8.48-9.26 8.48-9.26 2.5-2.43 2.35-6.47-.44-8.72C20.71 3.42 19.39 3 18.06 3"/></svg>');
          background-image: url("data:image/svg+xml,@{svg}") !important;   
        }
        div[style*='background-image: url("https://s.pinimg.com/webapp/loveStatic-31fc2a99.svg")'] {
          @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path fill="@{red}" d="M66.72 17.122 60 23.897l-6.72-6.775c-12.196-12.163-31.975-12.163-44.171 0-12.145 12.209-12.145 32.014 0 44.223L60 111.636l50.891-50.291c12.145-12.209 12.145-32.014 0-44.223C104.793 11.041 96.799 8 88.805 8s-15.987 3.041-22.085 9.122"/><path fill="@{darken(@red, 50%)}" d="M32.727 48.909a8.182 8.182 0 1 0 16.365 0 8.182 8.182 0 0 0-16.365 0m38.182 0a8.18 8.18 0 0 0 8.182 8.182 8.182 8.182 0 1 0 0-16.364 8.18 8.18 0 0 0-8.182 8.182M60 66.8c-5.9 0-11.4-1.3-16.3-3.7.2 8.9 7.4 16 16.3 16s16.2-7.2 16.3-16c-4.9 2.3-10.4 3.7-16.3 3.7"/></svg>');
          background-image: url("data:image/svg+xml,@{svg}") !important;
        }
      }
    }

    // remove "More to explore" bar
    div[data-test-id="related-modules-header"] {
      .Jea.KS5.LCN.X6t.hUC.imm.jzS.mQ8.zI7.iyn.Hsu {
        background-color: transparent;
      }
    }

    /* Video and story pins */

    div[data-test-id="visual-content-container"] video ~ div {
      svg {
        color: var(--color-text-icon-light) !important;
      }

      div[role="progressbar"] > div {
        background-color: var(--color-text-icon-light) !important;
      }
    }

    div[data-test-id="closeup-data-loaded"] div.Jea.Rym.zI7.iyn.Hsu {
      svg,
      span {
        color: var(--color-text-icon-light) !important;
      }
    }

    /* Profile */

    div[data-test-id="profile-board-card"] div,
    div#profileBoardsFeed div[data-test-id="board-card"] div,
    div[style="border: 1px solid white; border-radius: 16px;"] {
      border-color: @crust !important;
    }

    div.SaveButton__background--enabled {
      background-color: @accent !important;
      color: @mantle !important;
    }

    div[data-test-id="savedInfo"] a h3 {
      color: var(--color-text-light) !important;
    }

    a[aria-label="More ideas"] {
      .TzN {
        background-color: @surface0;
      }
    }

    a[aria-label="Organize"] {
      .TzN {
        background-color: @surface0;
      }
    }

    // remove profile bar
    .imm {
      background-color: @base;
    }

    // Hide ugly block around section previews
    .imm[data-test-id^="section"] {
      background-color: transparent;
    }

    /* Settings */

    input[type="checkbox"] ~ div {
      border-color: var(--color-border-switch-default-unselected) !important;
    }

    button[disabled=""] div {
      color: @overlay0 !important;
    }

    div.tBJ.dyH.iFc.sAJ.xnr.tg7.IZT.swG {
      color: var(--color-text-light) !important;
    }

    /* Share */

    div[data-test-id="lego-share-social-bar-auth"] button,
    div[data-test-id="copy-link-share-icon-auth"] div.zI7.iyn.Hsu {
      background-color: transparent !important;
    }

    div[data-test-id="email-share-button-auth"] svg {
      rect {
        fill: @mantle !important;
      }

      path {
        fill: @subtext1 !important;
      }
    }

    div[data-test-id="sharesheet-contact-item-sent-icon"] svg {
      color: @text;
    }

    div[data-test-id="sharesheet-contact-item-button"]
      div[style="background-color: rgb(239, 239, 239); padding-bottom: 100%;"] {
      background-color: @mantle !important;
    }

    /* Messages */

    textarea#messageDraft {
      background-color: transparent;
      color: @subtext1;
      caret-color: @text !important;
    }
    
    textarea[data-gestalt-valid-html="TextArea"] {
      background-color: transparent !important;
    }

    div[data-test-id="add-pin-to-conversation"] {
      div[style="border: 1px solid rgb(218, 218, 218); box-shadow: rgba(0, 132, 255, 0) 0px 0px 0px 4px; padding: 4px 15px; min-height: 48px; width: 100%;"] {
        border-color: @mantle !important;
      }

      div[style="border: 1px solid transparent; box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px; padding: 4px 15px; min-height: 48px; width: 100%;"] {
        box-shadow: 0 0 0 4px var(--g-color-focus) !important;
      }
    }

    /* Create */

    div[style*="background-color: rgba(255, 255, 255, 0.8); margin: 24px 0px 0px; z-index:"] {
      background-color: fade(@base, 80%) !important;
    }

    input#scrape-view-website-link {
      background-color: @base !important;
    }

    div[data-test-id="image-from-search-container"] {
      --color-text-icon-inverse: @subtext1;
    }

    div[data-test-id="storyboard-draft-placeholder-rep"] div.ho-.zI7.iyn.Hsu {
      background-color: @mantle !important;
      background-image: linear-gradient(
        to right,
        @mantle 0%,
        @crust 20%,
        @mantle 40%,
        @mantle 100%
      ) !important;
    }

    div[data-test-id="drafts-container"] {
      --color-text-dark: var(--color-text-default);

      div[style="border-color: rgb(17, 17, 17);"] {
        border-color: @crust !important;
      }
    }

    div[data-test-id="drag-behavior-container"] {
      background-color: @surface1 !important;
    }
      
    div[data-test-id="drag-behavior-container"] div div {
      border-color: @surface2 !important;
    }

    div[data-test-id="drag-behavior-container"] svg {
      color: @subtext1;
    }

    div[data-test-id="storyboard-pin-card-item"] {
      border-color: @crust !important;
    }

    button[data-test-id="board-dropdown-select-button"] {
      background-color: @base !important;

      span {
        color: @subtext1 !important;
      }
    }

    div[data-test-id="storyboard-interest-tags"]
      div[style="background-color: rgb(17, 17, 17);"] {
      background-color: @subtext1 !important;
    }

    div[data-test-id="editor-canvas-container"] div {
      border-color: @accent !important;
    }

    input[data-test-id="storyboard-editor-details-text-size"] {
      background-color: @mantle !important;
      color: @text !important;
      border-color: @crust !important;
    }

    div[data-test-id="storyboard-editor-details-text-color-picker"] {
      input {
        color: @text !important;
        background-color: transparent !important;
      }

      .LJB {
        border-color: @crust !important;
      }

      div[style="height: 40px; box-shadow: rgb(239, 239, 239) 0px 0px 0px 2px inset;"] {
        box-shadow: 0 0 0 2px @crust inset !important;
      }
    }

    div[role="tablist"] button[aria-selected="true"] {
      background-color: @crust !important;
    }

    input[type="text"],
    input[type="search"] {
      color: @text;
    }

    /* Explore */

    // articles
    div[data-test-id="suggested-articles-link"],
    div[data-test-id="shopping-spotlight-article"] {
      div[data-test-id="hero-module-subtitle"] div,
      div[data-test-id="hero-module-title"] h2,
      div[data-test-id="hero-module-title"] h3 {
        color: if(@flavor = latte, @base, @text) !important;
      }
    } 

    // today article header
    div[data-test-id="today-article-header"] {
      div[data-test-id="today-article-subtitle"] div,
      div[data-test-id="today-article-title"] h1 {
        color: if(@flavor = latte, @base, @text) !important;
      }
    }

    /* Login */

    div[data-test-id="signup-default-modal"],
    div[data-test-id="login-modal-default"],
    div[data-test-id="login-modal-mfa"] {
      background-color: @base !important;

      h1 {
        color: @text !important;
      }

      p {
        color: @subtext0 !important;
      }

      button[data-test-id="login-signup-toggle"] {
        color: @accent !important;
      }

      button.red.active {
        background-color: @accent !important;
        color: @crust !important;
      }

      button.red.active:hover,
      button.red.active:focus {
        background-color: darken(@accent, 2.5%) !important;
      }

      span[data-test-id="terms-of-service"],
      div[style="margin-top: 15px; color: rgb(51, 51, 51);"] {
        color: @subtext1 !important;

        a {
          color: @accent !important;
        }
      }
    }

    /* Not logged in */

    div[style="height: 200px; background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%);"] {
      background: linear-gradient(
        fade(@base, 0%) 0%,
        @base 70%
      ) !important;
    }

    div#mweb-unauth-container div.HFo.Jea.KS5._he.zI7.iyn.Hsu,
    div[data-test-id="header"]
      div[style="background-color: rgba(255, 255, 255, 0.95); height: 100%; width: 100%;"] {
      background-color: @base !important;
    }

    span[data-test-id="terms-of-service"] a {
      color: @accent !important;
    }

    div[data-test-id="breadcrumbs-list"] div.MIw.Rym.zI7.iyn.Hsu,
    div[data-test-id="vase-carousel"] div[data-test-id="left-scroll-arrow"] {
      background-image: linear-gradient(
        to left,
        fade(@base, 0%),
        @base
      ) !important;
    }

    div[data-test-id="breadcrumbs-list"] div.MIw.p6V.zI7.iyn.Hsu,
    div[data-test-id="vase-carousel"] div[data-test-id="right-scroll-arrow"] {
      background-image: linear-gradient(
        to right,
        fade(@base, 0%),
        @base
      ) !important;
    }

    div[data-test-id="standard-save-button"] {
      span {
        color: @mantle !important;
      }
      // save button hover
      .vfW {
        background: darken(@accent, 10%) !important;
      }
    }

    /* Other */

    div[data-test-id="public-beta-page"] {
      --color-text-light: @text;
      --color-background-recommendation-weak: @crust;
    }

    div[data-layout-shift-boundary-id="PageContainer"] {
      --color-text-inverse: var(--color-text-light);
    }

    // pin side buttons background
    .XiG.hUC.wYR.zI7.iyn.Hsu {
      background: @base !important;
    }
    // pin external link on hover
    a[rel="noopener noreferrer nofollow"]:has(svg[aria-label="Link"]) {
      div[style^="background-color: rgba(255, 255, 255, 0.9)"] {
        background: @surface0 !important;
      }
      div[style^="background-color: rgb(255, 255, 255)"] {
        background: @surface1 !important;
      }
    }

    // pin  peek variant
    div[data-test-id="peek-variant-shopping-module-container"] {
      div[data-test-id="peek-variant-top-gradient"] {
        background: linear-gradient(0deg, transparent 0%, @base 100%) !important;
      }
      
      div[style*="background: linear-gradient"]:not([data-test-id="peek-variant-top-gradient"]) {
        background: linear-gradient(transparent 0%, @base 100%) !important;
      }
    }

    // pin shopping
    div[data-testid="product-metadata-details-flex"] {
      div[style*='border-top'] {
        border-color: @surface0 !important;
      }
    }

    div[id*="product-sticky-container"] div#imageContainerPerf {
      div[style*="background-image"] {
        &[style*="linear-gradient(rgb(255, 255, 255)"] {
          background: linear-gradient(@base 0%, transparent 90%) !important;
        }
        &[style*="linear-gradient(rgba(255, 255, 255, 0)"] {
          background: linear-gradient(transparent 0%, @base 90%) !important;   
        }
      }
      
      div[data-test-id="outline-box"] {
        box-shadow: @subtext1 0 0 0 2px inset, @base 0 0 0 4px inset !important;
      }
    }

    // "more" buttom
    [aria-label="more"] {
      .NSs {
        background: @surface0;
      }
    }
  }
}

/* deno-fmt-ignore */
@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; };
};