@require "../../../src/common/stylus/variable.styl"

.md-body
  font-size: $fontsize-medium
  line-height: 1.6
  color: $color-grey
  p
    margin: 1.2em 0
    .anchor
      display: inline-block
  h2
    margin-top: 1.2em
    margin-bottom: .8em
    font-size: 2em
    font-weight: 600
    color: $color-dark-grey
  h3
    margin: 1em 0 1em
    font-size: 1.4em
    font-weight: 600
  h4
    margin: 0.8em 0 0.8em
    font-size: 1.1em
    font-weight: 600
  blockquote
    padding: 0 1em
    color: $color-grey
    border-left: .25em solid $color-light-grey-s
  table
    // margin 0.8em 1em 0.8em 1em
    width: 100%
    box-sizing: border-box
    table-layout: fixed
    border-collapse: separate
    border: 1px solid #E7E7E7
    border-width: 1px 0 0 1px
    border-radius: 4px
    th, td
      padding: 6px 13px
      border: 1px solid #E7E7E7
      border-width: 0 1px 1px 0
      vertical-align: middle
      text-align: left
      word-wrap: break-word
      word-break: break-word
    tr
      th
        font-weight: 600
        background-color: #F9F8F8
        &:first-child
          border-top-left-radius: 4px
        &:last-child
          border-top-right-radius: 4px
    tr
      &:last-child
        td
          &:first-child
            border-bottom-left-radius: 4px
          &:last-child
            border-bottom-right-radius: 4px
  ul, ol, li
    line-height: 20px
  li
    list-style: inherit
    margin: 1em 0
  ul
    padding-left: 20px
  h1, h2, h3, h4
    .anchor
      display: none
  h1:hover, h2:hover, h3:hover, h4:hover
    .anchor
      display: inline-block
      float: left
      margin-left: -20px
      position relative
      top: 6px
      padding-right: 4px
      line-height: 1
  img
    max-width: 100%
  .hljs
    border: 1px solid #E7E7E7
    color: #666
    background-color: #F9F8F8
    border-radius: 4px
  .hljs-variable,
  .hljs-template-variable,
  .hljs-attribute,
  .hljs-tag,
  .hljs-name,
  .hljs-regexp,
  .hljs-link,
  .hljs-name,
  .hljs-selector-id,
  .hljs-selector-class
    color: #3CA0E6
  .hljs-string,
  .hljs-symbol,
  .hljs-bullet
    color: #3FB374
  .hljs-tag
    color: #666
  .hljs-attr
    .hljs-tag
      color: #fc9153
      .hljs-attr
        color: #fc9153
pre
  margin: 1em 0
  font-size: 12px
code
  font-family: monaco
  line-height: 1.4
  color: rgb(199, 37, 78)
  background: rgb(249, 242, 244)
  padding: 2px 4px
  box-sizing: border-box
  font-size: 0.93em
strong
  margin: 1em 0 1em
  font-weight: bold
a
  text-decoration: none
  color:#3CA0E6
  &:hover
    color: #137DC6
sup
  position: absolute
  margin: -10px 0 0 -4px
  padding: 2px
  transform: scale(0.6) translateZ(0)
  border: 1px solid #ccc
  border-radius: 4px
table
  i[class^="cubeic-"]
    &::before
      font-size: 20px
    &::after
      content: attr(class)
      display: block
      margin: -6px 0 8px 0