@import list
@import link-card
@import amazlet
@import twitter-tweet
@import disabled-h1
@import modules/web-fonts/source-code-pro

$background: white !default
$font: #333 !default
$disabled-h1: false !default

=long-text-style($pc-font-size: 1rem, $mobile-font-size: .8125rem, $background: $base-color, $font: $default-text, $disabled-h1: false)
  font-size: $pc-font-size
  +media-breakpoint-down(sm)
    font-size: $mobile-font-size
  >*:first-child
    margin-top: 0
  >*:last-child
    margin-bottom: 0
  +disabled-h1($disabled-h1, $pc-font-size, $mobile-font-size)
  h2
    +text-block(1.625em 1.4 .75em, 600)
    padding-bottom: .25em
    border-bottom: .0625rem solid mix($font, $background, 20%)
  h1 + h2
    margin-top: 1em
  * + h2
    margin-top: 1.4em

  * + h3,
  * + h4,
  * + h5
    margin-top: 1.5em
  h3
    +text-block(1.375em 1.4 .625em, 600)
  h4
    +text-block(1.25em 1.3 .625em, 600)
  h5
    +text-block(1.125em 1.3 .625em, 600)
  h6
    +text-block(1em 1.3 .625em, 600)
  p
    +text-block(1em 1.8 1.5em)
  a
    +hover-link-reversal
    p &
      word-break: break-all
    &:hover
      img
        border-color: mix($font, $background, 16%)
  code
    +source-code-pro
  pre
    padding: 0
    margin-bottom: 1.5em
    code
      border: solid .0625rem mix($font, $background, 20%)
      +text-block(.9375em 1.5)
      overflow: auto
      display: block
      width: 100%
      padding: .875em
  p,
  li
    code
      +text-block(.875em 1.7, $default-text inline-flex)
      align-items: center
      letter-spacing: 0
      +padding(horizontal, .25rem)
      border: solid .0625rem mix($font, $background, 20%)
      background-color: mix($font, $background, 4%)
      +margin(horizontal, .25rem)
      border-radius: .125rem
  hr
    display: block
    +margin(vertical, 1.5em 2em)
    &:before
      +fa('\f069\f069\f069')
      display: block
      +text-block(.9375rem 1, center)
      +letter-spacing-center(.25rem)
  img
    max-width: 100%
    display: block
    +margin(horizontal, auto)
    border: .0625rem solid mix($font, $background, 10%)
    +media-breakpoint-down(sm)
      max-width: 100% !important
    &.is-xs
      max-width: 10em
    &.is-sm
      max-width: 20em
    &.is-md
      max-width: 30em

  +list
  ul,
  ol
    list-style-position: outside
    margin-left: 1.75em
    margin-bottom: 1.5em
  li
    +text-block(1em 1.8)
    +margin(vertical, .75em)
    &:first-child
      margin-top: 0
    &:last-child
      margin-bottom: 0
    input
      margin-right: .25rem
  p + ul,
  p + ol
    margin-top: 1em

  table
    width: 100%
    margin-bottom: 2em

  th,
  td
    border: solid .0625rem mix($font, $background, 40%)
    padding: .5em .625em
    +text-block(.875em 1.4)

  th
    background-color: mix($font, $background, 8%)

  tbody tr
    &:nth-child(even)
      background-color: mix($font, $background, 2%)

  dl
    margin: 1.5em 0 2em
    +border(vertical, .0625rem solid mix($font, $background, 8%))
    +padding(vertical, 2em)
    @extend .row
    +media-breakpoint-down(sm)
      +padding(vertical, 1.5em)
      +border(vertical, dotted)
  dt
    +text-block(.875em 1.6 .5em, bold)
    margin-top: 1em
    padding-right: .5em
    @extend .col-sm-4
    @extend .col-xs-12
    +media-breakpoint-down(sm)
      padding: 0
    &:first-child
      margin-top: 0
      &+dd
        margin-top: 0
    &+dd
      margin-top: 1em
      +media-breakpoint-down(sm)
        margin-top: 0
  dd
    +text-block(.875em 1.6 1em)
    @extend .col-sm-8
    @extend .col-xs-12
    +media-breakpoint-down(sm)
      padding: 0
    &+dd
      @extend .offset-sm-4
    &:last-child
      margin-bottom: 0

  blockquote
    padding-left: 1.5em
    +margin(vertical, 1.5em 2em)
    +position(relative)
    border-left: solid .25em mix($font, $background, 10%)
    +list
    p + &
      +margin(vertical, 3em 2.5em)
    code
      font-style: normal
    >*:last-child
      margin-bottom: 0 !important

  details
    +text-block(.875rem 1.8 1.5em)
    border: solid .0625rem mix($font, $background, 20%)
    border-radius: .25rem
    summary
      +text-block(1em 1.8 0)
      cursor: pointer
      padding: .5em 1em
      outline: none
      & + div
        padding: .5em 1em
        *:last-child
          margin-bottom: 0
    &[open] summary
      border-bottom: solid .0625rem mix($font, $background, 20%)

  iframe
    display: block
    max-width: 100%
    +margin(vertical, 1.5em 2em)
    +margin(horizontal, auto)

  +amazlet
  +twitter-tweet
  +link-card