/*!
  Theme: a11y-light
  Author: @ericwbailey
  Maintainer: @ericwbailey

  Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
*/
@layer theme {
  :root {
    --code-bg-light: #f6f6f6;
    --code-fg-light: #454545;
    --code-comment-light: #696969;
    --code-red-light: #d91e18;
    --code-orange-light: #aa5d00;
    --code-yellow-light: #aa5d00;
    --code-green-light: #008000;
    --code-blue-light: #007faa;
    --code-purple-light: #7928a1;

    --code-bg-dark: #2b2b2b;
    --code-fg-dark: #f8f8f2;
    --code-comment-dark: #d4d0ab;
    --code-red-dark: #ffa07a;
    --code-orange-dark: #f5ab35;
    --code-yellow-dark: #ffd700;
    --code-green-dark: #abe338;
    --code-blue-dark: #00e0e0;
    --code-purple-dark: #dcc6e0;

    --code-bg: light-dark(var(--code-bg-light), var(--code-bg-dark));
    --code-comment: light-dark(
      var(--code-comment-light),
      var(--code-comment-dark)
    );
    --code-red: light-dark(var(--code-red-light), var(--code-red-dark));
    --code-orange: light-dark(
      var(--code-orange-light),
      var(--code-orange-dark)
    );
    --code-yellow: light-dark(
      var(--code-yellow-light),
      var(--code-yellow-dark)
    );
    --code-green: light-dark(var(--code-green-light), var(--code-green-dark));
    --code-blue: light-dark(var(--code-blue-light), var(--code-blue-dark));
    --code-purple: light-dark(
      var(--code-purple-light),
      var(--code-purple-dark)
    );
  }

  .hljs {
    background: var(--LIGHT, var(--code-bg-light))
      var(--DARK, var(--code-bg-dark)) var(--COLOR, var(--code-bg-dark));
    color: var(--LIGHT, var(--code-fg-light)) var(--DARK, var(--code-fg-dark))
      var(--COLOR, var(--code-fg-dark));
  }

  /* Comment */
  .hljs-comment,
  .hljs-quote {
    color: var(--LIGHT, var(--code-comment-light))
      var(--DARK, var(--code-comment-dark))
      var(--COLOR, var(--code-comment-dark));
  }

  /* Red */
  .hljs-variable,
  .hljs-template-variable,
  .hljs-tag,
  .hljs-name,
  .hljs-selector-id,
  .hljs-selector-class,
  .hljs-regexp,
  .hljs-deletion {
    color: var(--LIGHT, var(--code-red-light)) var(--DARK, var(--code-red-dark))
      var(--COLOR, var(--code-red-dark));
  }

  /* Orange */
  .hljs-number,
  .hljs-built_in,
  .hljs-literal,
  .hljs-type,
  .hljs-params,
  .hljs-meta,
  .hljs-link {
    color: var(--LIGHT, var(--code-orange-light))
      var(--DARK, var(--code-orange-dark)) var(--COLOR, var(--code-orange-dark));
  }

  /* Yellow */
  .hljs-attribute {
    color: var(--LIGHT, var(--code-yellow-light))
      var(--DARK, var(--code-yellow-dark)) var(--COLOR, var(--code-yellow-dark));
  }

  /* Green */
  .hljs-string,
  .hljs-symbol,
  .hljs-bullet,
  .hljs-addition {
    color: var(--LIGHT, var(--code-green-light))
      var(--DARK, var(--code-green-dark)) var(--COLOR, var(--code-green-dark));
  }

  /* Blue */
  .hljs-title,
  .hljs-section {
    color: var(--LIGHT, var(--code-blue-light))
      var(--DARK, var(--code-blue-dark)) var(--COLOR, var(--code-blue-dark));
  }

  /* Purple */
  .hljs-keyword,
  .hljs-selector-tag {
    color: var(--LIGHT, var(--code-purple-light))
      var(--DARK, var(--code-purple-dark)) var(--COLOR, var(--code-purple-dark));
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: bold;
  }

  @media screen and (-ms-high-contrast: active) {
    .hljs-addition,
    .hljs-attribute,
    .hljs-built_in,
    .hljs-bullet,
    .hljs-comment,
    .hljs-link,
    .hljs-literal,
    .hljs-meta,
    .hljs-number,
    .hljs-params,
    .hljs-string,
    .hljs-symbol,
    .hljs-type,
    .hljs-quote {
      color: highlight;
    }

    .hljs-keyword,
    .hljs-selector-tag {
      font-weight: bold;
    }
  }

  pre.hljs {
    --lighten-amount: var(--DARK, 0.2) var(--COLOR, 0.08);
    --lighten: oklch(from var(--bg) calc(l + var(--lighten-amount)) c h);
    --darken: oklch(from var(--bg) calc(l - 0.08) c h);
    --border-color: var(--LIGHT, var(--darken)) var(--DARK, var(--lighten))
      var(--COLOR, var(--lighten));

    border: 1px solid var(--border-color);
  }

  code:not([data-language]) {
    --lighten-amount: var(--DARK, 0.2) var(--COLOR, 0.08);
    --lighten: oklch(from var(--bg) calc(l + var(--lighten-amount)) c h);
    --darken: oklch(from var(--bg) calc(l - 0.08) c h);
    --border-color: var(--LIGHT, var(--darken)) var(--DARK, var(--lighten))
      var(--COLOR, var(--darken));

    background: var(--LIGHT, var(--code-bg-light))
      var(--DARK, var(--code-bg-dark)) var(--COLOR, var(--lighten));
    /* color: var(--LIGHT, var(--code-fg-light)) var(--DARK, var(--code-fg-dark)) */
    /* var(--COLOR, var(--code-fg-dark)); */
    box-shadow: 0 0 0 1px var(--border-color);
  }
}