if (hexo-config('comment') && hexo-config('comment.enable') == true && hexo-config('comment.use')) {
  if (hexo-config('comment.use') == "valine") {
    @import "./valine.styl"
  }
  else if (hexo-config('comment.use') == "gitalk") {
    @import "./gitalk.styl"
  }
  else if (hexo-config('comment.use') == "twikoo") {
    @import "./twikoo.styl"
  }
  else if (hexo-config('comment.use') == "waline") {
    @import "./waline.styl"
  }
}

.comments-container {
  display inline-block
  width 100%
  margin-top var(--component-gap)

  .comment-area-title {
    width 100%
    color var(--text-color-3)
    font-size 1.38rem
    line-height 2

    i {
      color var(--text-color-3)
    }

    +keep-tablet() {
      font-size 1.2rem
    }
  }


  .configuration-items-error-tip {
    display flex
    align-items center
    margin-top 1rem
    color var(--text-color-3)
    font-size 1rem

    i {
      margin-right 0.3rem
      color var(--text-color-3)
      font-size 1.2rem
    }
  }

  .comment-plugin-fail {
    display none
    flex-direction column
    align-items center
    justify-content space-around
    width 100%
    padding 2rem

    .fail-tip {
      color var(--text-color-3)
      font-size 1.1rem
    }

    .reload {
      margin-top 1rem
    }
  }

  .comment-plugin-loading {
    flex-direction column
    padding 1rem
    color var(--text-color-3)

    .loading-icon {
      color var(--text-color-4)
      font-size 2rem
    }

    .load-tip {
      margin-top 1rem
      color var(--text-color-4)
      font-size 1.1rem
    }
  }
}