/*
 * a11y theme for JavaScript, CSS, and HTML
 * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
 * @author ericwbailey
 */

/*
 * MARK: Setup
 */
 @layer vendor-prism {
  @media (forced-colors: none), (forced-colors: active) {
    :root {
      --prism-a11y-border-radius: 0.3em;
      --prism-a11y-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
      --prism-a11y-line-height: 1.5;
      --prism-a11y-code-block-margin: 0.5em 0;
      --prism-a11y-code-block-padding: 1em;
      --prism-a11y-code-inline-padding: 0.1em;
      --prism-a11y-width-border: 1px;
      --prism-a11y-width-tab: 2;
    }
  }

  @media (forced-colors: none), (forced-colors: active) {
    :root {
      --prism-a11y-color-background: hsla(0, 0%, 17%, 1);
      --prism-a11y-color-text-no-token: hsla(60, 30%, 96%, 1);
      --prism-a11y-color-text-comment: hsla(54, 32%, 75%, 1);
      --prism-a11y-color-text-blue: hsla(180, 100%, 44%, 1);
      --prism-a11y-color-text-green: hsla(80, 75%, 55%, 1);
      --prism-a11y-color-text-gray: hsla(60, 30%, 96%, 1);
      --prism-a11y-color-text-purple: hsla(291, 30%, 83%, 1);
      --prism-a11y-color-text-red: hsla(17, 100%, 74%, 1);
      --prism-a11y-color-text-yellow: hsla(51, 100%, 50%, 1);
      --prism-a11y-plugin-color-border: hsla(51, 100%, 50%, 0.55);
      --prism-a11y-plugin-color-background: hsla(51, 100%, 50%, 0.1);
    }
  }


  @media (forced-colors: none), (forced-colors: active) {
    /*
     * MARK: Theme
     */
    :where(
      code[class*="language-"],
      pre[class*="language-"]
    ) {
      color: var(--prism-a11y-color-text-no-token);
      background: var(--prism-a11y-color-background);
      font-family: var(--prism-a11y-font-family);
      text-align: start;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
      word-wrap: normal;
      line-height: var(--prism-a11y-line-height);

      -moz-tab-size: var(--prism-a11y-width-tab);
      -o-tab-size: var(--prism-a11y-width-tab);
      tab-size: var(--prism-a11y-width-tab);

      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
    }

    /* Code blocks */
    pre[class*="language-"] {
      padding: var(--prism-a11y-code-block-padding);
      margin: var(--prism-a11y-code-block-margin);
      overflow: auto;
      border-radius: var(--prism-a11y-border-radius);
    }

    :where(
      :not(pre) > code[class*="language-"],
      pre[class*="language-"]
    ) {
      background: var(--prism-a11y-color-background);
    }

    /* Inline code */
    :not(pre) > code[class*="language-"] {
      padding: var(--prism-a11y-code-inline-padding);
      border-radius: var(--prism-a11y-border-radius);
      white-space: normal;
    }

    :where(
      .token.comment,
      .token.prolog,
      .token.doctype,
      .token.cdata
    ) {
      color: var(--prism-a11y-color-text-comment);
    }

    .token.punctuation {
      color: var(--prism-a11y-color-text-gray);
    }

    :where(
      .token.property,
      .token.tag,
      .token.constant,
      .token.symbol,
      .token.deleted
    ) {
      color: var(--prism-a11y-color-text-red);
    }

    :where(
      .token.operator,
      .token.entity,
      .token.url,
      .language-css .token.string,
      .style .token.string,
      .token.variable,
      .token.keyword
    ) {
      color: var(--prism-a11y-color-text-blue);
    }

    :where(
      .token.selector,
      .token.attr-name,
      .token.string,
      .token.char,
      .token.builtin,
      .token.inserted
    ) {
      color: var(--prism-a11y-color-text-green);
    }

    :where(
      .token.atrule,
      .token.attr-value,
      .token.function,
      .token.regex,
      .token.important
    ) {
      color: var(--prism-a11y-color-text-yellow);
    }

    :where(
      .token.boolean,
      .token.number,
      .token.keyword
    ) {
      color: var(--prism-a11y-color-text-purple);
    }

    :where(
      .token.important,
      .token.bold
    ) {
      font-weight: bold;
    }

    .token.italic {
      font-style: italic;
    }

    .token.entity {
      cursor: help;
    }


    /*
     * MARK: Plugin support
     */
    /* Line highlight */
    .line-highlight {
      background: var(--prism-a11y-plugin-color-background);
      border-top: var(--prism-a11y-width-border) solid var(--prism-a11y-plugin-color-border);
      border-bottom: var(--prism-a11y-width-border) solid var(--prism-a11y-plugin-color-border);
    }

    /* Line numbers */
    .line-numbers .line-numbers-rows {
      border-right: var(--prism-a11y-width-border) solid var(--prism-a11y-color-text-no-token);
    }

    .line-numbers-rows > span:before {
      color: var(--prism-a11y-color-text-comment);
    }
  }


  /*
   * MARK: Forced color mode support
   */
  @media (forced-colors: active) {
    :root {
      --prism-a11y-color-background: Canvas;
      --prism-a11y-color-text-no-token: CanvasText;
      --prism-a11y-color-text-comment: GrayText;
      --prism-a11y-color-text-blue: LinkText;
      --prism-a11y-color-text-gray: LinkText;
      --prism-a11y-color-text-green: CanvasText;
      --prism-a11y-color-text-purple: CanvasText;
      --prism-a11y-color-text-red: CanvasText;
      --prism-a11y-color-text-yellow: GrayText;
      --prism-a11y-plugin-color-border: LinkText;
      --prism-a11y-plugin-color-background: Canvas;
    }

    :where(
      .token.boolean,
      .token.number,
      .token.keyword
    ) {
      font-weight: bold;
    }
  }
}