%code-theme {
  @include border-radius(4px);
  border: 1px solid #ebebeb;
  background: #f8f8f8;
  color: $color-text-strong;
}

code,
pre {
  @extend %code-theme;
  @include font-size-small;
  font: {
    weight: $font-weight-regular;
    family: $font-family-code;
  }
  white-space: pre-wrap;
  @include box-sizing(border-box);
}

code {
  padding: .25em;
  line-height: 0;
}

%pre-block {
  @include rhythm(0, .5, .5, 0);
  padding: {
    right: 1em;
     left: 1em;
  }
  display: block;
}

pre {
  @extend %pre-block;
  @include trailer;
  @include rhythm(.5, .5, .5, .5);
  @include bleed(1em);
  overflow-y: auto;
  margin: auto 0 25px;

  // Account for some code outputs that place code tags in pre tags
  code {
    @extend %reset-padding;
    background: none;
    font-size: inherit;
    line-height: inherit;
  }
  &.highlight .err {
    background: none;
  }
}