@import "../stylus-variables.styl"

$code-foreground = lighten($text-color-3, 5%)
$code-background = alpha($primary-color, 15%)
$code-border-color = lighten($primary-color, 30%)

$dark-code-foreground = lighten($dark-text-color-3, 10%)
$dark-code-background = alpha($primary-color, 15%)
$dark-code-border-color = darken($primary-color, 40%)

$mac-toolbar-background-color = #21252b
$dark-mac-toolbar-background-color = #1f2021


if (hexo-config('code_block') && hexo-config('code_block.highlight_theme') == 'obsidian') {
  $toolbar-foreground = #b5b5b5
  $toolbar-background = #3a3f40
  $highlight-foreground = #faf5d6
  $highlight-background = #273036
  $highlight-gutter-color = #7a979a
  $highlight-gutter-bg-color = #273130
  $highlight-comment = #76888e
  $highlight-red = #ee5758
  $highlight-orange = #ec7600
  $highlight-yellow = #ffcd22
  $highlight-green = #93c763
  $highlight-aqua = #458383
  $highlight-blue = #6e95bd
  $highlight-purple = #b18bb7
  $highlight-deletion = #f39090
  $highlight-addition = #7ccf26
  $shrink-line-foreground = $dark-text-color-4
  $shrink-line-background-1 = rgba(40, 40, 40, 0.9)
  $shrink-line-background-2 = rgba(40, 40, 40, 0.6)


  $dark-toolbar-foreground = darken($toolbar-foreground, 2%)
  $dark-toolbar-background = darken($toolbar-background, 2%)
  $dark-highlight-foreground = darken($highlight-foreground, 10%)
  $dark-highlight-background = darken($highlight-background, 2%)
  $dark-highlight-gutter-color = lighten($highlight-gutter-color, 1%)
  $dark-highlight-gutter-bg-color = darken($highlight-gutter-bg-color, 2%)
  $dark-highlight-comment = $highlight-comment
  $dark-highlight-red = darken($highlight-red, 2%)
  $dark-highlight-orange = darken($highlight-orange, 2%)
  $dark-highlight-yellow = darken($highlight-yellow, 2%)
  $dark-highlight-green = darken($highlight-green, 2%)
  $dark-highlight-aqua = darken($highlight-aqua, 2%)
  $dark-highlight-blue = darken($highlight-blue, 2%)
  $dark-highlight-purple = darken($highlight-purple, 2%)
  $dark-highlight-deletion = darken($highlight-deletion, 20%)
  $dark-highlight-addition = darken($highlight-addition, 20%)
  $dark-shrink-line-foreground = $dark-text-color-4
  $dark-shrink-line-background-1 = rgba(40, 40, 40, 0.9)
  $dark-shrink-line-background-2 = rgba(40, 40, 40, 0.6)
}
else {
  $toolbar-foreground = $text-color-3
  $toolbar-background = $background-color-3
  $highlight-foreground = lighten($text-color-3, 2%)
  $highlight-background = darken($background-color-1, 2%)
  $highlight-gutter-color = lighten($text-color-3, 5%)
  $highlight-gutter-bg-color = darken($background-color-1, 5%)
  $highlight-comment = #8e908c
  $highlight-red = #c82829
  $highlight-orange = #f5871f
  $highlight-yellow = #eab700
  $highlight-green = #718c00
  $highlight-aqua = #3e999f
  $highlight-blue = #4271ae
  $highlight-purple = #8959a8
  $highlight-deletion = #fdd
  $highlight-addition = #dfd
  $shrink-line-foreground = $text-color-4
  $shrink-line-background-1 = rgba(210, 210, 210, 0.9)
  $shrink-line-background-2 = rgba(225, 225, 225, 0.6)


  $dark-toolbar-foreground = $dark-text-color-3
  $dark-toolbar-background = $dark-background-color-3
  $dark-highlight-foreground = lighten($dark-text-color-3, 2%)
  $dark-highlight-background = darken($dark-background-color-1, 8%)
  $dark-highlight-gutter-color = lighten($dark-text-color-3, 5%)
  $dark-highlight-gutter-bg-color = darken($dark-background-color-1, 10%)
  $dark-highlight-comment = #969896
  $dark-highlight-red = #cc6666
  $dark-highlight-orange = #de935f
  $dark-highlight-yellow = #f0c674
  $dark-highlight-green = #b5bd68
  $dark-highlight-aqua = #8abeb7
  $dark-highlight-blue = #81a2be
  $dark-highlight-purple = #b294bb
  $dark-highlight-addition = darken($highlight-addition, 80%)
  $dark-highlight-deletion = darken($highlight-deletion, 75%)
  $dark-shrink-line-foreground = $dark-text-color-4
  $dark-shrink-line-background-1 = rgba(38, 38, 38, 0.9)
  $dark-shrink-line-background-2 = rgba(52, 52, 52, 0.6)
}


code-theme(mode) {
  --toolbar-foreground mode == 'light' ? $toolbar-foreground : $dark-toolbar-foreground
  --toolbar-background mode == 'light' ? $toolbar-background : $dark-toolbar-background
  --code-foreground mode == 'light' ? $code-foreground : $dark-code-foreground
  --code-background mode == 'light' ? $code-background : $dark-code-background
  --code-border-color mode == 'light' ? $code-border-color : $dark-code-border-color
  --highlight-background mode == 'light' ? $highlight-background : $dark-highlight-background
  --highlight-foreground mode == 'light' ? $highlight-foreground : $dark-highlight-foreground
  --highlight-comment mode == 'light' ? $highlight-comment : $dark-highlight-comment
  --highlight-red mode == 'light' ? $highlight-red : $dark-highlight-red
  --highlight-orange mode == 'light' ? $highlight-orange : $dark-highlight-orange
  --highlight-yellow mode == 'light' ? $highlight-yellow : $dark-highlight-yellow
  --highlight-green mode == 'light' ? $highlight-green : $dark-highlight-green
  --highlight-aqua mode == 'light' ? $highlight-aqua : $dark-highlight-aqua
  --highlight-blue mode == 'light' ? $highlight-blue : $dark-highlight-blue
  --highlight-purple mode == 'light' ? $highlight-purple : $dark-highlight-purple
  --highlight-deletion mode == 'light' ? $highlight-deletion : $dark-highlight-deletion
  --highlight-addition mode == 'light' ? $highlight-addition : $dark-highlight-addition
  --highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $dark-highlight-gutter-color
  --highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $dark-highlight-gutter-bg-color
  --mac-toolbar-background-color mode == 'light' ? $mac-toolbar-background-color : $dark-mac-toolbar-background-color
  --shrink-line-foreground mode == 'light' ? $shrink-line-foreground : $dark-shrink-line-foreground
  --shrink-line-background-1 mode == 'light' ? $shrink-line-background-1 : $dark-shrink-line-background-1
  --shrink-line-background-2 mode == 'light' ? $shrink-line-background-2 : $dark-shrink-line-background-2
}


:root {
  code-theme('light')
}

@media (prefers-color-scheme light) {
  :root {
    code-theme('light')
  }
}

@media (prefers-color-scheme dark) {
  :root {
    code-theme('dark')
  }
}

.light-mode {
  code-theme('light')
}

.dark-mode {
  code-theme('dark')
}