// 变量定义
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
$monospace-font: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
$border-color: #eaecef;
$table-border-color: #d0d7de;
$link-color: #0366d6;
$code-bg-color: rgba(27, 31, 35, 0.05);
$code-color: #e01e5a;
$blockquote-color: #6a737d;
$table-bg-color: #f6f8fa;

// 基础样式
.markdown-render {
  font-family: $font-family;
  line-height: 1.6;
  color: #333;

  // 标题样式
  h1,
  h2,
  h3 {
    font-weight: 600;
    margin: 1em 0;
  }

  h1 {
    font-size: 2em;
    margin: 0.67em 0;
    border-bottom: 1px solid $border-color;
    padding-bottom: 0.3em;
  }

  h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
    border-bottom: 1px solid $border-color;
    padding-bottom: 0.3em;
  }

  h3 {
    font-size: 1.25em;
  }

  // 段落样式
  p {
    margin: 1em 0;
  }

  // 列表样式
  ul,
  ol {
    padding-left: 2em;
    margin: 1em 0;

    li {
      margin: 0.5em 0;
    }
  }

  // 链接样式
  a {
    color: $link-color;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  // 引用样式
  blockquote {
    margin: 1em 0;
    padding: 0 1em;
    color: $blockquote-color;
    border-left: 0.25em solid $border-color;
  }

  // 表格样式
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    margin: 1em 0;
    border-spacing: 0;
    border-collapse: collapse;

    thead,
    tbody {
      display: table-header-group;
      vertical-align: middle;
      border-color: inherit;
    }

    tbody {
      display: table-row-group;
    }

    tr {
      display: table-row;
      vertical-align: inherit;
      border-color: inherit;
      background-color: #fff;

      &:nth-child(2n) {
        background-color: $table-bg-color;
      }
    }

    th,
    td {
      display: table-cell;
      padding: 6px 13px;
      border: 1px solid $table-border-color;
      text-align: left;
    }

    th {
      font-weight: 600;
      background-color: $table-bg-color;
    }

    td {
      vertical-align: top;
    }
  }

  // 代码块样式
  pre {
    background-color: $table-bg-color;
    border-radius: 6px;
    padding: 16px;
    overflow: auto;
    margin: 1em 0;

    code {
      background-color: transparent;
      padding: 0;
      border-radius: 0;
      font-family: $monospace-font;
      font-size: 85%;
      line-height: 1.45;
    }
  }

  // 行内代码样式
  :not(pre) > code {
    color: $code-color;
    background-color: $code-bg-color;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: $monospace-font;
    font-size: 85%;
  }

  // 代码高亮颜色
  .hljs {
    color: #24292e;

    &-keyword,
    &-selector-tag,
    &-subst {
      color: #d73a49;
    }

    &-string,
    &-doctag {
      color: #032f62;
    }

    &-title,
    &-section,
    &-selector-id {
      color: #6f42c1;
    }

    &-comment,
    &-quote {
      color: #6a737d;
    }

    &-number,
    &-literal {
      color: #005cc5;
    }
  }
}
