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

.cmt-body.artalk .artalk
  margin-top: 1rem
  .atk-editor-plug-preview
    scrollbar(0, 0)
  .atk-main-editor
    border-radius: $border-card
    .atk-header,.atk-editor-user-wrap
      border-bottom: 1px dashed var(--block-border)
      padding: 0.5rem 1rem
      margin: 0
      .atk-editor-user
        padding: 0
    .atk-editor-user-wrap:empty
      visibility: hidden
      padding: 0
    >.atk-bottom 
      padding: 8px
      .atk-state-btn
        height: 2rem
        border-radius: 100px
        .atk-cancel
          background: none
      .atk-plug-btn
        border-radius: 32px
        height: 2rem
        width 2rem
      .atk-send-btn
        height: 2rem
        border-radius: 100px
        min-width: 5em
        trans1 all
        &:hover
          --at-color-main: var(--accent)
        &:empty
          display: none
  .atk-list-comments-wrap>.atk-comment-wrap
    border-radius: $border-card
    background: var(--card)
    box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.02)
    >.atk-comment
      padding: 1rem
    &+.atk-comment-wrap
      margin-top: .5rem
  .atk-comment-children
    border-top: 1px dashed var(--block-border)
    margin-top: .5rem
  .atk-avatar
    padding: 0
  .atk-avatar img
    border-radius: 50%
    corner-shape: round
    width: 36px
    height: 36px
  .atk-comment-wrap>.atk-comment>.atk-main
    margin-left: calc(36px + .5rem)
  .atk-comment>.atk-main>.atk-header .atk-item.atk-nick
    color: var(--text-p3)
    font-weight: 500

  .atk-badge-wrap span
    border-radius: 100px
  .atk-height-limit-btn
    padding: 0.5rem 2rem
  .atk-list-read-more 
    margin-top: 2.5rem
    padding-bottom: 1.5rem
    .atk-list-read-more-inner
      padding: 1rem 2rem
      border-radius: $border-button
      height: 3rem
      width: 12rem
      margin: -1.5rem auto 0
      &:hover
        background: var(--card)
  .atk-list-footer .atk-copyright
    padding: 1rem
  .atk-error-layer
    background: none

.with-fancybox .atk-content img:not([atk-emoticon])
  cursor: zoom-in

.cmt-body
  .artalk, .atk-layer-wrap, .artalk.atk-dark-mode, .atk-layer-wrap.atk-dark-mode
    --at-color-font: var(--text-p1)
    --at-color-deep: var(--text-p2)
    --at-color-sub: var(--text-p3)
    --at-color-grey: var(--text-p4)
    --at-color-meta: var(--text-p4)
    if $site-background-image
      --at-color-border: transparent
    else
      --at-color-border: var(--block-border)
    --at-color-light: var(--link)
    --at-color-bg: var(--card)
    --at-color-bg-transl: var(--card)
    --at-color-bg-grey: var(--block)
    --at-color-bg-grey-transl: var(--block-border)
    --at-color-bg-light: var(--theme)
    --at-color-main: var(--theme)
    --at-color-red: $c-red
    --at-color-green: $c-green
    --at-color-gradient: linear-gradient(180deg, transparent, var(--card), 50%, var(--card))


// fix style
.cmt-body.artalk
  .atk-comment>.atk-main>.atk-body
    overflow: visible
  .artalk pre code, .atk-layer-wrap pre code
    background: none
  .atk-main-editor>.atk-textarea-wrap>.atk-textarea
    background: none
    padding: 1rem
    margin: 0
    border: none

  .atk-loading
    border-radius: $border-card
  .atk-main-editor .atk-editor-user-wrap .atk-editor-user .atk-user-profile-btn
    padding: 0
  &:hover
    background: none
  
  .artalk>.atk-list>.atk-list-header 
    padding: .5rem 1rem
    .atk-comment-count
      display: flex
      align-items: baseline
  .artalk>.atk-list>.atk-list-header .atk-dropdown-wrap .atk-arrow-down-icon
    height: 8px
  .artalk>.atk-list>.atk-list-header .atk-text
    display: block

  .atk-notify-wrap .atk-notify
    border-radius: $border-bar
    margin: 8px
  
  // emoticons
  .atk-editor-plug-emoticons>.atk-grp-wrap>.atk-grp
    padding: .5rem
    margin-bottom: 32px
  .atk-editor-plug-emoticons>.atk-grp-wrap>.atk-grp[data-type=image]>.atk-item
    width 3rem
    height: 3rem
    margin: 0
    border-radius: 4px
    padding: .5rem
    >img
      border-radius: 4px


// override
.md-text .cmt-body.artalk .artalk
  --gap-p: 1rem
  p
    line-height: 1.5
    font-size: $fs-15
    >img
      margin: var(--gap-p) auto
      border-radius: $border-image-s
  a>img
    display: inline
  img[atk-emoticon]
    max-height: 1.5em
    transform: scale(1.2)
    margin: 0 4px
    vertical-align: bottom
    border-radius: 4px
  ul li, ol li
    font-size: $fs-14
  blockquote
    position: relative
    border-left: none
    background: none
    padding: 0.25rem 1rem
    p
      color: var(--text-p3)
  .atk-content
    a
      --at-color-main: var(--link)
    pre>code
      padding: 0