.cherry-markdown {
  word-break: break-all;
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    font-family: inherit;
    font-weight: 700;
    line-height: 1.1;
    color: inherit;
  }

  h1 small,
  h2 small,
  h3 small,
  h4 small,
  h5 small,
  h6 small,
  .h1 small,
  .h2 small,
  .h3 small,
  .h4 small,
  .h5 small,
  .h6 small,
  h1 .small,
  h2 .small,
  h3 .small,
  h4 .small,
  h5 .small,
  h6 .small,
  .h1 .small,
  .h2 .small,
  .h3 .small,
  .h4 .small,
  .h5 .small,
  .h6 .small {
    font-weight: normal;
    line-height: 1;
    color: #999;
  }

  h1,
  h2,
  h3 {
    margin-top: 30px;
    margin-bottom: $elementGap;
  }

  h1 small,
  h2 small,
  h3 small,
  h1 .small,
  h2 .small,
  h3 .small {
    font-size: 65%;
  }

  h4,
  h5,
  h6 {
    margin-top: $elementLittleGap;
    margin-bottom: $elementLittleGap;
  }

  h4 small,
  h5 small,
  h6 small,
  h4 .small,
  h5 .small,
  h6 .small {
    font-size: 75%;
  }

  h1,
  .h1 {
    font-size: 2em;
  }

  h2,
  .h2 {
    font-size: 1.5em;
  }

  h3,
  .h3 {
    font-size: 1.25em;
  }

  h4,
  .h4 {
    font-size: 1em;
  }

  h5,
  .h5 {
    font-size: 0.875em;
  }

  h6,
  .h6 {
    font-size: 0.85em;
  }

  b,
  strong {
    font-weight: bold;
  }

  ul,
  ol {
    padding-left: 24px;
    margin-bottom: $elementGap;

    ul,
    ol {
      margin-bottom: 0;
    }

    li {
      list-style: inherit;
      p {
        margin: 0;
      }
    }
  }

  div {
    ul,
    ol {
      margin-bottom: 0;
    }
  }

  hr {
    height: 0;
    border: 0;
    border-top: 1px solid $borderColor;
    margin: $elementGap 0;
    box-sizing: content-box;
    overflow: visible;
  }

  table {
    border-collapse: collapse;
    th,
    td {
      border: 1px solid $borderColor;
      padding: 0.2em 0.4em;
      min-width: 100px;
    }
    th {
      background-color: #eee;
    }
  }

  .link-quote {
    color: $linkColor;
  }

  a {
    color: $linkColor;
    position: relative;
    text-decoration: none;

    &[target='_blank'] {
      padding: 0 2px;

      &::after {
        content: '\EA10';
        font-size: 12px;
        font-family: 'ch-icon';
        margin: 0 2px;
      }
    }

    &:hover {
      color: $linkHoverColor;
    }
  }

  em {
    font-style: italic;
  }

  sup {
    vertical-align: super;
  }

  sub {
    vertical-align: sub;
  }

  figure {
    overflow-x: auto;
  }

  blockquote {
    color: $quoteColor;
    padding: 10px 15px;
    border-left: 10px solid $quoteBorderColor;
    background: $quoteBackground;
  }

  p,
  pre,
  blockquote,
  table {
    margin: 0 0 $elementGap;
  }

  pre {
    padding: 16px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f6f8fa;
    border-radius: 6px;
  }

  // 适配历史文章样式
  @import 'prettyprint/prettyprint.scss';

  div[data-type='codeBlock'] {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
    margin-bottom: 16px;
    font-size: 14px;
    overflow-x: auto;

    & > pre {
      margin: 0;
      code[class*='language-'] {
        counter-reset: line;
        &.wrap {
          white-space: pre-wrap;
        }
        .code-line {
          display: inline-block;
          position: relative;
          padding-left: 3em;
          height: 1.3em;
          line-height: 2em;
          &:before {
            counter-increment: line;
            content: counter(line);
            margin-right: 1em;
            position: absolute;
            left: 0;
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  /* Inline code */
  :not(pre) > code {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
    color: #f85353;
    background-color: #e5e5e5;

    [data-inline-code-theme='black'] & {
      color: #3f4a56;
      background-color: #e5e5e5;
    }
  }

  a.anchor:before {
    content: '\a7'; // §
    text-decoration: none;
    width: 15px;
    font-size: 0.5em;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    margin-left: -15px;
  }

  .toc {
    margin-bottom: $elementGap;
    padding-left: 0;

    .toc-title {
      font-size: 24px;
      margin-bottom: 5px;
    }

    .toc-li {
      border-bottom: 1px ridge $borderColor;
      list-style: none;

      a {
        text-decoration: none;
        color: $fontColor;

        &:hover {
          color: $linkHoverColor;
        }
      }
    }
  }

  .check-list-item {
    list-style: none;

    .ch-icon {
      margin: 0 6px 0 -20px;
    }
  }

  .footnote:not(a) {
    .footnote-title {
      font-size: 20px;
      margin-top: -38px;
      background-color: $editorBg;
      width: 60px;
      margin-bottom: $elementGap;
    }

    padding-top: 20px;
    border-top: 1px solid $borderColor;
    margin-top: 50px;

    .one-footnote {
      color: $subTitle;
      margin-bottom: $elementGap;
      border-bottom: 1px dotted $borderColor;
    }
  }

  .cherry-table-container {
    max-width: 100%;
    overflow-x: auto;
    .cherry-table {
      th,
      td {
        border: 1px solid $borderColor;
        padding: 0.2em 0.4em;
        min-width: 100px;
        // 修复在以下情况，单元格高度不被撑开的问题
        // 1. 整列没有内容的情况下
        // 2. 除了合并的单元格，整列没有内容的情况下
        &:empty::after {
          content: '.';
          visibility: hidden;
        }
      }
      th {
        white-space: nowrap;
      }
    }
  }

  /* 数学表达式展示 */
  mjx-assistive-mml {
    position: absolute;
    top: 0;
    left: 0;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 1px 0 0 0;
    border: 0;
  }

  &.head-num {
    // Auto Numbering for Headings
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      .anchor:before {
        width: auto;
        font-size: inherit;
        vertical-align: inherit;
        padding-right: 10px;
      }
    }

    counter-reset: level1;

    h1 {
      counter-reset: level2;
    }

    h2 {
      counter-reset: level3;
    }

    h3 {
      counter-reset: level4;
    }

    h4 {
      counter-reset: level5;
    }

    h5 {
      counter-reset: level6;
    }

    h1 .anchor:before {
      counter-increment: level1;
      content: counter(level1) '. ';
    }

    h2 .anchor:before {
      counter-increment: level2;
      content: counter(level1) '.' counter(level2) ' ';
    }

    h3 .anchor:before {
      counter-increment: level3;
      content: counter(level1) '.' counter(level2) '.' counter(level3) ' ';
    }

    h4 .anchor:before {
      counter-increment: level4;
      content: counter(level1) '.' counter(level2) '.' counter(level3) '.' counter(level4) ' ';
    }

    h5 .anchor:before {
      counter-increment: level5;
      content: counter(level1) '.' counter(level2) '.' counter(level3) '.' counter(level4) '.' counter(level5) ' ';
    }

    h6 .anchor:before {
      counter-increment: level6;
      content: counter(level1) '.' counter(level2) '.' counter(level3) '.' counter(level4) '.' counter(level5) '.'
        counter(level6) ' ';
    }
  }
}

div[data-type='codeBlock'] {
  @import 'prism/tomorrow-night';

  [data-code-block-theme='default'] & {
    @import 'prism/default';
  }

  [data-code-block-theme='dark'] & {
    @import 'prism/dark';
  }

  [data-code-block-theme='funky'] & {
    @import 'prism/funky';
  }

  [data-code-block-theme='okaidia'] & {
    @import 'prism/okaidia';
  }

  [data-code-block-theme='twilight'] & {
    @import 'prism/twilight';
  }

  [data-code-block-theme='coy'] & {
    @import 'prism/coy';
  }

  [data-code-block-theme='solarized-light'] & {
    @import 'prism/solarized-light';
  }
}

.cherry-detail {
  details {
    background: #f8f9faaa;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    summary {
      user-select: none;
      padding: 5px 10px;
      background-color: #6c757d;
      color: #FFF;
      border-radius: 8px;
    }
    .cherry-detail-body {
      padding: 15px 25px 0 25px;
    }
  }
}

.cherry-detail__multiple {
  border-radius: 8px;
  overflow: hidden;
  details {
    margin-bottom: 1px;
    border-radius: 0;
    border: none;
    summary {
      border-radius: 0;
    }
  }
}

.cherry-text-align__center {
  table {
    margin-left: auto;
    margin-right: auto;
  }
}

.cherry-text-align__right {
  table {
    margin-left: auto;
  }
}

.cherry-panel {
  margin: 10px 0;
  overflow: hidden;
  border-radius: 8px;
  box-sizing: border-box;
  border: 0.5px solid;
  .cherry-panel--title {
    color: #fff;
    padding: 5px 20px;
    &.cherry-panel--title__not-empty::before {
      font-family: 'ch-icon';
      margin: 0 12px 0 -6px;
      vertical-align: bottom;
    }
  }
  .cherry-panel--body {
    padding: 5px 20px;
  }
}
.cherry-panel__primary {
  background-color: #cfe2ff;
  color: #0a58ca;
  .cherry-panel--title {
    background-color: #0d6dfe;
    &.cherry-panel--title__not-empty::before {
      content: '\EA6A';
    }
  }
}
.cherry-panel__info {
  background-color: #cff4fc;
  color: #087990;
  .cherry-panel--title {
    background-color: #099cba;
    &.cherry-panel--title__not-empty::before {
      content: '\EA69';
    }
  }
}
.cherry-panel__warning {
  background-color: #fff3cd;
  color: #997404;
  .cherry-panel--title {
    background-color: #b38806;
    &.cherry-panel--title__not-empty::before {
      content: '\EA6B';
    }
  }
}
.cherry-panel__danger {
  background-color: #f8d7da;
  color: #b02a37;
  .cherry-panel--title {
    background-color: #dc3545;
    &.cherry-panel--title__not-empty::before {
      content: '\EA68';
    }
  }
}
.cherry-panel__success {
  background-color: #d1e7dd;
  color: #146c43;
  .cherry-panel--title {
    background-color: #198754;
    &.cherry-panel--title__not-empty::before {
      content: '\EA67';
    }
  }
}