$font_size: 2vh;
$margin_h: 0.83vh;
$code_bg: rgb(40, 44, 52);
$corner_radius: 4px;
$theme: #009874;
$shadow:
  0 2px 5px 0 rgba(220, 220, 220, 0.6),
  0 2px 10px 0 rgba(220, 220, 220, 0.2);
$font: Menlo, Monaco, 'Courier New', monospace;

.markdown-body {
  background-color: transparent;
  font-size: $font_size;
  margin-top: -1.25vh;
  margin-bottom: -1.25vh;

  .katex-html[aria-hidden='true'] {
    display: none;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ul,
  ol,
  dl,
  dd,
  blockquote,
  pre,
  code,
  hr,
  table,
  figure {
    margin: $margin_h 0;
  }

  p {
    white-space: pre-wrap;
  }

  ol {
    list-style-type: decimal;
  }

  ul {
    list-style-type: disc;
  }

  pre code,
  pre tt {
    line-height: 1.65;
  }

  .highlight pre,
  pre {
    background-color: $code_bg;
    border-radius: $corner_radius;
    overflow: hidden;
    text-indent: 0;

    code.hljs {
      padding: 0 15px;
      font-size: $font_size;
      color: #fff;
      counter-reset: line;

      .hljs-line::before {
        counter-increment: line;
        content: counter(line);
        display: inline-block;
        width: 20px;
        margin-right: 15px;
        color: #999;
        text-align: right;
      }
    }
  }

  .hljs-string {
    color: rgb(152, 195, 121);
  }

  .hljs-keyword {
    color: rgb(249, 38, 114);
  }

  .hljs-comment {
    color: #7f8c99;
    font-style: normal;
  }

  .code-block-wrapper {
    position: relative;
    padding-top: 3.75vh;
  }

  .code-block-header {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.01vh dashed #888;
    color: #fff;
    background-color: $code_bg;

    &__lang {
      background-color: #424242;
      padding: 0.42vh 15px;
      display: inline-block;
    }

    &__copy {
      cursor: pointer;
      margin-left: 0.5rem;
      user-select: none;
      background-color: #424242;
      padding: 0.42vh 15px;
      display: inline-block;

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

  div[id^='mermaid-container'] {
    padding: 0.33vh;
    // border-radius: 0.33vh;
    margin: $margin_h 0;
    // text-align: center;
    overflow-x: auto !important;
    // background-color: #fff;
    // border: 1px solid #e5e5e5;
  }

  a {
    color: #576b95;
  }

  h1 {
    text-align: center;
    line-height: 1.75;
    font-family: $font;
    font-size: $font_size;
    display: table;
    padding: 0.5em 1em;
    border-bottom: 0.17vh solid $theme;
    margin: 2em auto 1em;
    color: hsl(var(--foreground));
    font-weight: bold;
    text-shadow: 0.17vh 0.17vh 0.33vh rgba(0, 0, 0, 0.1);
    margin-top: 0;
  }

  h2 {
    text-align: center;
    line-height: 1.75;
    font-family: $font;
    font-size: $font_size;
    display: table;
    padding: 0.3em 1em;
    margin: 4em auto 2em;
    color: #fff;
    background: $theme;
    font-weight: bold;
    border-radius: 0.67vh;
    box-shadow: $shadow;
  }

  h3 {
    text-align: left;
    line-height: 1.2;
    font-family: $font;
    font-size: $font_size;
    padding-left: 12px;
    padding-bottom: 0.42vh;
    padding-top: 0.42vh;
    border-left: 0.33vh solid $theme;
    margin: 2em 8px 1em 0;
    color: hsl(var(--foreground));
    font-weight: bold;
    border-bottom: 0.08vh solid $theme;
  }

  h4 {
    display: inline-block;
    border: 0.08vh solid $theme;
    border-top: 0.33vh solid $theme;
    padding-left: 5px;
    padding-right: 5px;
  }

  strong {
    text-align: left;
    line-height: 1.75;
    font-family: $font;
    font-size: inherit;
    color: $theme;
    font-weight: bold;
  }

  ul {
    text-align: left;
    line-height: 1.75;
    list-style: none;
    font-family: $font;
    padding-left: 1.5em;
    margin-left: 0;
    color: hsl(var(--foreground));

    > li::before {
      content: '• ';
      position: absolute;
      left: -27px;
    }
  }

  li {
    text-align: left;
    line-height: 1.75;
    font-family: $font;
    display: block;
    margin: 0.5em 8px;
    text-indent: 20px;
    color: hsl(var(--foreground));
    position: relative;

    pre {
      text-indent: 0;
    }
  }

  ol {
    text-align: left;
    line-height: 1.75;
    font-family: $font;
    font-size: $font_size;
    padding-left: 1.5em;
    margin-left: 0;
    color: hsl(var(--foreground));
    counter-reset: section; /* 创建计数器 */

    > li::before {
      counter-increment: section; /* 递增计数器 */
      content: counter(section) '. '; /* 显示数字（如1.、2.） */
      position: absolute;
      left: -50px;
    }
  }

  code {
    color: rgb(221, 17, 68);
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 0.33vh;
    padding: 0.42vh;
  }

  p {
    text-align: left;
    line-height: 1.75;
    font-family: $font;
    letter-spacing: 0.1em;
    color: hsl(var(--foreground));
  }

  img {
    text-align: left;
    line-height: 1.75;
    font-size: 1.17vh;
    display: block;
    max-width: 100%;
    margin: 0.1em auto 0.5em;
    border-radius: $corner_radius;
    box-shadow: $shadow;
  }

  blockquote {
    text-align: left;
    line-height: 1.5;
    font-family: $font;
    padding: 1.25vh;
    border-left: 0.33vh solid $theme;
    border-radius: $corner_radius;
    color: rgba(0, 0, 0, 0.6);
    background: #e8f2fb;
    margin: 1.67vh 0;
    box-shadow: $shadow;

    p {
      margin: 1.25vh 0;
    }
  }

  hr {
    height: 0.08vh;
    border: none;
    border-top: 0.08vh solid #eee;
    box-shadow: $shadow;
  }

  table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    unicode-bidi: isolate;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-style: normal;
    color: -internal-quirk-inherit;
    text-align: center;
    border-spacing: 2px;
    border-color: gray;
    white-space: normal;
    font-variant: normal;

    thead {
      line-height: 1.75;
      font-family: $font;
      font-size: $font_size;
      background: rgba(0, 0, 0, 0.05);
      font-weight: bold;
      color: #3f3f3f;

      td {
        // text-align: left;
        line-height: 1.75;
        font-family: $font;
        font-size: $font_size;
        border: 0.08vh solid #dfdfdf;
        padding: 0.5em 1em;
        color: #3f3f3f;
        word-break: keep-all;
      }
    }

    td {
      // text-align: left;
      line-height: 1.75;
      font-family: $font;
      font-size: $font_size;
      border: 0.08vh solid #dfdfdf;
      padding: 0.5em 1em;
      color: #3f3f3f;
      word-break: keep-all;
    }
  }
}
