@import "./dracula";

:root > * {
  // Custom code colors
  --md-code-link-bg-color: hsla(0, 0%, 96%, 1);
  --md-code-link-accent-bg-color: var(--md-code-link-bg-color);
  --md-default-bg-color--trans: rgb(100%, 100%, 100%, 0);

  --md-code-special-bg-color: #{darken(hsl(0, 0%, 96%), 5%)};
  --md-code-alternate-bg-color: var(--md-code-bg-color);

  --md-code-hl-punctuation-color: var(--md-code-fg-color);
  --md-code-hl-namespace-color: var(--md-code-fg-color);

  --md-code-hl-entity-color: var(--md-code-hl-keyword-color);
  --md-code-hl-tag-color: var(--md-code-hl-keyword-color);
  --md-code-hl-builtin-color: var(--md-code-hl-constant-color);
  --md-code-hl-class-color: var(--md-code-hl-function-color);

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

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

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

  &[data-md-color-scheme="slate"] {
    // Custom code colors
    --md-code-link-bg-color: hsla(232, 15%, 15%, 1);
    --md-code-link-accent-bg-color: var(--md-code-link-bg-color);
    --md-code-special-bg-color: #{lighten(hsl(232, 15%, 15%), 5%)};
    --md-default-bg-color--trans: hsla(232,15%,15%, 0);

    // Keys colors
    --md-typeset-kbd-color: var(--md-default-fg-color--lightest);
    --md-typeset-kbd-border-color: #{darken(rgb(46, 48, 62), 9%)};
    --md-typeset-kbd-accent-color: var(--md-default-fg-color--lighter);
  }

  // Dark mode color changes
  &[data-md-color-scheme="dracula"] {
    // Default color shades
    --md-default-fg-color:               #{transparentize($drac-fg, 0.13)};
    --md-default-fg-color--light:        #{transparentize($drac-fg, 0.46)};
    --md-default-fg-color--lighter:      #{transparentize($drac-fg, 0.84)};
    --md-default-fg-color--lightest:     #{transparentize($drac-fg, 0.93)};

    --md-default-bg-color:               var(--md-default-bg-color--darkest);
    --md-default-bg-color--light:        #{transparentize($drac-default-bg, 0.3)};
    --md-default-bg-color--lighter:      #{transparentize($drac-default-bg, 0.7)};
    --md-default-bg-color--lightest:     #{transparentize($drac-default-bg, 0.88)};
    --md-default-bg-color--trans:        #{transparentize($drac-default-bg, 1)};

    // 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: #{$drac-fg};
    --md-code-bg-color: #{$drac-bg};
    --md-code-inline-bg-color: #{lighten($drac-bg, 5%)};
    --md-code-hl-operator-color: #{$drac-pink};
    --md-code-hl-punctuation-color: #{$drac-fg};
    --md-code-hl-string-color: #{$drac-yellow};
    --md-code-hl-special-color: #{$drac-purple};
    --md-code-hl-number-color: #{$drac-purple};
    --md-code-hl-keyword-color: #{$drac-pink};
    --md-code-hl-name-color: #{$drac-fg};
    --md-code-hl-constant-color: #{$drac-purple};
    --md-code-hl-function-color: #{$drac-green};
    --md-code-hl-comment-color: #{$drac-blue};
    --md-code-hl-variable-color: #{$drac-orange};
    --md-code-hl-generic-color: #{$drac-blue};
    --md-code-hl-color: #{$drac-selection};

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

    --md-code-special-bg-color: #{darken($drac-bg, 5%)};
    --md-code-alternate-bg-color: #{tint($drac-bg, 10%)};
    --md-code-link-bg-color: #{mix($drac-cyan, $drac-bg, 15%)};

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

    // Progressbar colors
    --md-progress-stripe: var(--md-default-bg-color--lightest);
    --md-progress-100: #{$drac-green};
    --md-progress-80: #{$drac-light-green};
    --md-progress-60: #{$drac-yellow};
    --md-progress-40: #{$drac-orange};
    --md-progress-20: #{$drac-pink};
    --md-progress-0: #{$drac-red};

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

  // Dark specific colors
  --md-default-bg-color--dark:         #{darken($drac-default-bg, 3%)};
  --md-default-bg-color--darker:       #{darken($drac-default-bg, 6%)};
  --md-default-bg-color--darkest:      #{darken($drac-default-bg, 9%)};
  --md-default-bg-color--ultra-dark:   #{darken($drac-default-bg, 15%)};
}

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

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

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

    --md-primary-code-bg-color:         #{mix($drac-bg, nth($colors, 1), 85%)};
    --md-primary-fg-color:              hsla(#{hex2hsl(nth($colors, 1))}, 1);
    --md-primary-fg-color--transparent: hsla(#{hex2hsl(nth($colors, 1))}, 0.1);
    --md-primary-fg-color--light:       hsla(#{hex2hsl(nth($colors, 2))}, 1);
    --md-primary-fg-color--dark:        hsla(#{hex2hsl(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":         darken($drac-red, 5%),
  "pink":        darken($drac-pink, 5%),
  "purple":      darken($drac-purple, 5%),
  "deep-purple": darken($drac-purple, 5%),
  "blue":        darken($drac-blue, 5%),
  "indigo":      darken($drac-blue, 5%),
  "light-blue":  darken($drac-blue, 5%),
  "cyan":        darken($drac-cyan, 5%),
  "teal":        darken($drac-cyan, 5%),
  "green":       darken($drac-green, 5%),
  "light-green": darken($drac-green, 5%),
  "lime":        darken($drac-green, 5%),
  "yellow":      darken($drac-yellow, 5%),
  "amber":       darken($drac-yellow, 5%),
  "orange":      darken($drac-orange, 5%),
  "deep-orange": darken($drac-orange, 5%)
) {

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