/**
 * Essence's Prism Theme, based on Material Theme, but brighter.
 *
 * Author: Leo Nguyen
 */
:root {
  --prism-bg:     hsl(220, 15%, 20%);
  --prism-gray:   hsl(210, 30%, 65%);
  --prism-red:    hsl(0, 100%, 80%);
  --prism-orange: hsl(30, 100%, 75%);
  --prism-yellow: hsl(50, 90%, 70%);
  --prism-green:  hsl(100, 80%, 80%);
  --prism-cyan:   hsl(190, 100%, 80%);
  --prism-blue:   hsl(220, 100%, 85%);
  --prism-purple: hsl(275, 100%, 80%);
}

/*.prism-theme-material {
  --prism-bg:     #263238;
  --prism-gray:   #546e7a;
  --prism-red:    #f07178;
  --prism-orange: #f78c6c;
  --prism-yellow: #ffcb6b;
  --prism-green:  #c3e88d;
  --prism-cyan:   #89ddff;
  --prism-blue:   #82aaff;
  --prism-purple: #c792ea;
}*/

pre {
  margin: 0.5rem 0 1rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background: var(--prism-bg);
  line-height: 1.5;
  overflow: auto;
  white-space: pre;
  word-spacing: normal;
  tab-size: 4;
  hyphens: none;

  code {
    padding: 0;
    color: #fff;
    background: var(--prism-bg);
  }
}

div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
  padding: 0.5em 1em;
  margin: 0.25em 0.5em;
  font-size: 0.9em;
  color: #eee;
}

.token {
  /* Red (constant, tag, selector) */
  &.constant,
  &.tag,
  &.selector,
  &.namespace,
  &.deleted {
    color: var(--prism-red);
  }

  /* Orange/Red (number, boolean, constant) */
  &.number,
  &.boolean {
    color: var(--prism-orange);
  }

  /* Yellow (entity, class) */
  &.entity,
  &.class,
  &.name,
  &.class-name,
  &.package,
  &.scope,
  &.attr-name {
    color: var(--prism-yellow);
  }

  /* Green (string, attribute) */
  &.string,
  &.char,
  &.property,
  &.attr-value,
  &.regex {
    color: var(--prism-green);
  }

  /* Cyan (symbol) */
  &.symbol,
  &.punctuation,
  &.operator,
  &.url,
  &.unit,
  &.hexcode,
  &.doctype-tag {
    color: var(--prism-cyan);
  }

  /* Blue (function) */
  &.function-name,
  &.function {
    color: var(--prism-blue);
  }

  /* Purple (keyword) */
  &.keyword,
  &.important,
  &.builtin,
  &.atrule {
    color: var(--prism-purple);
  }

  /* White (variable, CSS pseudo class) */
  &.variable,
  &.pseudo-class {
    color: #fff;
  }

  /* Gray (comment) */
  &.comment,
  &.block-comment,
  &.prolog,
  &.doctype,
  &.cdata {
    color: var(--prism-gray);
  }

  // &.important,
  &.bold {
    font-weight: bold;
  }

  &.italic {
    font-style: italic;
  }

  &.entity {
    cursor: help;
  }

  &.inserted {
    color: green;
  }
}