_base_code.scss

@import 'settings';

// Base code styles
@mixin vf-b-code {
  code,
  samp,
  kbd {
    background-color: $color-mid-x-light;
    box-shadow: 0 0 0 0.25rem $color-mid-x-light;
    font-family: unquote($font-monospace);
    font-weight: 300;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    text-align: left;
  }

  code b,
  code strong {
    font-weight: bold;
  }

  pre,
  code {
    direction: ltr;
    // stylelint-disable property-no-vendor-prefix
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    // stylelint-enable property-no-vendor-prefix
    tab-size: 4;
    word-spacing: normal;
    word-wrap: break-word;
  }

  // Inside pre, code does not behave as an inline element;
  // To ensure multiple lines adhere to the baseline grid, we need to make it a block element.
  pre code {
    background: none;
    box-shadow: none;
    display: inline-block;
    margin-left: 0;
    margin-right: 0;
  }

  pre {
    background-color: $color-light;
    border: 1px solid $color-mid-light;
    border-radius: $border-radius;
    color: $color-dark;
    display: block;
    margin-bottom: $spv-outer--scaleable;
    margin-top: 0;
    overflow: auto;
    padding: calc(#{map-get($nudges, nudge--p-ubuntumono)} - 1px) $sph-inner calc(#{map-get($nudges, nudge--p-ubuntumono)} - 1px);
    text-align: left;
    text-shadow: none;
    white-space: pre;
  }
}