/* custom color palette */
/* MkDocsMaterial Color Definitions: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss */
[data-md-color-scheme="ayu"] {
  /* Default color shades */
  --md-default-fg-color:             hsla(0,   0%,  77%, 1);
  --md-default-fg-color--light:      hsla(0,   0%,  77%, 0.62);
  --md-default-fg-color--lighter:    hsla(0,   0%,  77%, 0.32);
  --md-default-fg-color--lightest:   hsla(0,   0%,  77%, 0.12);
  --md-default-bg-color:             hsla(210, 25%, 8%,  1);
  --md-default-bg-color--light:      hsla(210, 25%, 8%,  0.54);
  --md-default-bg-color--lighter:    hsla(210, 25%, 8%,  0.26);
  --md-default-bg-color--lightest:   hsla(210, 25%, 8%,  0.07);

  /* Code color shades */
  --md-code-fg-color:                hsla(34, 100%, 66%, 1);
  --md-code-hl-color-darker:         hsla(20, 100%, 60%, 1);
  --md-code-bg-color:                hsla(212, 21%, 12%, 1);

  /* Code highlighting color shades */
  --md-code-hl-color:                hsla(34, 100%, 66%, .15);
  --md-code-hl-number-color:         #ffee99;
  --md-code-hl-special-color:        #BD63C5;

  /*
  .nc = Name, class
  .ne = Name, exception
  .nf = Name, function
  .nn = Name, namespace
   */
  --md-code-hl-function-color:       #ffee99;

  /*
  .no = Name, constant
  .nb = Name, builtin
  .bp = Name, builtin pseudo
  */
  --md-code-hl-constant-color:       var(--md-code-fg-color);
  --md-code-hl-keyword-color:        #D8A0DF;
  --md-code-hl-string-color:         #b8cc52;
  --md-code-hl-name-color:           var(--md-code-hl-color-darker);
  /* --md-code-hl-name-color:           #36a3d9; */
  --md-code-hl-operator-color:       var(--md-default-fg-color--light);
  --md-code-hl-punctuation-color:    var(--md-default-fg-color--light);
  --md-code-hl-comment-color:        hsl(211, 11%, 41%);
  --md-code-hl-generic-color:        #e6e1cf;
  --md-code-hl-variable-color:       var(--md-code-hl-color-darker);
  --md-code-hl-type-color:           #FFD700;
  --md-typeset-ins-color:            #91b362;
  --md-typeset-del-color:            #d96c75;

  /* Typeset color shades */
  --md-typeset-color:                var(--md-default-fg-color);

  /* Typeset `a` color shades */
  --md-typeset-a-color:              var(--md-primary-fg-color);

  /* Typeset `mark` color shades */
  --md-typeset-mark-color:           hsla(218, 100%, 63%, 0.3); /* hsla(#{hex2hsl($clr-blue-a200)}, 0.3); */

  /* Typeset `kbd` color shades */
  /* --md-typeset-kbd-color:            hsla(var(--md-hue), 15%, 94%, 0.12);  */
  /* --md-typeset-kbd-accent-color:     hsla(var(--md-hue), 15%, 94%, 0.2);   */
  /* --md-typeset-kbd-border-color:     hsla(var(--md-hue), 15%, 14%, 1);     */

  /* Typeset `table` color shades */
  /* --md-typeset-table-color:          hsla(var(--md-hue), 75%, 95%, 0.12);  */

  /* Admonition color shades */
  /* --md-admonition-bg-color:          hsla(var(--md-hue), 0%, 100%, 0.025); */

  /* Footer color shades */
  /* --md-footer-bg-color:              hsla(var(--md-hue), 15%, 12%, 0.87);  */
  /* --md-footer-bg-color--dark:        hsla(var(--md-hue), 15%, 10%, 1);     */
}

/* content area width fixed max */
.md-grid {
  max-width: 1560px;
}
/* content area width stretch to fit */
/* .md-grid {                        */
/*   max-width: initial;             */
/* }                                 */

/* Font adjustments */
/* px2rem($size, $base: 20px) => math.div($size, $base) * 1rem */
/* html {                                                                                                        */
/*   Hack: mkdocs wants to set base `font-size: 62.5%` to base all calculations on `10px`                        */
/*   But Chrome defines minimal `font-size: 12px` if language is Chinese                                         */
/*   so it just doubles `font-size` to use `20px` base; https://github.com/squidfunk/mkdocs-material/issues/911  */
/*   font-size: 125%                                                                                             */
/* }                                                                                                             */
@media screen and (min-width: 100em) {
  /* [screen medium +]: Set base `font-size` to `11px` i.e. `137.5%` */
  html {
    font-size: 137.5%
  }
}
@media screen and (min-width: 125em) {
  /* [screen large +]: Set base `font-size` to `12px` i.e. `150%` */
  html {
    font-size: 137.5%
  }
}
/* body {                       */
/* mkdocs default: px2rem(12px) */
/* font-size: 0.5rem            */
/* }                            */
/* .md-typeset {        */
/*   font-size: 0.7rem; */
/* }                    */

/* Hide images for light mode */
/* img[src$="#only-light"] {  */
/*   display: none;           */
/* }                          */
/* Show images for dark mode  */
/* img[src$="#only-dark"] {   */
/*   display: initial;        */
/* }                          */


/* .highlight .ge {      */
/*   font-style: italic; */
/* }                     */
/* .highlight .gs {      */
/*   font-style: bold;   */
/* }                     */

/*
.k  = Keyword,
.kd = Keyword, declaration
.kn = Keyword, namespace
.kp = Keyword, pseudo
.kr = Keyword, reserved
.kt = Keyword, type
*/
.highlight .kt  {
  color: var(--md-code-hl-type-color);
}