// (C)opyright 2020-11-17 Dirk Holtwick, holtwick.it. All rights reserved.

@require "windy/utils.styl"
@require "windy/colors.styl"
@require "windy/base.styl"
@require "windy/text.styl"

windy-prose()
  color text-800
  max-width: 65ch
  font-size: 1rem
  line-height: 1.75

  [class~=lead]
    color #4a5568
    font-size 1.25em
    line-height 1.6
    margin-top 1.2em
    margin-bottom 1.2em

  a[href]
    color #1a202c
    text-decoration underline

  h1, h2, h3, h4
    a[href]
      color inherit
      text-decoration none

  strong
    color #1a202c
    font-weight 600

  //ol
  //  counter-reset list-counter
  //  margin-top 1.25em
  //  margin-bottom 1.25em
  //  & > li
  //    position relative
  //    counter-increment list-counter
  //    padding-left 1.75em
  //    &::before
  //      content counter(list-counter) "."
  //      position absolute
  //      font-weight 400
  //      color #718096
  //
  //ul
  //  & > li
  //    position relative
  //    padding-left 1.75em
  //    &::before
  //      content ""
  //      position absolute
  //      background-color #cbd5e0
  //      border-radius 50%
  //      width .375em
  //      height .375em
  //      top calc(.875em - .1875em)
  //      left .25em

  hr
    border-color #e2e8f0
    border-top-width 1px
    margin-top 3em
    margin-bottom 3em

  blockquote
    font-weight 500
    font-style italic
    color #1a202c
    border-left-width .25rem
    border-left-color #e2e8f0
    quotes "\201C" "\201D" "\2018" "\2019"
    margin-top 1.6em
    margin-bottom 1.6em
    padding-left 1em

    p
      &:first-of-type
        &::before
          content open-quote

      &:last-of-type
        &::after
          content close-quote

  h1
    color #1a202c
    font-weight 800
    font-size 2.25em
    margin-top 0
    margin-bottom .8888889em
    line-height 1.1111111

  h2
    color #1a202c
    font-weight 700
    font-size 1.5em
    margin-top 2em
    margin-bottom 1em
    line-height 1.3333333

  h3
    color #1a202c
    font-weight 600
    font-size 1.25em
    margin-top 1.6em
    margin-bottom .6em
    line-height 1.6

  h4
    color #1a202c
    font-weight 600
    margin-top 1.5em
    margin-bottom .5em
    line-height 1.5

  figure figcaption
    color: #718096
    font-size: .875em
    line-height: 1.4285714
    margin-top: .8571429em

  code
    &::before
      content "`"

    &::after
      content "`"

  pre
    color #e2e8f0
    background-color #2d3748
    overflow-x auto
    font-size .875em
    line-height 1.7142857
    margin-top 1.7142857em
    margin-bottom 1.7142857em
    border-radius .375rem
    padding-top .8571429em
    padding-right 1.1428571em
    padding-bottom .8571429em
    padding-left 1.1428571em

    code
      background-color transparent
      border-width 0
      border-radius 0
      padding 0
      font-weight 400
      color inherit
      font-size inherit
      font-family inherit
      line-height inherit

      &::before
        content ""

      &::after
        content ""

  table
    width 100%
    table-layout auto
    text-align left
    margin-top 2em
    margin-bottom 2em
    font-size .875em
    line-height 1.7142857

  thead
    color #1a202c
    font-weight 600
    border-bottom-width 1px
    border-bottom-color #cbd5e0

    th
      vertical-align bottom
      padding-right .5714286em
      padding-bottom .5714286em
      padding-left .5714286em

  tbody
    tr
      border-bottom-width 1px
      border-bottom-color #e2e8f0

      &:last-child
        border-bottom-width 0

    td
      vertical-align top
      padding-top .5714286em
      padding-right .5714286em
      padding-bottom .5714286em
      padding-left .5714286em

  p
    margin-top 1.25em
    margin-bottom 1.25em

  img
    margin-top 2em
    margin-bottom 2em

  video
    margin-top 2em
    margin-bottom 2em

  figure
    margin-top 2em
    margin-bottom 2em

    & > *
      margin-top 0
      margin-bottom 0

  h2
    code
      font-size .875em

    & + *
      margin-top 0

  h3
    code
      font-size .9em

    & + *
      margin-top 0

  //ul
  //  margin-top 1.25em
  //  margin-bottom 1.25em
  //
  //li
  //  margin-top .5em
  //  margin-bottom .5em
  //
  //ol
  //  & > li
  //    &:before
  //      left 0
  //
  //  & > ul
  //    & > li
  //      p
  //        margin-top .75em
  //        margin-bottom .75em
  //      & > :first-child
  //        margin-top 1.25em
  //      & > :last-child
  //        margin-bottom 1.25em
  //  & > ol
  //    & > li
  //      & > :first-child
  //        margin-top 1.25em
  //      & > :last-child
  //        margin-bottom 1.25em
  //  & > :first-child
  //    margin-top 0
  //
  //ol ol, ol ul, ul ol, ul ul
  //  margin-top: .75em
  //  margin-bottom: .75em

  hr + *
    margin-top 0

  h4
    & + *
      margin-top 0

  thead
    th
      &:first-child
        padding-left 0

      &:last-child
        padding-right 0

  tbody
    td
      &:first-child
        padding-left 0

      &:last-child
        padding-right 0

  ul, ol
    margin rex(16) 0 rex(16) rex(16)
    padding 0

    ul, ol
      margin: rex(16) 0 rex(16) rex(16)

    li
      margin-top: rex(8)

  ul
    list-style: disc outside

    ul
      list-style-type: circle

  ol
    list-style: decimal outside

    ol
      list-style-type: lower-alpha

  dl
    dt
      font-weight: bold

    dd
      margin: rex(8) 0 rex(16) 0