$term-border: mix($accent, white, 50%)

/*
 * pre > code -- code blocks
 */

pre > code
  +mono-font
  +mono-font-size(0.82em)
  color: $text
  padding-right: 20px
  // box-shadow: inset 1px 1px rgba(black, 0.06)

pre
  padding: 20px 50px
  border-radius: 4px
  background: $wash
  margin: 2.2em -50px
  line-height: 1.2em

  @media (min-width: 768px)
    border-top: solid 1px #eef3fa
    border-bottom: solid 1px #c7d7ee
    border-radius: 4px

  @media (max-width: 768px)
    padding: 20px
    margin: 2em -20px
    background: darken($wash, 3%)

  @media (max-width: 660px)
    border-radius: 0

pre + pre
  margin-top: -1.5em

pre.medium
  > code
    font-size: 1em
  @media (min-width: 768px)
    padding-top: 30px
    padding-bottom: 30px

pre.large
  > code
    font-size: 1.1em
    line-height: 1.4em
  @media (min-width: 768px)
    padding-top: 30px
    padding-bottom: 30px

pre.terminal,
pre.light
  &
    background: white
    border: solid 1px $term-border
    position: relative

pre.light
  background: #fdfdff

pre.terminal
  &
    padding-top: 56px

  &.large
    padding-top: 65px

  &:before
    content: ''
    display: block
    height: 34px
    line-height: 34px
    background: white
    border-bottom: solid 1px $term-border
    border-top-left-radius: 3px
    border-top-right-radius: 3px
    position: absolute
    top: 0
    left: 0
    right: 0
    +bold-font

  &:after
    content: ''
    position: absolute
    display: block
    width: 4px
    height: 4px
    border-radius: 50%
    left: 15px
    top: 15px
    font-size: 20px
    background-color: $term-border
    box-shadow: 20px 0 $term-border, 40px 0 $term-border

  @media (max-width: 768px)
    margin-left: 0
    margin-right: 0

pre + pre
  margin-top: -1.7em

@media (min-width: 769px)
  pre.cursor > code > :last-child:after
    content: ''
    display: inline-block
    width: 3px
    height: 1em
    transform: scaleY(1.5) translateY(0.1em)
    margin-left: 0.4em
    background-color: $accent
    -webkit-animation: blink 700ms steps(2,end) infinite
    -moz-animation: blink 700ms steps(2,end) infinite
    animation: blink 700ms steps(2,end) infinite

h3 + pre,
h3 + table
  margin-top: -1em