@import '../_defines/const'
@import '../_custom'
@import '../_defines/func'

.cmt-body.twikoo
  --twikoo-theme: var(--theme)
  margin-top: 1.5rem

  .tk-content
    .vemoji, .tk-owo-emotion
      width: unset
      border-radius: $border-image-s
      max-height: 24px
      max-width: 100px
      display: inline
      margin: 0 0.25em
    img
      max-width: 400px
      max-height: 400px
      border-radius: $border-image-s

.OwO
  .OwO-body
    background-color: var(--block) !important
    color: var(--text-p1) !important

    .OwO-items
      .OwO-item
        img
          max-height: 26px
          width: unset

.twikoo
  .el-input-group__append, .el-input-group__prepend,
  .el-input__inner, .el-textarea__inner,
  .tk-preview-container
    border-color: var(--block-border)
  .el-input__inner:focus,
  .el-textarea__inner:focus
    border-color: var(--twikoo-theme) !important  
  .el-button:not(.el-button--primary):not(.el-button--text):active,
  .el-button:not(.el-button--primary):not(.el-button--text):focus,
  .el-button:not(.el-button--primary):not(.el-button--text):hover
    color: var(--twikoo-theme) !important
    border-color: var(--link-a20) !important
    background-color: var(--block) !important
  .el-button--primary.is-disabled:active,
  .el-button--primary.is-disabled:focus,
  .el-button--primary.is-disabled:hover
    background-color: var(--link-a20) !important

  .el-button:focus,.el-button:hover
    border-color: var(--link-a20)
  .el-button:active
    color: var(--twikoo-theme)
    border-color: var(--twikoo-theme)
  .el-button.is-active,.el-button.is-plain:active
    color: var(--twikoo-theme)
    border-color: var(--twikoo-theme)

  .el-button--primary
    background-color: var(--twikoo-theme)
    border-color: var(--twikoo-theme) !important
  .el-button--primary:focus,.el-button--primary:hover
    background: var(--accent)
    border-color: var(--accent) !important
  .el-button--primary:active
    background: var(--twikoo-theme)
    border-color: var(--twikoo-theme)
  .el-button--primary.is-active
    background: var(--twikoo-theme)
    border-color: var(--twikoo-theme)
  .el-button--primary.is-disabled,
  .el-button--primary.is-disabled:active,
  .el-button--primary.is-disabled:focus,
  .el-button--primary.is-disabled:hover
    background-color: var(--link-a20) !important
    border-color: var(--link-a20) !important
  .el-button--primary.is-plain
    color: var(--twikoo-theme) !important
    border-color: var(--link-a20)
  .el-button--primary.is-plain:focus,
  .el-button--primary.is-plain:hover
    background: var(--twikoo-theme) !important
    border-color: var(--twikoo-theme)
  .el-button--primary.is-plain:active
    background: var(--twikoo-theme) !important
    border-color: var(--twikoo-theme)

  .tk-action-icon svg
    color: var(--text-p2)

  .tk-action-link
    color: var(--text-p1)
    &:hover
      color: var(--twikoo-theme)

  .el-loading-spinner .path
    stroke: var(--twikoo-theme)

  .tk-icon.__comments
    color: var(--twikoo-theme)

  b, strong
    color: var(--text-p1)

  a
    cursor: pointer

  .tk-time, .tk-extras
    color: var(--text-p3)

  .tk-expand
    width: auto
    border: none
    padding: 6px 2rem
    border-radius: $border-card
    background: var(--block)
    color: var(--text-p1)
    line-height: 2
    font-size: 14px
    font-weight: 500
    trans1 background

    &:hover
      background: var(--card)

  .tk-comment
    margin-top: 0
    margin-bottom: 1rem
    border: 1px dashed var(--block-border)
    padding: 1rem
    border-radius: $border-card
    background: var(--block)

    &:hover
      border-color: var(--twikoo-theme)

  .tk-main .tk-comment
    margin-top: 1rem
    margin-bottom: 0

  .tk-submit
    padding: 1rem 1rem 0 1rem
    border-radius: $border-card
    background: var(--block)

  .tk-tag
    vertical-align: 0.1em

  .tk-tag-green
    border: none
    background-color: var(--link-a20)
    color: var(--twikoo-theme)
    
  .tk-comments-title .tk-comments-count
    margin-top: 15px
    color: var(--text-p1)

    span:nth-child(1)
      font-size: 1.5rem
      font-weight: 700

    span:nth-child(2)
      font-size: 1rem

  .tk-comments-no
    color: var(--text-p1)