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

pre {
  margin: 0.5rem 0 1rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background: $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: $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: $prism-red;
  }

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

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

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

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

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

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

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

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

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

  &.italic {
    font-style: italic;
  }

  &.entity {
    cursor: help;
  }

  &.inserted {
    color: green;
  }
}