/*******************************************************************************
* master color map. Only the colors that actually differ between light and dark
* themes are specified separately.
*
* NOTE: this theme defines "info == primary" and "warning == secondary"
*/
$pst-semantic-colors: (
  "primary": rgb(69, 157, 185),
  "secondary": rgb(238, 144, 64),
  "info": rgb(69, 157, 185),
  "warning": rgb(238, 144, 64),
  "success": (
    "light": rgb(40, 167, 69),
    "dark": rgb(72, 135, 87),
  ),
  "danger": (
    "light": rgb(220, 53, 69),
    "dark": rgb(203, 70, 83),
  ),
  "text-base": (
    // Black + 50
    "light": rgb(50, 50, 50),
    // White - 50
    "dark": rgb(206, 206, 206),
  ),
  "text-muted": (
    // Twice as far from 0 as base
    "light": rgb(100, 100, 100),
    // Twice as far from 256 as base
    "dark": rgb(166, 166, 166),
  ),
  "shadow": (
    "light": rgb(216, 216, 216),
    "dark": rgb(33, 33, 33),
  ),
  "border": (
    "light": rgb(201, 201, 201),
    "dark": rgb(192, 192, 192),
  ),
  "inline-code": (
    "light": rgb(232, 62, 140),
    "dark": rgb(221, 158, 194),
  ),
  "target": (
    "light": rgb(251, 229, 78),
    "dark": rgb(71, 39, 0),
  ),
  // DEPTH COLORS
  // background: color of the canvas / the furthest back layer
  "background":
    (
      "light": rgb(255, 255, 255),
      "dark": rgb(18, 18, 18),
    ),
  // on-background: provides slight contrast against background
  // (by use of shadows in light theme)
  "on-background":
    (
      "light": rgb(255, 255, 255),
      "dark": rgb(30, 30, 30),
    ),
  // surface: object set above the background (without shadows)
  // Uses JupyterLab cell background colors in light/dark theme
  "surface":
    (
      "light": rgb(245, 245, 245),
      "dark": rgb(33, 33, 33),
    ),
  // on_surface: object on top of surface object (without shadows)
  "on-surface":
    (
      "light": rgb(225, 225, 225),
      "dark": rgb(55, 55, 55),
    ),
);

/*******************************************************************************
* write the color rules for each theme (light/dark)
*
* NOTE: @each {...} is like a for-loop
* https://sass-lang.com/documentation/at-rules/control/each
* and #{...} inserts a variable into a CSS selector or property name
* https://sass-lang.com/documentation/interpolation
*/
@each $mode in (light, dark) {
  html[data-theme="#{$mode}"] {
    @each $name, $value in $pst-semantic-colors {
      // check if this color is defined differently for light/dark
      @if type-of($value) == map {
        $value: map-get($value, $mode);
      }
      --pst-color-#{$name}: #{$value};
    }
    // assign the "duplicate" colors (ones that just reference other variables)
    --pst-color-link: var(--pst-color-primary);
    --pst-color-link-hover: var(--pst-color-secondary);
    // adapt to light/dark-specific content
    @if $mode == "light" {
      .only-dark {
        display: none !important;
      }
    } @else {
      .only-light {
        display: none !important;
      }
      /* Adjust images in dark mode (unless they have class .only-dark or
       * .dark-light, in which case assume they're already optimized for dark
       * mode).
       */
      img:not(.only-dark):not(.dark-light) {
        filter: brightness(0.8) contrast(1.2);
      }
      /* Give images a light background in dark mode in case they have
      *  transparency and black text (unless they have class .only-dark or .dark-light, in
      *  which case assume they're already optimized for dark mode).
      */
      .bd-content img:not(.only-dark):not(.dark-light) {
        background: rgb(255, 255, 255);
        border-radius: 0.25rem;
      }
      // MathJax SVG outputs should be filled to same color as text.
      .MathJax_SVG * {
        fill: var(--pst-color-text-base);
      }
    }
  }
}