code[class*="language-"],
pre[class*="language-"] {
  color: var(--blue-200);
  background: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: var(--font-mono);
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 2;
  hyphens: none;
}

pre[class*="language-"] {
  padding: var(--sizing-lg);
  margin: var(--sizing-xl) 0;
  overflow: auto;
  background: var(--gray-darkest);
  border: 1px solid var(--gray-200);
}

:not(pre) > code[class*="language-"] {
  padding: var(--sizing-xs);
  white-space: normal;
  background: var(--gray-darkest);
}

.namespace {
  opacity: 0.7;
}

.language-css .token.string,
.style .token.string {
  color: #3498db;
}

.token {
  &.comment,
  &.prolog,
  &.doctype,
  &.cdata {
    color: var(--gray-600);
  }

  &.punctuation {
    color: var(--gray-200);
  }

  &.property,
  &.tag,
  &.constant,
  &.symbol,
  &.deleted {
    color: var(--blue-500);
  }

  &.boolean,
  &.number {
    color: var(--blue-700);
  }

  &.selector,
  &.attr-name,
  &.string,
  &.char,
  &.builtin,
  &.inserted {
    color: #2ecc71;
  }

  &.operator,
  &.entity,
  &.url,
  &.variable {
    color: #3498db;
  }

  &.atrule,
  &.attr-value,
  &.function,
  &.class-name {
    color: #e67e22;
  }

  &.keyword {
    color: #1abc9c;
  }

  &.regex,
  &.important {
    color: #e74c3c;
  }

  &.italic {
    font-style: italic;
  }

  &.entity {
    cursor: help;
  }

  &.important,
  &.bold {
    font-weight: var(--font-weight-bold);
  }
}