/**
 * Adapted from:
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

.dark-palette code[class*='language-'],
.dark-palette pre[class*='language-'] {
  color: var(--secondary-color);
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

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

.dark-palette pre[class*='language-'] code[class*='language-'] {
  color: var(--quaternary-color);
}

/* Code blocks */
.dark-palette pre[class*='language-'] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
}

/* Without this, the above selector takes precedence and messes up the answer
padding in night mode */
.dark-palette .video-quiz-option > pre {
  padding: 0;
  margin: 0;
}

.dark-palette :not(pre) > code[class*='language-'],
.dark-palette pre[class*='language-'] {
  background: var(--primary-background);
}

.dark-palette pre[class*='language-']::selection,
.dark-palette pre[class*='language-'] ::selection,
.dark-palette code[class*='language-']::selection,
.dark-palette code[class*='language-'] ::selection {
  background: var(--selection-color);
}

/* Inline code */
.dark-palette :not(pre) > code[class*='language-'] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.dark-palette .token.comment,
.dark-palette .token.block-comment,
.dark-palette .token.prolog,
.dark-palette .token.doctype,
.dark-palette .token.cdata {
  color: #608b4e;
}

.dark-palette .token.punctuation {
  color: #ffff00;
}

.dark-palette .token.tag,
.dark-palette .token.attr-name,
.dark-palette .token.namespace,
.dark-palette .token.deleted {
  color: #e2777a;
}

.dark-palette .token.function-name {
  color: #d4d4d4;
}

.dark-palette .token.boolean,
.dark-palette .token.number,
.dark-palette .token.function {
  color: #569cd6;
}

.dark-palette .token.property,
.dark-palette .token.class-name,
.dark-palette .token.constant,
.dark-palette .token.symbol {
  color: #f8c555;
}

.dark-palette .token.selector,
.dark-palette .token.important,
.dark-palette .token.atrule,
.dark-palette .token.keyword,
.dark-palette .token.builtin {
  color: #569cd6;
}

.dark-palette .token.string,
.dark-palette .token.char,
.dark-palette .token.attr-value,
.dark-palette .token.regex,
.dark-palette .token.variable {
  color: #7ec699;
}

/* CSS code block strings have low contrast in night mode. This attempts to increase contrast above 4.5:1 */
.dark-palette .language-css .token.string,
.dark-palette .style .token.string {
  color: #ec9126;
  background: hsl(0 0% 100% / 0.12);
}

.dark-palette .token.operator,
.dark-palette .token.entity,
.dark-palette .token.url {
  color: #67cdcc;
  background: none;
}

.dark-palette .token.important,
.dark-palette .token.bold {
  font-weight: bold;
}
.dark-palette .token.italic {
  font-style: italic;
}

.dark-palette .token.entity {
  cursor: help;
}

.dark-palette .token.inserted {
  color: green;
}
