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

.cmt-body
  .wl-panel
    margin: 0.5em 0 !important
  .wl-meta-head
    padding: 0 !important
  --waline-font-size: 0.9375rem;
  /* 常规颜色 */
  --waline-white: #fff;
  --waline-light-grey: #999;
  --waline-dark-grey: #666;
  /* 主题色 */
  --waline-theme-color: var(--theme);
  --waline-active-color: var(--accent);
  /* 布局颜色 */
  --waline-color: #444;
  --waline-bgcolor: #fff;
  --waline-bgcolor-light: #f8f8f8;
  --waline-bgcolor-hover: #f0f0f0;
  --waline-border-color: #ddd;
  --waline-disable-bgcolor: #f8f8f8;
  --waline-disable-color: #bbb;
  --waline-code-bgcolor: #282c34;
  /* 特殊颜色 */
  --waline-bq-color: #f0f0f0;
  /* 头像 */
  --waline-avatar-size: 3.25rem;
  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
  /* 徽章 */
  --waline-badge-color: #3498db;
  --waline-badge-font-size: 0.725em;
  /* 信息 */
  --waline-info-bgcolor: #f8f8f8;
  --waline-info-color: #999;
  --waline-info-font-size: 0.725em;
  /* 渲染选择 */
  --waline-border: 1px solid var(--waline-border-color);
  --waline-avatar-radius: 50%;
  --waline-box-shadow: none;

.cmt-body.waline
  ondark()
    --waline-white: #000;
    --waline-light-grey: #666;
    --waline-dark-grey: #999;
    /* 布局颜色 */

    --waline-color: #fff;
    --waline-bgcolor: var(--block);
    --waline-bgcolor-light: #272727;
    --waline-border-color: #333;
    --waline-disable-bgcolor: #444;
    --waline-disable-color: #272727;
    /* 特殊颜色 */
    --waline-bq-color: #272727;
    /* 其他颜色 */
    --waline-info-bgcolor: #272727;
    --waline-info-color: #666;
    .wl-count
      padding: .375em;
      font-weight: bold;
      font-size: 1.25em;
      color: #fff;

  :root[data-theme="dark"] &
    ondark()
  :root:not([data-theme]) &
    @media (prefers-color-scheme: dark)
      ondark()

// override
.md-text .cmt-body.waline
  p
    font-size: var(--waline-font-size)
    line-height: 1.5
    margin: 0
  .wl-reply-to *
    line-height: 1.5
  .wl-header label, .wl-input
    font-size: 0.875em
  .wl-editor
    font-size: var(--waline-font-size)
    font-family: $ff-body
  .wl-content
    .wl-emoji, .vemoji
      height: 2.5em
    img:not(.wl-emoji):not(.vemoji)
      margin-top: 0.5em
      margin-bottom: 0.5em