/* ==UserStyle==
@name Holodex Catppuccin
@namespace github.com/Sebagabones/userstyles/styles/holodex
@homepageURL https://github.com/Sebagabones/userstyles/tree/main/styles/holodex
@version 2025.09.06
@updateURL https://github.com/Sebagabones/userstyles/raw/main/styles/holodex/catppuccin.user.less
@supportURL https://github.com/Sebagabones/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aholodex
@description Soothing pastel theme for Holodex
@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://raw.githubusercontent.com/Sebagabones/userstyles/refs/heads/main/lib/lib.less";

@-moz-document domain("holodex.net") {
  :root:has(.theme--dark) {
    #catppuccin(@darkFlavor);
  }

  :root:has(.theme--light) {
    #catppuccin(@lightFlavor);
  }

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

    --v-anchor-base: @accent;
    --v-primary-base: @accent;
    --v-primary-lighten1: lighten(@accent, 4%);
    --v-primary-lighten2: lighten(@accent, 8%);
    --v-primary-lighten3: lighten(@accent, 9%);
    --v-primary-lighten4: lighten(@accent, 18%);
    --v-primary-lighten5: lighten(@accent, 19%);
    --v-primary-darken1: darken(@accent, 14%);
    --v-primary-darken2: darken(@accent, 31%);
    --v-primary-darken3: darken(@accent, 35%);
    --v-primary-darken4: darken(@accent, 43%);

    --v-accent-base: @accent;
    --v-accent-lighten1: lighten(@accent, 4%);
    --v-accent-lighten2: lighten(@accent, 8%);
    --v-accent-lighten3: lighten(@accent, 9%);
    --v-accent-lighten4: lighten(@accent, 18%);
    --v-accent-lighten5: lighten(@accent, 19%);
    --v-accent-darken1: darken(@accent, 14%);
    --v-accent-darken2: darken(@accent, 31%);
    --v-accent-darken3: darken(@accent, 35%);
    --v-accent-darken4: darken(@accent, 43%);

    --v-secondary-base: @accent;
    --v-secondary-lighten1: lighten(@accent, 4%);
    --v-secondary-lighten2: lighten(@accent, 8%);
    --v-secondary-lighten3: lighten(@accent, 9%);
    --v-secondary-lighten4: lighten(@accent, 18%);
    --v-secondary-lighten5: lighten(@accent, 19%);
    --v-secondary-darken1: darken(@accent, 14%);
    --v-secondary-darken2: darken(@accent, 31%);
    --v-secondary-darken3: darken(@accent, 35%);
    --v-secondary-darken4: darken(@accent, 43%);

    --v-error-base: @red;
    --v-error-lighten1: lighten(@red, 4%);
    --v-error-lighten2: lighten(@red, 8%);
    --v-error-lighten3: lighten(@red, 9%);
    --v-error-lighten4: lighten(@red, 18%);
    --v-error-lighten5: lighten(@red, 19%);
    --v-error-darken1: darken(@red, 14%);
    --v-error-darken2: darken(@red, 31%);
    --v-error-darken3: darken(@red, 35%);
    --v-error-darken4: darken(@red, 43%);

    --v-info-base: @blue;
    --v-info-lighten1: lighten(@blue, 4%);
    --v-info-lighten2: lighten(@blue, 8%);
    --v-info-lighten3: lighten(@blue, 9%);
    --v-info-lighten4: lighten(@blue, 18%);
    --v-info-lighten5: lighten(@blue, 19%);
    --v-info-darken1: darken(@blue, 14%);
    --v-info-darken2: darken(@blue, 31%);
    --v-info-darken3: darken(@blue, 35%);
    --v-info-darken4: darken(@blue, 43%);

    --v-success-base: @green;
    --v-success-lighten1: lighten(@green, 4%);
    --v-success-lighten2: lighten(@green, 8%);
    --v-success-lighten3: lighten(@green, 9%);
    --v-success-lighten4: lighten(@green, 18%);
    --v-success-lighten5: lighten(@green, 19%);
    --v-success-darken1: darken(@green, 14%);
    --v-success-darken2: darken(@green, 31%);
    --v-success-darken3: darken(@green, 35%);
    --v-success-darken4: darken(@green, 43%);

    --v-warning-base: @yellow;
    --v-warning-lighten1: lighten(@yellow, 4%);
    --v-warning-lighten2: lighten(@yellow, 8%);
    --v-warning-lighten3: lighten(@yellow, 9%);
    --v-warning-lighten4: lighten(@yellow, 18%);
    --v-warning-lighten5: lighten(@yellow, 19%);
    --v-warning-darken1: darken(@yellow, 14%);
    --v-warning-darken2: darken(@yellow, 31%);
    --v-warning-darken3: darken(@yellow, 35%);
    --v-warning-darken4: darken(@yellow, 43%);

    --v-background-base: @base;
    --v-background-lighten1: lighten(@base, 4%);
    --v-background-lighten2: lighten(@base, 8%);
    --v-background-lighten3: lighten(@base, 9%);
    --v-background-lighten4: lighten(@base, 18%);
    --v-background-lighten5: lighten(@base, 19%);
    --v-background-darken1: darken(@base, 14%);
    --v-background-darken2: darken(@base, 31%);
    --v-background-darken3: darken(@base, 35%);
    --v-background-darken4: darken(@base, 43%);

    div.v-application {
      background: @base !important;
      color: @text;
    }

    header#top-bar,
    header.v-toolbar,
    div.v-navigation-drawer__content,
    div#bottom-bar,
    div.v-main__wrap > div,
    div.v-select__selections,
    div.v-slide-group__wrapper,
    div.v-bottom-navigation,
    div.v-select__slot,
    div.v-input__slot,
    div.v-overlay__scrim {
      background: @base !important;
    }
    div.v-sheet {
      background: @base;
      border-color: @base;
    }

    .v-btn.v-btn--has-bg:not(.nav-btn) {
      background-color: @surface0 !important;
    }

    .v-list,
    .v-list-item,
    .v-card,
    .v-sheet,
    .v-select__selections,
    .v-label,
    .text--secondary,
    .v-input__slot input {
      color: @text !important;
      path:not([fill*="iid-1"]) {
        fill: @text;
      }
    }

    .v-messages,
    .v-list-item__subtitle,
    .v-tab:not(.v-tab--active) {
      color: @subtext0 !important;
    }

    svg.logo path {
      fill: darken(@accent, 2%) !important;

      &:last-child {
        fill: darken(@blue, 8%) !important;
      }
    }

    .v-chip {
      background: @blue;
    }

    .primary--text,
    .name-vtuber {
      color: @accent !important;
    }

    .text-live {
      color: @red;
    }

    .stream-count-chip {
      color: @crust !important;
    }

    .nav-btn.v-btn--active {
      color: @accent !important;
    }

    div.v-sheet.v-alert {
      background: none !important;
      color: @yellow !important;

      .v-icon path {
        fill: @yellow !important;
      }
    }

    hr {
      border-color: @base;
    }

    // Snack
    div.v-snack {
      color: @text;

      div.v-sheet {
        background: @surface0 !important;
      }

      button.v-btn--text {
        color: @text !important;
      }

      button.v-btn--is-elevated.v-btn--has-bg {
        background: @accent !important;
        color: @base;
      }
    }
  }
}