// vf-code-example

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

// sass-lint:disable force-element-nesting

$vf-code-example-enable-hljs: true !default;

.vf-content pre,
.vf-content code,
.vf-code-example__pre,
.vf-code-example {
  // pre and code should always be monospace
  @include set-type(text-body--1,$vf-font-family--monospace, $custom-margin-bottom: 0, $color: secondary);
  @include padding--block(all,map-get($vf-spacing-map, vf-spacing--100));

  background: neutral(100);
  border-radius: $vf-radius--xs;
}

.vf-content code,
.vf-code-example {
  font-size: inherit;
}

.vf-content pre,
.vf-code-example__pre {
  border: 1px;
  display: block;
  margin-bottom: map-get($vf-spacing-map, vf-spacing--400);
  min-width: 0;
  overflow: auto;
  white-space: pre-wrap;
  @include padding--inline(all,map-get($vf-spacing-map, vf-spacing--200));
}

@if $vf-code-example-enable-hljs == true {
  /* github.com style (c) Vasily Polovnyov <vast@whiteants.net> */
  .hljs {
    background: neutral(100);
    color: ui-color(black);
    display: block;
    overflow-x: auto;
    padding: .5em; }

  .hljs-comment,
  .hljs-quote {
    color: text-color(primary);
    font-style: italic; }

  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-subst {
    color: text-color(secondary);
    font-weight: bold; }

  .hljs-number,
  .hljs-literal,
  .hljs-variable,
  .hljs-template-variable,
  .hljs-tag .hljs-attr {
    color: color(blue--dark); }

  .hljs-string,
  .hljs-doctag {
    color: color(red); }

  .hljs-title,
  .hljs-section,
  .hljs-selector-id {
    color: color(red--dark);
    font-weight: bold; }

  .hljs-subst {
    font-weight: normal; }

  .hljs-type,
  .hljs-class .hljs-title {
    color: color(blue);
    font-weight: bold; }

  .hljs-tag,
  .hljs-name,
  .hljs-attribute {
    color: color(blue--dark);
    font-weight: normal; }

  .hljs-regexp,
  .hljs-link {
    color: color(green); }

  .hljs-symbol,
  .hljs-bullet {
    color: color(red--dark); }

  .hljs-built_in,
  .hljs-builtin-name {
    color: color(blue); }

  .hljs-meta {
    color: color(grey--lightest);
    font-weight: bold; }

  .hljs-deletion {
    background: color(red--light); }

  .hljs-addition {
    background: color(bright-green--light); }

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

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