// https://github.com/equinusocio/vsc-material-theme
$highlight_theme = hexo-config('highlight_theme')

@require 'theme'

if $highlight_theme != false
  @require 'diff'

wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')

$code-block
  overflow: auto
  margin: 0 0 1rem
  padding: 0
  background: $highlight-background
  color: $highlight-foreground
  line-height: $line-height-code-block

  if wordWrap
    counter-reset: line
    white-space: pre-wrap

blockquote
  margin: 0 0 1rem
  padding: .1rem .8rem
  border-left: .2rem solid $blockquote-padding-color
  background-color: var(--blockquote-bg)
  color: var(--blockquote-color)

  a
    word-break: break-all

  p
    margin: 0 !important
    padding: .5rem 0

  footer
    padding: 0 0 .5rem

    cite
      &:before
        padding: 0 .3em
        content: '—'

#article-container
  pre,
  code
    font-family: $code-font !important

  code
    padding: .1rem .2rem
    background: $code-background
    color: $code-foreground
    word-wrap: break-word
    word-break: break-word
    overflow-wrap: break-word

  pre
    @extend $code-block
    padding: 10px 20px

    code
      padding: 0
      background: none
      color: $highlight-foreground
      text-shadow: none

  figure.highlight
    @extend $code-block
    position: relative

    pre
      margin: 0
      padding: 8px 0
      border: none

    .line
      if wordWrap
        &:before
          display: inline-block
          padding: 0 .3rem 0 0
          min-width: 1.6rem
          color: $highlight-gutter.color
          content: counter(line)
          counter-increment: line
          text-align: left

      &.marked
        background-color: $highlight-selection

    table
      display: block
      overflow: auto
      border: none

    td
      padding: 0
      border: none

    figcaption
      clearfix()
      padding: .3rem 0 .1rem .7rem
      font-size: 1em
      line-height: 1em

      a
        float: right
        padding-right: 10px
        color: $highlight-foreground

        &:hover
          border-bottom-color: $highlight-foreground

    .gutter pre
      padding-right: .5rem
      padding-left: .5rem
      background-color: $highlight-gutter.bg-color
      color: $highlight-gutter.color
      text-align: right

    .code pre
      padding-right: .5rem
      padding-left: .5rem
      width: 100%

    .highlight-tools
      position: relative
      overflow: hidden
      width: 100%
      height: 1.5rem
      background: $highlight-tools.bg-color
      color: $highlight-tools.color
      font-size: 14px

      &.closed + table
        display: none

      .expand
        position: absolute
        padding: .4rem .7rem
        cursor: pointer
        transition: transform .3s

        & + .code-lang
          left: 1.7rem

        &.closed
          transition: all .3s
          transform: rotate(-90deg) !important

      .code-lang
        position: absolute
        left: .7rem
        text-transform: capitalize
        font-weight: bold
        font-size: .8rem
        line-height: 1.5rem

      .copy-notice
        position: absolute
        top: .25rem
        right: 1.7rem
        opacity: 0

      .copy-button
        position: absolute
        top: .4rem
        right: .7rem
        cursor: pointer
        transition: color .2s

        &:hover
          color: $theme-color

  .gutter
    user-select: none

  .gist table
    width: auto

    td
      border: none

  if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
    figure.highlight
      margin: 0 0 1.2rem
      border-radius: 7px
      box-shadow: 0 5px 10px 0 $highlight-mac-border
      -webkit-transform: translateZ(0)

      .highlight-tools
        &:after
          position: absolute
          top: .45rem
          left: .7rem
          width: 12px
          height: 12px
          border-radius: 50%
          background: #fc625d
          box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
          content: ' '

        .expand
          right: 0

          &.closed
            transition: all .3s
            transform: rotate(90deg) !important

          & ~ .copy-notice
            right: 2.8rem

          & ~ .copy-button
            right: 1.8rem

        .code-lang
          left: 3.8rem !important