/*
 * syntax.css - maps highlight.js token classes onto theme tokens.
 *
 * highlight.js ships one stylesheet per theme with the colours baked in, which
 * is why the original web part could only ever look like atom-one-dark. Here
 * every token resolves to a --strata-syn-* variable, so switching theme or light/
 * dark switches the highlighting with it and nothing has to be re-imported.
 *
 * Class groupings follow highlight.js 11's own themes so language coverage
 * matches what the library actually emits.
 */

.strata-code .hljs {
  color: var(--strata-code-text);
  background: transparent;
}

.strata-code .hljs-doctag,
.strata-code .hljs-keyword,
.strata-code .hljs-meta .hljs-keyword,
.strata-code .hljs-template-tag,
.strata-code .hljs-template-variable,
.strata-code .hljs-variable.language_ {
  color: var(--strata-syn-keyword);
}

.strata-code .hljs-type,
.strata-code .hljs-class .hljs-title {
  color: var(--strata-syn-type, var(--strata-syn-keyword));
}

.strata-code .hljs-title,
.strata-code .hljs-title.class_,
.strata-code .hljs-title.class_.inherited__,
.strata-code .hljs-title.function_ {
  color: var(--strata-syn-entity);
}

.strata-code .hljs-attr,
.strata-code .hljs-attribute,
.strata-code .hljs-selector-attr,
.strata-code .hljs-selector-class,
.strata-code .hljs-selector-id {
  color: var(--strata-syn-attr, var(--strata-syn-constant));
}

.strata-code .hljs-literal,
.strata-code .hljs-number,
.strata-code .hljs-meta {
  color: var(--strata-syn-constant);
}

.strata-code .hljs-operator {
  color: var(--strata-syn-operator, var(--strata-syn-constant));
}

.strata-code .hljs-variable {
  color: var(--strata-syn-variable);
}

.strata-code .hljs-regexp {
  color: var(--strata-syn-regexp, var(--strata-syn-string));
}

.strata-code .hljs-string,
.strata-code .hljs-meta .hljs-string,
.strata-code .hljs-char.escape_ {
  color: var(--strata-syn-string);
}

.strata-code .hljs-built_in,
.strata-code .hljs-symbol {
  color: var(--strata-syn-builtin);
}

.strata-code .hljs-comment,
.strata-code .hljs-code,
.strata-code .hljs-formula {
  color: var(--strata-syn-comment);
  font-style: var(--strata-syn-comment-style, normal);
}

.strata-code .hljs-name,
.strata-code .hljs-quote,
.strata-code .hljs-selector-tag,
.strata-code .hljs-selector-pseudo {
  color: var(--strata-syn-tag);
}

.strata-code .hljs-property {
  color: var(--strata-syn-property, var(--strata-code-text));
}

.strata-code .hljs-punctuation,
.strata-code .hljs-params {
  color: var(--strata-syn-punctuation, var(--strata-code-text));
}

.strata-code .hljs-tag {
  color: var(--strata-syn-punctuation, var(--strata-code-text));
}

.strata-code .hljs-subst {
  color: var(--strata-code-text);
}

.strata-code .hljs-section {
  color: var(--strata-syn-section, var(--strata-syn-constant));
  font-weight: 700;
}

.strata-code .hljs-bullet {
  color: var(--strata-syn-bullet, var(--strata-syn-variable));
}

.strata-code .hljs-link {
  color: var(--strata-syn-link, var(--strata-link));
  text-decoration: underline;
}

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

.strata-code .hljs-strong {
  font-weight: 700;
}

/* Diff blocks: tint the whole line so additions and deletions stay legible
   even when the foreground colour is close to the body text. */
.strata-code .hljs-addition {
  display: inline-block;
  width: 100%;
  color: var(--strata-syn-addition);
  background-color: var(--strata-syn-addition-bg);
}

.strata-code .hljs-deletion {
  display: inline-block;
  width: 100%;
  color: var(--strata-syn-deletion);
  background-color: var(--strata-syn-deletion-bg);
}