/* a11y theme */
/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
/* @author: ericwbailey */

/*
 * MARK: Setup
 */
@layer vendor-highlight {
  @media (forced-colors: none), (forced-colors: active) {
    :root {
      --highlight-a11y-code-block-padding: 0.5em;

      --highlight-a11y-color-background: hsla(0, 0%, 100%, 1);
      --highlight-a11y-color-text-no-token: hsla(0, 0%, 33%, 1);
      --highlight-a11y-color-text-comment: hsla(16, 100%, 25%, 1);
      --highlight-a11y-color-text-blue: hsla(195, 100%, 30%, 1);
      --highlight-a11y-color-text-green: hsla(120, 100%, 25%, 1);
      --highlight-a11y-color-text-orange: hsla(33, 100%, 33%, 1);
      --highlight-a11y-color-text-purple: hsla(282, 100%, 41%, 1);
      --highlight-a11y-color-text-red: hsla(2, 80%, 47%, 1);
      --highlight-a11y-color-text-yellow: hsla(43, 74%, 30%, 1);
    }
  }


  @media (forced-colors: none), (forced-colors: active) {
    /*
     * MARK: Theme
     */
    /* Comment */
    :where(
      .hljs-comment,
      .hljs-quote
    ) {
      color: var(--highlight-a11y-color-text-comment);
    }

  /* Red */
  :where(
    .hljs-variable,
    .hljs-template-variable,
    .hljs-tag,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class,
    .hljs-regexp,
    .hljs-deletion
    ) {
      color: var(--highlight-a11y-color-text-red);
    }

  /* Orange */
  :where(
    .hljs-number,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-literal,
    .hljs-type,
    .hljs-params,
    .hljs-meta,
    .hljs-link
    ) {
      color: var(--highlight-a11y-color-text-orange);
    }

    /* Yellow */
    :where( 
      .hljs-attribute 
    ) {
      color: var(--highlight-a11y-color-text-yellow);
    }

    /* Green */
    :where( 
      .hljs-string,
      .hljs-symbol,
      .hljs-bullet,
      .hljs-addition 
    ) {
      color: var(--highlight-a11y-color-text-green);
    }

    /* Blue */
    :where( 
    .hljs-title,
    .hljs-section 
    ) {
      color: var(--highlight-a11y-color-text-blue);
    }

    /* Purple */
    :where( 
      .hljs-keyword,
      .hljs-selector-tag 
    ) {
      color: var(--highlight-a11y-color-text-purple);
    }

    :where( 
      .hljs
    ) {
      display: block;
      overflow-x: auto;
      background: var(--highlight-a11y-color-background);
      color: var(--highlight-a11y-color-text-no-token);
      padding: var(--highlight-a11y-code-block-padding);
    }

    :where( 
      .hljs-emphasis 
    ) {
      font-style: italic;
    }

    :where( 
      .hljs-strong 
    ) {
      font-weight: bold;
    }
  }


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

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