/* ==UserStyle==
@name tangled.org Catppuccin
@description A Catppuccin theme for Tangled, the Atmosphere social coding platform.
@namespace csw.im
@version 1.0.0-dev
@author csw.im <cswimr@csw.im> (https://tangled.org/csw.im)
@homepageURL https://tangled.org/csw.im/tangled-catppuccin
@supportURL https://tangled.org/csw.im/tangled-catppuccin/issues
@license MIT
@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
@var checkbox systemFont "Use System Font" 0
==/UserStyle== */

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

@-moz-document domain("tangled.org") {
  :root {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
    #overrideFont();
  }

  #overrideFont() when (@systemFont = 1) {
    font-family: system-ui;
    .font-mono {
      font-family: monospace, system-ui;
    }
    code {
      font-family: monospace, system-ui;
    }
  }

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

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

    .dark\:bg-gray-900 {
      background-color: @base;
    }

    .dark\:bg-gray-800 {
      background-color: @mantle;
    }

    .dark\:text-red-400 {
      color: @red;
    }

    .dark\:bg-gray-700 {
      background-color: @crust;
    }

    :is(a, h1, .prose, strong, .dark\:text-white) {
      color: @text;
    }

    a:hover {
      color: @subtext0;
    }

    :is(h2, h3, h4, h5, h6, .dark\:text-gray-400) {
      color: @subtext1;
    }

    // signed commits
    .dark\:bg-green-900 {
      background-color: @base;
      border-width: 1px;
      border-color: @green;
      /* border-radius: 2px; */
    }

    .dark\:bg-green-700 {
      background-color: @green;
      color: @mantle;
    }

    .dark\:bg-green-800 {
      background-color: @base;
    }

    .dark\:text-green-400 {
      color: @green;
    }

    .dark\:bg-purple-700 {
      background-color: @mauve;
    }

    // start: ci status icons
    // success
    .dark\:text-green-500 {
      color: @green;
    }
    .dark\:stroke-green-500 {
      stroke: @green;
    }
    // in-progress
    .dark\:stroke-yellow-500 {
      stroke: @yellow;
    }
    // timeout
    .text-orange-500 {
      color: @peach;
    }
    // failed
    .dark\:text-red-500 {
      color: @red;
    }
    .dark\:stroke-red-500 {
      stroke: @red;
    }
    // end: ci status icons

    // start: diff view
    // 50% was a little too hard to see imo
    .dark\:bg-red-800\/50 {
      background-color: fade(@red, 40%);
    }
    .dark\:bg-green-800\/50 {
      background-color: fade(@green, 40%);
    }

    .dark\:bg-red-800\/30 {
      background-color: fade(@red, 15%);
    }
    .dark\:bg-green-800\/30 {
      background-color: fade(@green, 15%);
    }
    // end: diff view

    :is(select, input, textarea, .btn, .btn-group-item.active) {
      color: @text;
      background-color: @base;
      border-color: @crust;
    }

    input::placeholder {
      color: @accent;
    }

    .btn-group-item {
      color: @text;
      background-color: @mantle;
      border-color: @crust;
    }

    .btn-create {
      color: @mantle;
      background-color: @accent;
      border-color: @accent;
    }

    // links, both bare and masked
    .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: @accent;
    }

    // checkboxes
    input[type="checkbox"] {
      background-color: @surface0 !important;
    }
    input[type="checkbox"]:checked {
      background-color: @overlay0 !important;
    }

    // blockquotes
    .prose
      :where(blockquote):not(
        :where([class~="not-prose"], [class~="not-prose"] *)
      ) {
      color: @subtext1;
      border-inline-start-color: @surface0;
    }

    // start: alerts
    details[data-callout="note" i] {
      border-color: @blue;
      > summary {
        color: @blue;
      }
    }
    details[data-callout="tip" i] {
      border-color: @green;
      > summary {
        color: @green;
      }
    }
    details[data-callout="important" i] {
      border-color: @mauve;
      > summary {
        color: @mauve;
      }
    }
    details[data-callout="warning" i] {
      border-color: @yellow;
      > summary {
        color: @yellow;
      }
    }
    details[data-callout="caution" i] {
      border-color: @red;
      > summary {
        color: @red;
      }
    }
    // end: alerts

    // inline code / background color for text within codeblocks
    // make sure background-color here is the same as the below .prose selector's background-color,
    // or the code text will have a different background color than the fenced codeblocks
    code {
      color: @text;
      background-color: @crust;
    }

    // fenced codeblocks with no syntax highlighting set
    .prose
      :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      background-color: @crust;
    }

    // start: syntax highlighting
    .chroma {
      color: @text;
      background-color: @crust;
    }
    :is(.c, .c1, .cm) {
      color: fade(@mauve, 55%);
      font-style: italic;
    }
    :is(.k, .kc, .kd, .kn, .kp, .kr, .nb) {
      color: @mauve;
    }
    :is(.s, .s1, .s2) {
      color: @green;
    }
    :is(.nv, .nf, .nx) {
      color: @blue;
    }
    :is(.o, .p) {
      color: @text;
    }
    :is(.cl, .n, .err) {
      color: @peach;
    }
    .no {
      color: @yellow;
    }
    .kt {
      color: @red;
    }
    // line selections
    .hl {
      background-color: fade(@surface0, 40%);
    }
    // end: syntax highlighting
  }
}