@use "sass:color";
@use "../utilities/convert";
@use "../utilities/color_tools";
@use "./material_color";
@use "./dracula";
@use "sass:list";

:root > * {
  // Custom code colors
  --md-default-bg-color--trans: rgb(100%, 100%, 100%, 0);
  --md-tab-control-bg: var(--md-default-bg-color);

  // Code colors
  --md-code-fg-color: #{dracula.$alucard-fg};
  --md-code-bg-color: #{dracula.$alucard-bg};
  --md-code-title-bg-color: #{dracula.$alucard-bg};
  --md-code-inline-bg-color: #{dracula.$alucard-bg};
  --md-code-hl-operator-color: #{dracula.$alucard-pink};
  --md-code-hl-punctuation-color: #{dracula.$alucard-fg};
  --md-code-hl-string-color: #{dracula.$alucard-yellow};
  --md-code-hl-special-color: #{dracula.$alucard-purple};
  --md-code-hl-number-color: #{dracula.$alucard-purple};
  --md-code-hl-keyword-color: #{dracula.$alucard-pink};
  --md-code-hl-name-color: #{dracula.$alucard-fg};
  --md-code-hl-constant-color: #{dracula.$alucard-purple};
  --md-code-hl-function-color: #{dracula.$alucard-green};
  --md-code-hl-comment-color: #{dracula.$alucard-comment};
  --md-code-hl-variable-color: #{dracula.$alucard-orange};
  --md-code-hl-generic-color: #{dracula.$alucard-comment};
  --md-code-hl-color: #{dracula.$alucard-selection};
  --md-code-hl-color--light: #{dracula.$alucard-highlight};

  // Custom code colors
  --md-code-hl-entity-color: #{dracula.$alucard-green};
  --md-code-hl-tag-color: #{dracula.$alucard-pink};
  --md-code-hl-namespace-color: #{dracula.$alucard-fg};
  --md-code-hl-builtin-color: #{dracula.$alucard-cyan};
  --md-code-hl-class-color: #{dracula.$alucard-cyan};

  --md-code-special-bg-color: #{dracula.$alucard-highlight};

  // List steps
  --md-steps-bg-color: var(--md-code-bg-color);
  --md-steps-fg-color: var(--md-code-fg-color);
  --md-steps-border-color: hsla(0, 0%, 75%, 1);

  // Various Material related color variables
  --md-typeset-a-color: #{material_color.$clr-cyan-500};

  // Progressbar colors
  --md-progress-stripe: var(--md-default-bg-color--lighter);
  --md-progress-100: #{material_color.$clr-green-a400};
  --md-progress-80: #{material_color.$clr-green-a400};
  --md-progress-60: #{material_color.$clr-yellow-700};
  --md-progress-40: #{material_color.$clr-orange-a400};
  --md-progress-20: #{material_color.$clr-red-a200};
  --md-progress-0: #{material_color.$clr-red-a400};

  // Keys colors
  --md-typeset-kbd-color: #{color_tools.shade(hsla(0, 100%, 100%, 1), 8%)};
  --md-typeset-kbd-border-color: #{color_tools.shade(hsla(0, 100%, 100%, 1), 28%)};
  --md-typeset-kbd-accent-color: hsla(0, 100%, 100%, 1);

  // Dark mode color changes
  &[data-md-color-scheme="slate"] {
    // Default color shades
    --md-default-fg-color:               #{color.adjust(dracula.$drac-fg, $alpha: -0.13)};
    --md-default-fg-color--light:        #{color.adjust(dracula.$drac-fg, $alpha: -0.46)};
    --md-default-fg-color--lighter:      #{color.adjust(dracula.$drac-fg, $alpha: -0.64)};
    --md-default-fg-color--lightest:     #{color.adjust(dracula.$drac-fg, $alpha: -0.88)};
    --md-default-autocomplete-fg-color:  #{color.adjust(dracula.$drac-fg, $alpha: -0.60)};
    --md-shadow-z2:                      0 #{convert.px2rem(4px)} #{convert.px2rem(10px)} hsla(0, 0%, 0%, 0.3),
                                         0 0                      #{convert.px2rem(1px)}  hsla(0, 0%, 0%, 0.2);

    --md-footer-fg-color: var(--md-default-fg-color);

    --md-default-bg-color:               var(--md-default-bg-color--darkest);
    --md-default-bg-color--light:        #{color.adjust(color.mix(color(srgb 0 0 0), dracula.$drac-bg, 25%, $method: oklab), $alpha: -0.3)};
    --md-default-bg-color--lighter:      #{color.adjust(color.mix(color(srgb 0 0 0), dracula.$drac-bg, 25%, $method: oklab), $alpha: -0.6)};
    --md-default-bg-color--lightest:     #{color.adjust(color.mix(color(srgb 0 0 0), dracula.$drac-bg, 25%, $method: oklab), $alpha: -0.9)};
    --md-default-bg-color--trans:        #{color.adjust(color.mix(color(srgb 0 0 0), dracula.$drac-bg, 25%, $method: oklab), $alpha: -1)};

    --md-tab-control-bg: var(--md-default-bg-color--dark);

    // Dark specific colors
    --md-default-bg-color--dark:         #{color.mix(color(srgb 0 0 0), dracula.$drac-bg, 5%, $method: oklab)};
    --md-default-bg-color--darker:       #{color.mix(color(srgb 0 0 0), dracula.$drac-bg, 10%, $method: oklab)};
    --md-default-bg-color--darkest:      #{color.mix(color(srgb 0 0 0), dracula.$drac-bg, 25%, $method: oklab)};

    // General text
    --md-text-color: var(--md-default-fg-color);
    --md-typeset-color: var(--md-default-fg-color);

    // Admonition colors
    --md-admonition-fg-color: var(--md-default-fg-color);

    // Code colors
    --md-code-fg-color: #{dracula.$drac-fg};
    --md-code-bg-color: #{dracula.$drac-bg};
    --md-code-title-bg-color: #{dracula.$drac-bg};
    --md-code-inline-bg-color: #{dracula.$drac-bg};
    --md-code-hl-operator-color: #{dracula.$drac-pink};
    --md-code-hl-punctuation-color: #{dracula.$drac-fg};
    --md-code-hl-string-color: #{dracula.$drac-yellow};
    --md-code-hl-special-color: #{dracula.$drac-purple};
    --md-code-hl-number-color: #{dracula.$drac-purple};
    --md-code-hl-keyword-color: #{dracula.$drac-pink};
    --md-code-hl-name-color: #{dracula.$drac-fg};
    --md-code-hl-constant-color: #{dracula.$drac-purple};
    --md-code-hl-function-color: #{dracula.$drac-green};
    --md-code-hl-comment-color: #{dracula.$drac-comment};
    --md-code-hl-variable-color: #{dracula.$drac-orange};
    --md-code-hl-generic-color: #{dracula.$drac-comment};
    --md-code-hl-color: #{dracula.$drac-selection};
    --md-code-hl-color--light: #{dracula.$drac-highlight};
    --md-code-bg-color--light: #{color.change(dracula.$drac-bg, $alpha: 0.9)};
    --md-code-bg-color--lighter: #{color.change(dracula.$drac-bg, $alpha: 0.5)};

    // Custom code colors
    --md-code-hl-entity-color: #{dracula.$drac-green};
    --md-code-hl-tag-color: #{dracula.$drac-pink};
    --md-code-hl-namespace-color: #{dracula.$drac-fg};
    --md-code-hl-builtin-color: #{dracula.$drac-cyan};
    --md-code-hl-class-color: #{dracula.$drac-cyan};

    --md-code-special-bg-color: #{dracula.$drac-highlight};

    // List steps
    --md-steps-border-color: #{color.adjust(dracula.$drac-bg, $lightness: 10%, $space: oklab)};

    // Various Material related color variables
    --md-typeset-a-color: #{dracula.$drac-cyan};
    --md-typeset-mark-color: #{color.mix(dracula.$drac-yellow, dracula.$drac-bg, 35%, $method: oklab)};
    --md-typeset-del-color: #{color.mix(dracula.$drac-pink, dracula.$drac-bg, 35%, $method: oklab)};
    --md-typeset-ins-color: #{color.mix(dracula.$drac-green, dracula.$drac-bg, 35%, $method: oklab)};

    // Progressbar colors
    --md-progress-stripe: var(--md-default-bg-color--lightest);

    --md-progress-100: #{dracula.$drac-green};
    --md-progress-80: #{color.mix(dracula.$drac-green, dracula.$drac-yellow, $method: oklab)};
    --md-progress-60: #{dracula.$drac-yellow};
    --md-progress-40: #{dracula.$drac-orange};
    --md-progress-20: #{dracula.$drac-pink};
    --md-progress-0: #{dracula.$drac-red};

    // Keys colors
    --md-typeset-kbd-color: var(--md-default-fg-color--lightest);
    --md-typeset-kbd-border-color: var(--md-default-bg-color--dark);
    --md-typeset-kbd-accent-color: var(--md-default-fg-color--lighter);
  }
}

