#vcomment
  font-size: 1.1em

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

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

  .vimg
    transition: all .3s

    &:hover
      transform: rotate(360deg)

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

#waline-wrap
  --waline-font-size: 1.1em
  --waline-theme-color: $button-bg
  --waline-active-color: $button-hover-color

  .wl-comment-actions > button:not(last-child)
    padding-right: 4px

if hexo-config('artalk.vote')
  .artalk-vote
    display: flex
    justify-content: center
    align-items: center
    margin: 4px 0 20px
    gap: 10px

    .artalk-page-vote-up,
    .artalk-page-vote-down
      position: relative
      display: inline-flex
      align-items: center
      overflow: hidden
      padding: 5px 16px
      border: 1px solid alpha($theme-color, .15)
      gap: 6px
      addBorderRadius(8)
      background: var(--card-bg)
      color: var(--font-color)
      font-weight: 500
      font-size: .95em
      cursor: pointer
      transition: all .2s ease
      user-select: none

      i,
      .artalk-page-vote-up-count,
      .artalk-page-vote-down-count
        position: relative
        z-index: 1

      i
        font-size: 1em
        line-height: 1

      .artalk-page-vote-up-count,
      .artalk-page-vote-down-count
        min-width: 1em
        text-align: center
        font-weight: 600
        font-size: .9em
        font-variant-numeric: tabular-nums

      &::after
        position: absolute
        top: 50%
        left: 50%
        z-index: 0
        width: 8px
        height: 8px
        border-radius: 50%
        content: ''
        opacity: 0
        pointer-events: none

      &:hover
        border-color: $theme-color

      &:active
        transform: scale(.95)

        &::after
          animation: artalkVoteRipple .6s ease-out forwards

    .artalk-page-vote-up
      &:hover,
      &.active
        border-color: $theme-color
        background: alpha($theme-color, .1)
        color: $theme-color

      &::after
        background: alpha($theme-color, .5)

    .artalk-page-vote-down
      &:hover,
      &.active
        border-color: $light-red
        background: alpha($light-red, .1)
        color: $light-red

      &::after
        background: alpha($light-red, .5)

    +maxWidth600()
      gap: 8px

      .artalk-page-vote-up,
      .artalk-page-vote-down
        padding: 4px 12px

  @keyframes artalkVoteRipple
    0%
      opacity: .8
      transform: translate(-50%, -50%) scale(0)

    100%
      opacity: 0
      transform: translate(-50%, -50%) scale(20)

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

      &:focus
        background-image: none

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

      &:focus
        background-image: none

.twikoo
  .tk-content
    p
      margin: 3px 0

.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

if hexo-config('mermaid.enable')
  .mermaid-wrap
    position: relative
    margin: 0 0 20px
    background: var(--card-bg)
    text-align: center

    if hexo-config('mermaid.open_in_new_tab')
      .mermaid-open-btn
        position: absolute
        top: 8px
        right: 8px
        z-index: 2
        display: flex
        justify-content: center
        align-items: center
        padding: 0
        width: 34px
        height: 25px
        border: none
        border-radius: 20%
        background: #D3D3D3
        box-shadow: 0 4px 10px rgba(0, 0, 0, .15)
        color: #fff
        font-size: 0
        line-height: 1
        cursor: pointer
        transition: background .2s ease, transform .2s ease

        i
          font-size: 16px
          line-height: 1

        &:hover,
        &:focus-visible
          outline: none
          background: #C0C0C0
          transform: translateY(-1px)

    & > svg
      max-width: 100%
      height: 100%

      if hexo-config('mermaid.zoom_pan')
        cursor: grab
        user-select: none
        touch-action: none

        &:active
          cursor: grabbing

  if hexo-config('mermaid.code_write')
    pre > code.mermaid
      display: none

if hexo-config('chartjs.enable')
  .chartjs-container
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    margin: 0 0 20px
    text-align: center
    gap: 20px

    +maxWidth600()
      .chartjs-wrap
        width: 100% !important

    &.chartjs-abreast
      flex-direction: row

      +maxWidth600()
        flex-direction: column

    .chartjs-wrap
      width: -webkit-fill-available

    canvas
      display: inline-block !important

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

#gitalk-container
  .gt-meta
    margin: 0 0 .8em
    padding: 6px 0 16px

if hexo-config('math.use')
  .katex-display
    overflow: auto hidden
    padding: 5px

    .katex-show
      display: block

  .katex
    display: none

    &.katex-show
      display: inline

  if hexo-config('math.hide_scrollbar')
    .katex-display,
    mjx-container
      scrollbar-width: none

      &::-webkit-scrollbar
        display: none

  // Mathjax
  mjx-container
    overflow-x: auto
    overflow-y: hidden
    padding-bottom: 4px
    max-width: 100%

    &[display]
      display: block !important
      min-width: auto !important

    &:not([display])
      display: inline-grid !important

  mjx-assistive-mml
    right: 0
    bottom: 0

.snackbar-container.snackbar-css
  addBorderRadius(5)
  opacity: .85 !important

.abc-music-sheet
  margin: 0 0 20px
  opacity: 0
  transition: opacity .3s

  &.abcjs-container
    opacity: 1

+maxWidth768()
  .fancybox__toolbar__column.is-middle,
  .f-carousel__toolbar__column.is-middle
    visibility: hidden