#vcomment,
#waline
  font-size: 1.1em

  .vbtn
    border: none
    background: var(--btn-bg)
    color: var(--btn-color)

    &:hover
      background: var(--btn-hover-color)

  textarea
    &:focus
      background-image: none

  .vimg
    transition: all .3s

    &:hover
      transform: rotate(360deg)

  .vcards .vcard .vcontent.expand
    &:before,
    &:after
      z-index: 22

if hexo-config('valine.bg')
  #vcomment
    textarea
      background: url(hexo-config('valine.bg')) 100% 100% no-repeat

if hexo-config('waline.bg')
  #waline-wrap
    textarea
      background: url(hexo-config('waline.bg')) 100% 100% no-repeat

.fireworks
  position: fixed
  top: 0
  left: 0
  z-index: $fireworks-zIndex
  pointer-events: none

.medium-zoom-image--opened
  z-index: 99999 !important
  margin: 0 !important

.medium-zoom-overlay
  z-index: 99999 !important

.mermaid
  overflow: auto
  margin: 0 0 1rem
  background: $white
  text-align: center
  opacity: 0
  transition: all .3s

  &[data-processed]
    opacity: 1

.utterances,
.fb-comments iframe
  width: 100% !important

#gitalk-container
  .gt-meta
    margin: 0 0 .8em
    padding: .3rem 0 .8em

.katex-wrap
  overflow: auto

  if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
    &::-webkit-scrollbar
      display: none

// mathjax
.mathjax-overflow
  overflow-x: auto
  overflow-y: hidden

mjx-container[jax='CHTML'][display='true']
  overflow-x: auto
  overflow-y: hidden
  padding-bottom: .3rem

.aplayer
  color: $font-black

#article-container
  .aplayer
    margin: 0 0 1rem

    if hexo-config('beautify.enable')
      ol,
      ul
        margin: 0
        padding: 0

        li
          margin: 0
          padding: 0 15px

          &:before
            content: none