beautify()
  headStyle(fontsize)
    padding-left: unit(fontsize + .4, 'px')

    &:before
      margin-left: unit((-(fontsize + 4)), 'px')
      font-size: unit(fontsize, 'px')

    &:hover
      padding-left: unit(fontsize + 12, 'px')

  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    transition: all .2s ease-out

    &:before
      position: absolute
      top: calc(50% - 7px)
      color: $title-prefix-icon-color
      content: $title-prefix-icon
      line-height: 1
      transition: all .2s ease-out
      @extend .fontawesomeIcon

    &:hover
      &:before
        color: $light-blue

  h1
    headStyle(20)

  h2
    headStyle(18)

  h3
    headStyle(16)

  h4
    headStyle(14)

  h5
    headStyle(12)

  h6
    headStyle(12)

  ol,
  ul
    margin-top: 8px
    padding: 0 0 0 16px
    list-style: none
    counter-reset: li

    +maxWidth768()
      padding: 0 0 0 8px

    p
      margin: 0 0 10px

    ol,
    ul
      padding-left: 12px

      +maxWidth768()
        padding-left: 4px

    li
      &:not(.tab)
        position: relative
        margin: 4px 0

      &:hover
        &:before
          transform: rotate(360deg)

      &:before
        position: absolute
        top: 0
        left: 0
        background: $light-blue
        color: $white
        cursor: pointer
        transition: all .3s ease-out

  ol
    > li
      &:not(.tab)
        padding: .2em .2em .2em 1.8em

      &:before
        margin-top: .65em
        width: w = 1.45em
        height: h = w
        border-radius: .5 * w
        content: counter(li)
        counter-increment: li
        text-align: center
        font-size: .85em
        line-height: h

  ul
    > li:not(.tab)
      padding: .2em .2em .2em 1.4em

      &:hover
        &:before
          border-color: var(--pseudo-hover)

      &:before
        $w = .42em
        top: .78em
        width: w = $w
        height: h = w
        border: .5 * w solid $light-blue
        border-radius: w
        background: transparent
        content: ''
        line-height: h

no-beautify()
  ol,
  ul
    margin-top: 8px

    p
      margin: 0 0 10px

    ol,
    ul
      padding-left: 10px

    li
      position: relative
      margin: 6px 0
      padding-left: 6px

#article-container
  word-wrap: break-word
  overflow-wrap: break-word

  a
    color: $theme-link-color

    &:hover
      text-decoration: underline

  img
    display: block
    margin: 0 auto 20px
    max-width: 100%
    transition: filter 375ms ease-in 0.2s

  p
    margin: 0 0 16px

  iframe
    margin: 0 0 20px

  kbd
    margin: 0 3px
    padding: 3px 5px
    border: 1px solid #b4b4b4
    border-radius: 3px
    background-color: #f8f8f8
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 2px 1px 0 rgba(255, 255, 255, .6) inset
    color: #34495e
    white-space: nowrap
    font-weight: 600
    font-size: .9em
    font-family: Monaco, 'Ubuntu Mono', monospace
    line-height: 1em

  if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site'
    beautify()
  else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post'
    no-beautify()

    &.post-content
      beautify()
  else
    no-beautify()

  > :last-child
    margin-bottom: 0 !important

#post
  .tag_share
    .post-meta
      &__tag-list
        display: inline-block

      &__tags
        display: inline-block
        margin: 8px 8px 8px 0
        padding: 0 12px
        width: fit-content
        border: 1px solid $light-blue
        border-radius: 12px
        color: $light-blue
        font-size: .85em
        transition: all .2s ease-in-out

        &:hover
          background: $light-blue
          color: var(--white)

    .post_share
      display: inline-block
      float: right
      margin: 8px 0
      width: fit-content

      .social-share
        font-size: .85em

        .social-share-icon
          margin: 0 4px
          width: w = 1.85em
          height: w
          font-size: 1.2em
          line-height: w

  .post-copyright
    position: relative
    margin: 40px 0 10px
    padding: 10px 16px
    border: 1px solid var(--light-grey)
    transition: box-shadow .3s ease-in-out

    &:before
      @extend .fontawesomeIcon
      position: absolute
      top: 2px
      right: 12px
      color: $theme-color
      content: '\f1f9'
      font-size: 1.3em

    &:hover
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

    .post-copyright
      &-meta
        color: $light-blue
        font-weight: bold

      &-info
        padding-left: 6px

        a
          text-decoration: underline
          word-break: break-word

          &:hover
            text-decoration: none

  .post-outdate-notice
    position: relative
    margin: 0 0 20px
    padding: .5em 1.2em
    border-radius: 3px
    background-color: $noticeOutdate-bg
    color: $noticeOutdate-color

    if hexo-config('noticeOutdate.style') == 'flat'
      padding: .5em 1em .5em 2.6em
      border-left: 5px solid $noticeOutdate-border

      &:before
        @extend .fontawesomeIcon
        position: absolute
        top: 50%
        left: .9em
        color: $noticeOutdate-border
        content: '\f071'
        transform: translateY(-50%)

  .ads-wrap
    margin: 40px 0