Herman Code-Block Styles

.code-block {
  align-items: stretch;
  display: flex;
  flex: 1 1 20em;
  flex-direction: column;
  max-height: tools.size('rhythm') * 12;
  max-width: 100%;
  overflow: hidden;
}

.code-header {
  @include tools.contrasted('theme-light');

  flex: 0 0 auto;
  padding: 0 tools.size('shim');
}

.code-description {
  @include tools.before(' – ');
}

.hljs-pre,
.text-block pre {
  background-color: tools.color('slight');
  border: 1px solid tools.color('callout');
  color: tools.color('code');
  flex: 1 1 auto;
  flex-wrap: wrap;

  code {
    padding: tools.size('shim');
  }
}

.hljs-comment,
.hljs-quote {
  color: tools.color('hljs-comment');
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-addition {
  color: tools.color('hljs-green');
}

.hljs-number,
.hljs-string,
.hljs-meta .hljs-meta-string,
.hljs-literal,
.hljs-doctag,
.hljs-regexp {
  color: tools.color('hljs-cyan');
}

.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: tools.color('hljs-blue');
}

.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-class .hljs-title,
.hljs-type {
  color: tools.color('hljs-yellow');
}

.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-link {
  color: tools.color('hljs-orange');
}

.hljs-built_in,
.hljs-deletion {
  color: tools.color('hljs-red');
}

.hljs-formula {
  background: tools.color('hljs-formula');
}

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

.hljs-strong {
  font-weight: bolder;
}