// ----------------------------------------------------------------------------
// Rules: primary colors
// ----------------------------------------------------------------------------

@each $name, $colors in (
  "red":         dracula.$drac-red         color.adjust(dracula.$drac-red, $lightness: 5%)   color.adjust(dracula.$drac-red, $lightness: -5%),
  "pink":        dracula.$drac-pink        color.adjust(dracula.$drac-pink, $lightness: 5%)   color.adjust(dracula.$drac-pink, $lightness: -5%),
  "purple":      dracula.$drac-purple      color.adjust(dracula.$drac-purple, $lightness: 5%)   color.adjust(dracula.$drac-purple, $lightness: -5%),
  "deep-purple": dracula.$drac-purple      color.adjust(dracula.$drac-purple, $lightness: 5%)   color.adjust(dracula.$drac-purple, $lightness: -5%),
  "blue":        dracula.$drac-blue        color.adjust(dracula.$drac-blue, $lightness: 5%)   color.adjust(dracula.$drac-blue, $lightness: -5%),
  "indigo":      dracula.$drac-blue        color.adjust(dracula.$drac-blue, $lightness: 5%)   color.adjust(dracula.$drac-blue, $lightness: -5%),
  "light-blue":  dracula.$drac-blue        color.adjust(dracula.$drac-blue, $lightness: 5%)   color.adjust(dracula.$drac-blue, $lightness: -5%),
  "cyan":        dracula.$drac-cyan        color.adjust(dracula.$drac-cyan, $lightness: 5%)   color.adjust(dracula.$drac-cyan, $lightness: -5%),
  "teal":        dracula.$drac-cyan        color.adjust(dracula.$drac-cyan, $lightness: 5%)   color.adjust(dracula.$drac-cyan, $lightness: -5%),
  "green":       dracula.$drac-green       color.adjust(dracula.$drac-green, $lightness: 5%)   color.adjust(dracula.$drac-green, $lightness: -5%),
  "light-green": dracula.$drac-green       color.adjust(dracula.$drac-green, $lightness: 5%)   color.adjust(dracula.$drac-green, $lightness: -5%),
  "lime":        dracula.$drac-green       color.adjust(dracula.$drac-green, $lightness: 5%)   color.adjust(dracula.$drac-green, $lightness: -5%),
  "yellow":      dracula.$drac-yellow      color.adjust(dracula.$drac-yellow, $lightness: 5%)   color.adjust(dracula.$drac-yellow, $lightness: -5%),
  "amber":       dracula.$drac-yellow      color.adjust(dracula.$drac-yellow, $lightness: 5%)   color.adjust(dracula.$drac-yellow, $lightness: -5%),
  "orange":      dracula.$drac-orange      color.adjust(dracula.$drac-orange, $lightness: 5%)   color.adjust(dracula.$drac-orange, $lightness: -5%),
  "deep-orange": dracula.$drac-orange      color.adjust(dracula.$drac-orange, $lightness: 5%)   color.adjust(dracula.$drac-orange, $lightness: -5%)
) {

  // Color palette
  [data-md-color-scheme="slate"][data-md-color-primary="#{$name}"],
  [data-md-color-scheme="slate"] :not([data-md-color-scheme])[data-md-color-primary="#{$name}"]
   {

    --md-primary-code-bg-color:         #{color.mix(dracula.$drac-bg, list.nth($colors, 1), 85%, $method: oklab)};
    --md-primary-fg-color:              hsla(#{convert.hex2hsl(list.nth($colors, 1))}, 1);
    --md-primary-fg-color--transparent: hsla(#{convert.hex2hsl(list.nth($colors, 1))}, 0.2);
    --md-primary-fg-color--light:       hsla(#{convert.hex2hsl(list.nth($colors, 2))}, 1);
    --md-primary-fg-color--dark:        hsla(#{convert.hex2hsl(list.nth($colors, 3))}, 1);
    --md-primary-bg-color:              var(--md-default-bg-color);
    --md-primary-bg-color--light:       var(--md-default-bg-color--light);
  }
}

// ----------------------------------------------------------------------------
// Rules: accent colors
// ----------------------------------------------------------------------------

@each $name, $color in (
  "red":         dracula.$drac-red,
  "pink":        dracula.$drac-pink,
  "purple":      dracula.$drac-purple,
  "deep-purple": dracula.$drac-purple,
  "blue":        dracula.$drac-blue,
  "indigo":      dracula.$drac-blue,
  "light-blue":  dracula.$drac-blue,
  "cyan":        dracula.$drac-cyan,
  "teal":        dracula.$drac-cyan,
  "green":       dracula.$drac-green,
  "light-green": dracula.$drac-green,
  "lime":        dracula.$drac-green,
  "yellow":      dracula.$drac-yellow,
  "amber":       dracula.$drac-yellow,
  "orange":      dracula.$drac-orange,
  "deep-orange": dracula.$drac-orange
) {

  // Color palette
  [data-md-color-scheme="slate"][data-md-color-accent="#{$name}"],
  [data-md-color-scheme="slate"] :not([data-md-color-scheme])[data-md-color-primary="#{$name}"] {
    --md-code-link-accent-bg-color:    #{color.mix($color, dracula.$drac-bg, 15%, $method: oklab)};
    --md-accent-fg-color:              hsla(#{convert.hex2hsl($color)}, 1);
    --md-accent-fg-color--transparent: hsla(#{convert.hex2hsl($color)}, 0.2);
    --md-accent-bg-color:              var(--md-default-bg-color);
    --md-accent-bg-color--light:       var(--md-default-bg-color--light);
  }
}
