/* ----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|--------------------------------------------------------------------------- */

/*
 * The following CSS variables define the main, public API for styling JupyterLab.
 * These variables should be used by all plugins wherever possible. In other
 * words, plugins should not define custom colors, sizes, etc unless absolutely
 * necessary. This enables users to change the visual theme of JupyterLab
 * by changing these variables.
 *
 * Many variables appear in an ordered sequence (0,1,2,3). These sequences
 * are designed to work well together, so for example, `--jp-border-color1` should
 * be used with `--jp-layout-color1`. The numbers have the following meanings:
 *
 * 0: super-primary, reserved for special emphasis
 * 1: primary, most important under normal situations
 * 2: secondary, next most important under normal situations
 * 3: tertiary, next most important under normal situations
 *
 * Throughout JupyterLab, we are mostly following principles from Google's
 * Material Design when selecting colors. We are not, however, following
 * all of MD as it is not optimized for dense, information rich UIs.
 */

:root {
  /* light to dark for light theme
   * dark to light for dark theme;
   * dark to light for light theme
   * light to dark for dark theme */
  --base16-red0: #e82732;
  --base16-red1: #ec4c55;
  --base16-red2: #f07178;
  --base16-red-extra: #f4969b;
  --base16-orange0: #f34f1f;
  --base16-orange1: #f56e45;
  --base16-orange2: #f78c6c;
  --base16-orange-extra: #f9aa93;
  --base16-yellow0: #ffae19;
  --base16-yellow1: #ffbd42;
  --base16-yellow2: #ffcb6b;
  --base16-yellow-extra: #ffd994;
  --base16-green0: #66da49;
  --base16-green1: #82e16b;
  --base16-green2: #9fe88d;
  --base16-green-extra: #bcefaf;
  --base16-teal0: #12ffc7;
  --base16-teal1: #3bffd0;
  --base16-teal2: #64ffda;
  --base16-teal-extra: #8dffe4;
  --base16-cyan0: #18f7ff;
  --base16-cyan1: #41f9ff;
  --base16-cyan2: #6afaff;
  --base16-cyan-extra: #93fbff;
  --base16-blue0: #3073ff;
  --base16-blue1: #598eff;
  --base16-blue2: #82aaff;
  --base16-blue-extra: #abc6ff;
  --base16-magenta0: #ff012c;
  --base16-magenta1: #ff2a4e;
  --base16-magenta2: #ff5370;
  --base16-magenta-extra: #ff7c92;
  --base16-purple0: #a44edd;
  --base16-purple1: #b570e3;
  --base16-purple2: #c792ea;
  --base16-purple-extra: #d9b4f1;
  --base16-foreground-light: #fff;
  --base16-gray: #969696;
  --base16-gray-dark: #6e6e6e;
  --jp-layout-color0: #1c1c1c;
  --jp-layout-color1: #303030;
  --jp-layout-color2: #454545;
  --jp-layout-color3: #595959;
  --jp-layout-color4: #6e6e6e;
  --jp-layout-color5: #828282;
  --jp-layout-color6: #ababab;
  --jp-inverse-layout-color0: #fff;
  --jp-inverse-layout-color1: #d6d6d6;
  --jp-inverse-layout-color2: #c2c2c2;
  --jp-inverse-layout-color3: #adadad;
  --jp-inverse-layout-color4: #999;
  --jp-inverse-layout-color5: #707070;
  --jp-editor-selected-focused-background: var(--jp-layout-color0);
  --jp-editor-cursor-color: var(--jp-inverse-layout-color0);

  /* Elevation
   *
   * We style box-shadows using Material Design's idea of elevation. These particular numbers are taken from here:
   *
   * https://github.com/material-components/material-components-web
   * https://material-components-web.appspot.com/elevation.html
   */

  /* The dark theme shadows need a bit of work, but this will probably also require work on the core layout
   * colors used in the theme as well. */
  --jp-shadow-base-lightness: 32;
  --jp-shadow-umbra-color: rgb(
    var(--jp-shadow-base-lightness) var(--jp-shadow-base-lightness)
      var(--jp-shadow-base-lightness) / 20%
  );
  --jp-shadow-penumbra-color: rgb(
    var(--jp-shadow-base-lightness) var(--jp-shadow-base-lightness)
      var(--jp-shadow-base-lightness) / 14%
  );
  --jp-shadow-ambient-color: rgb(
    var(--jp-shadow-base-lightness) var(--jp-shadow-base-lightness)
      var(--jp-shadow-base-lightness) / 12%
  );
  --jp-elevation-z0: none;
  --jp-elevation-z1: 0 2px 1px -1px var(--jp-shadow-umbra-color),
    0 1px 1px 0 var(--jp-shadow-penumbra-color),
    0 1px 3px 0 var(--jp-shadow-ambient-color);
  --jp-elevation-z2: 0 3px 1px -2px var(--jp-shadow-umbra-color),
    0 2px 2px 0 var(--jp-shadow-penumbra-color),
    0 1px 5px 0 var(--jp-shadow-ambient-color);
  --jp-elevation-z4: 0 2px 4px -1px var(--jp-shadow-umbra-color),
    0 4px 5px 0 var(--jp-shadow-penumbra-color),
    0 1px 10px 0 var(--jp-shadow-ambient-color);
  --jp-elevation-z6: 0 3px 5px -1px var(--jp-shadow-umbra-color),
    0 6px 10px 0 var(--jp-shadow-penumbra-color),
    0 1px 18px 0 var(--jp-shadow-ambient-color);
  --jp-elevation-z8: 0 5px 5px -3px var(--jp-shadow-umbra-color),
    0 8px 10px 1px var(--jp-shadow-penumbra-color),
    0 3px 14px 2px var(--jp-shadow-ambient-color);
  --jp-elevation-z12: 0 7px 8px -4px var(--jp-shadow-umbra-color),
    0 12px 17px 2px var(--jp-shadow-penumbra-color),
    0 5px 22px 4px var(--jp-shadow-ambient-color);
  --jp-elevation-z16: 0 8px 10px -5px var(--jp-shadow-umbra-color),
    0 16px 24px 2px var(--jp-shadow-penumbra-color),
    0 6px 30px 5px var(--jp-shadow-ambient-color);
  --jp-elevation-z20: 0 10px 13px -6px var(--jp-shadow-umbra-color),
    0 20px 31px 3px var(--jp-shadow-penumbra-color),
    0 8px 38px 7px var(--jp-shadow-ambient-color);
  --jp-elevation-z24: 0 11px 15px -7px var(--jp-shadow-umbra-color),
    0 24px 38px 3px var(--jp-shadow-penumbra-color),
    0 9px 46px 8px var(--jp-shadow-ambient-color);

  /* Borders
   *
   * The following variables, specify the visual styling of borders in JupyterLab.
   */
  --jp-border-width: 1px;
  --jp-border-color0: var(--jp-layout-color1);
  --jp-border-color1: var(--jp-layout-color2);
  --jp-border-color2: var(--jp-layout-color3);
  --jp-border-color3: var(--jp-layout-color5);
  --jp-border-radius: 2px;

  /* UI Fonts
   *
   * The UI font CSS variables are used for the typography all of the JupyterLab
   * user interface elements that are not directly user generated content.
   *
   * The font sizing here is done assuming that the body font size of --jp-ui-font-size1
   * is applied to a parent element. When children elements, such as headings, are sized
   * in em all things will be computed relative to that body size.
   */
  --jp-ui-font-scale-factor: 1.2;
  --jp-ui-font-size0: 0.8333em;
  --jp-ui-font-size1: 13px;

  /* Base font size */
  --jp-ui-font-size2: 1.2em;
  --jp-ui-font-size3: 1.44em;
  --jp-ui-font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica,
    arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  /*
   * Use these font colors against the corresponding main layout colors.
   * In a light theme, these go from dark to light.
   */

  /* Darkening colors */
  --jp-ui-font-color0: var(--jp-inverse-layout-color0);
  --jp-ui-font-color1: var(--jp-inverse-layout-color1);
  --jp-ui-font-color2: var(--jp-inverse-layout-color3);
  --jp-ui-font-color3: var(--jp-inverse-layout-color5);

  /*
   * Use these against the brand/accent/warn/error colors.
   * These will typically go from light to darker, in both a dark and light theme.
   */
  --jp-ui-inverse-font-color0: var(--base16-gray);
  --jp-ui-inverse-font-color1: var(--base16-gray-dark);
  --jp-ui-inverse-font-color2: var(--jp-layout-color6);
  --jp-ui-inverse-font-color3: var(--jp-layout-color5);

  /* Content Fonts
   *
   * Content font variables are used for typography of user generated content.
   *
   * The font sizing here is done assuming that the body font size of --jp-content-font-size1
   * is applied to a parent element. When children elements, such as headings, are sized
   * in em all things will be computed relative to that body size.
   */
  --jp-content-line-height: 1.6;
  --jp-content-font-scale-factor: 1.2;
  --jp-content-font-size0: 0.8333em;
  --jp-content-font-size1: 14px;

  /* Base font size */
  --jp-content-font-size2: 1.2em;
  --jp-content-font-size3: 1.44em;
  --jp-content-font-size4: 1.728em;
  --jp-content-font-size5: 2.0736em;

  /* This gives a magnification of about 125% in presentation mode over normal. */
  --jp-content-presentation-font-size1: 17px;
  --jp-content-heading-line-height: 1;
  --jp-content-heading-margin-top: 1.2em;
  --jp-content-heading-margin-bottom: 0.8em;
  --jp-content-heading-font-weight: 500;

  /* Shades of the default font color */
  --jp-content-font-color0: var(--jp-inverse-layout-color0);
  --jp-content-font-color1: var(--jp-inverse-layout-color1);
  --jp-content-font-color2: var(--jp-inverse-layout-color3);
  --jp-content-font-color3: var(--jp-inverse-layout-color5);
  --jp-content-link-color: var(--md-blue-300);
  --jp-content-font-family: -apple-system, blinkmacsystemfont, 'Segoe UI',
    helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';

  /*
   * Code Fonts
   * Code font variables are used for typography of code and other monospaces content.
   */
  --jp-code-font-size: 12px;
  --jp-code-line-height: 1.3077;

  /* 17px for 15px base */
  --jp-code-padding: 0.385em;

  /* 5px for 15px base */
  --jp-code-font-family-default: input mono, consolas, menlo, monaco,
    'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono',
    'Bitstream Vera Sans Mono', 'Courier New', monospace, serif;
  --jp-code-font-family: var(--jp-code-font-family-default);

  /* This gives a magnification of about 125% in presentation mode over normal. */
  --jp-code-presentation-font-size: 1.25em;

  /* may need to tweak cursor width if you change font size */
  --jp-code-cursor-width0: 2px;

  /* 0.107em; */
  --jp-code-cursor-width1: 3px;

  /* 0.154em; */
  --jp-code-cursor-width2: 6px;

  /* 0.308em; */

  /* Layout
   * The following are the main layout colors use in JupyterLab. In a light
   * theme these would go from light to dark.
   */

  /* Brand - highlighting on cells and active tabs */
  --jp-brand-color0: var(--base16-blue0);
  --jp-brand-color1: var(--base16-blue1);
  --jp-brand-color2: var(--base16-blue2);
  --jp-brand-color3: var(--base16-blue-extra);

  /* Accent */
  --jp-accent-color0: var(--base16-green0);
  --jp-accent-color1: var(--base16-green1);
  --jp-accent-color2: var(--base16-green2);
  --jp-accent-color3: var(--base16-green-extra);

  /* State colors (warn, error, success, info) */
  --jp-warn-color0: var(--base16-yellow0);
  --jp-warn-color1: var(--base16-yellow1);
  --jp-warn-color2: var(--base16-yellow2);
  --jp-warn-color3: var(--base16-yellow-extra);
  --jp-error-color0: var(--base16-red0);
  --jp-error-color1: var(--base16-red1);
  --jp-error-color2: var(--base16-red2);
  --jp-error-color3: var(--base16-red-extra);
  --jp-success-color0: var(--base16-green0);
  --jp-success-color1: var(--base16-green1);
  --jp-success-color2: var(--base16-green2);
  --jp-success-color3: var(--base16-green-extra);
  --jp-info-color0: var(--base16-cyan0);
  --jp-info-color1: var(--base16-cyan1);
  --jp-info-color2: var(--base16-cyan2);
  --jp-info-color3: var(--base16-cyan-extra);

  /* Cell specific styles */
  --jp-cell-padding: 5px;
  --jp-cell-collapser-width: 8px;
  --jp-cell-collapser-min-height: 20px;
  --jp-cell-collapser-not-active-hover-opacity: 0.6;
  --jp-cell-editor-background: var(--jp-layout-color1);
  --jp-cell-editor-border-color: var(--base16-gray-dark);
  --jp-cell-editor-box-shadow: inset 0 0 1px var(--base16-gray-dark);
  --jp-cell-editor-active-background: var(--jp-layout-color1);
  --jp-cell-editor-active-border-color: var(
    --jp-layout-color4
  ); /* var(--base16-gray); */

  --jp-cell-prompt-width: 64px;
  --jp-cell-prompt-font-family: 'Source Code Pro', monospace;
  --jp-cell-prompt-letter-spacing: 0;
  --jp-cell-prompt-opacity: 1;
  --jp-cell-prompt-not-active-opacity: 1;
  --jp-cell-prompt-not-active-font-color: var(--base16-gray);
  --jp-cell-inprompt-font-color: var(
    --jp-brand-color2
  ); /* var(--base16-yellow0); */

  --jp-cell-outprompt-font-color: var(--jp-brand-color3);

  /* Notebook specific styles */
  --jp-notebook-padding: 10px;
  --jp-notebook-select-background: var(--jp-layout-color2);
  --jp-notebook-multiselected-color: var(--jp-layout-color3);

  /* The scroll padding is calculated to fill enough space at the bottom of the
   *notebook to show one single-line cell (with appropriate padding) at the top
   *when the notebook is scrolled all the way to the bottom. We also subtract one
   *pixel so that no scrollbar appears if we have just one single-line cell in the
   *notebook. This padding is to enable a 'scroll past end' feature in a notebook.
   */
  --jp-notebook-scroll-padding: calc(
    100% - var(--jp-code-font-size) * var(--jp-code-line-height) -
      var(--jp-code-padding) - var(--jp-cell-padding) - 1px
  );

  /* Rendermime styles */
  --jp-rendermime-error-background: var(--jp-layout-color0);
  --jp-rendermime-table-row-background: var(--jp-layout-color1);
  --jp-rendermime-table-row-hover-background: rgb(3 169 244 / 20%);

  /* Dialog specific styles */
  --jp-dialog-background: rgb(0 0 0 / 60%);

  /* Console specific styles */
  --jp-console-padding: 10px;

  /* Toolbar specific styles */
  --jp-toolbar-border-color: var(--jp-border-color2);
  --jp-toolbar-micro-height: 8px;
  --jp-toolbar-background: var(--jp-layout-color1);
  --jp-toolbar-box-shadow: 0 0 2px 0 rgb(0 0 0 / 80%);
  --jp-toolbar-header-margin: 4px 4px 0 4px;
  --jp-toolbar-active-background: var(--jp-layout-color0);

  /* Input field styles */
  --jp-input-box-shadow: inset 0 0 1px var(--jp-brand-color2);
  --jp-input-active-background: var(--jp-layout-color0);
  --jp-input-hover-background: var(--jp-layout-color2);
  --jp-input-background: var(--jp-layout-color2);
  --jp-input-border-color: var(--jp-border-color1);
  --jp-input-active-border-color: var(--jp-brand-color1);

  /* General editor styles */
  --jp-editor-selected-background: var(--jp-layout-color1);

  /* Code mirror specific styles
   * https://codemirror.net/
   * https://github.com/codemirror/CodeMirror/blob/master/mode/python/python.js
   * https://github.com/jupyterlab/jupyterlab/tree/dbdefed9db9332381fe4104bdf53ec314451951f/packages/codemirror
   */

  --jp-mirror-editor-atom-color: var(--base16-purple2);

  /* Attribute: attribute tags */
  --jp-mirror-editor-attribute-color: var(--base16-yellow1);

  /* Brackets: parens, brackets, braces */
  --jp-mirror-editor-bracket-color: var(--base16-foreground-light);

  /* Builtin: builtins (print, list, len, range, types) */
  --jp-mirror-editor-builtin-color: var(--base16-yellow2);

  /* Comments */
  --jp-mirror-editor-comment-color: var(--jp-inverse-layout-color3);

  /* Def: `class` and `def` declarations */
  --jp-mirror-editor-def-color: var(--base16-cyan0);

  /* Error: live error detection in cell */
  --jp-mirror-editor-error-color: var(--base16-red1);

  /* Headers in markdown */
  --jp-mirror-editor-header-color: var(
    --base16-foreground-light
  ); /* var(--base16-blue1); */

  --jp-mirror-editor-hr-color: var(--base16-gray);

  /* Keywords: class, def, as, from, import, return, etc */
  --jp-mirror-editor-keyword-color: var(--base16-purple1);

  /* Links in markdown [link](url) */
  --jp-mirror-editor-link-color: var(--base16-blue0);

  /* Meta: @var: decorators, properties */
  --jp-mirror-editor-meta-color: var(--base16-magenta2);

  /* Number: int, float literals */
  --jp-mirror-editor-number-color: var(--base16-orange1);

  /* Operators: +-*\/&|= */
  --jp-mirror-editor-operator-color: var(--base16-cyan-extra);

  /* Property: method names (i.e., pd.`DataFrame`) */
  --jp-mirror-editor-property-color: var(--base16-cyan2);

  /* Punctuation: ??? */
  --jp-mirror-editor-punctuation-color: var(--base16-teal0);

  /* Qualifier: ??? */
  --jp-mirror-editor-qualifier-color: var(
    --base16-magenta0
  ); /* var(--base16-green1); */

  /* Quote: ??? */
  --jp-mirror-editor-quote-color: var(--base16-orange-extra);

  /* Strings */
  --jp-mirror-editor-string-color: var(--base16-green1);
  --jp-mirror-editor-string-2-color: var(--base16-green1);

  /* Tag: ??? */
  --jp-mirror-editor-tag-color: var(--base16-cyan2);

  /* Variable colors
   * variable: most variables in code
   * variable-2: `self` attributes in code; lists in markdown
   * variable-3: ???
   */
  --jp-mirror-editor-variable-color: var(--base16-foreground-light);
  --jp-mirror-editor-variable-2-color: var(--base16-magenta2);
  --jp-mirror-editor-variable-3-color: var(--base16-gray);

  /* obnoxious color for testing
  var(--base16-magenta0); /*
  */

  /* Vega extension styles */
  --jp-vega-background: var(--jp-layout-color6);

  /* Sidebar-related styles */
  --jp-sidebar-min-width: 180px;

  /* Search-related styles */
  --jp-search-toggle-off-opacity: 0.5;
  --jp-search-toggle-hover-opacity: 0.75;
  --jp-search-toggle-on-opacity: 1;

  /* scrollbar related styles. Supports every browser except Edge.
   * On Firefox, only the color settings are respected.
   */
  --jp-scrollbar-background-color: var(--jp-layout-color0);
  --jp-scrollbar-endpad: 3px;

  /* the minimum gap between the thumb and the ends of a scrollbar */
  --jp-scrollbar-thumb-color: 213, 196, 161;

  /* need to specify thumb color as an RGB triplet */
  --jp-scrollbar-thumb-margin: 5px;

  /* the space in between the sides of the thumb and the track */
  --jp-scrollbar-thumb-radius: 9px;

  /* set to a large-ish value for rounded endcaps on the thumb */
}
