// markdown
.dp-md-view {
  pre {
    position: relative;
    code {
      padding-right: 32px!important;
    }
  }
  .md-view-copy-icon {
    cursor: pointer;
    position: absolute;
    right: 8px;
    top: 9px;
    &:hover {
      opacity: 0.5;
    }
  }
}
.g-md-container {
  :deep(.md-toolbar-container) {
    padding-right: 88px;
  }
  :deep(.dp-editor-md-preview-container.dp-md-view summary) {
    cursor: pointer;
  }
  position: relative;
  .g-md-preview-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    color: var(--color-lighter);
    &:hover {
      :deep(.button-content) {
        color: var(--color-primary) !important;
      }
    }
  }
  .g-md-upload-btn {
    position: absolute;
    left: 710px;
    top: 10px;
    cursor: pointer;
    :deep(.devui-icon__container) {
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
    :deep(.icon) {
      color: var(--devui-icon-text, #71757f);
    }
  }
  :deep(.devui-fullscreen) {
    z-index: 999 !important;
  }
}

:deep(.dp-md-container) {
  border: none;
  .CodeMirror {
    border-radius: 3px;
    pre {
      word-break: break-all;
    }
  }
}
.dp-editor-md-preview-container.dp-md-view {
  word-break: break-all;
  line-height: normal;
  * {
    box-sizing: border-box;
  }
  /* 文章正文 */
  p {
    font-size: 14px;
    color: var(--color-G900);
    font-weight: normal;
    line-height: 26px;
    margin: 0;
    overflow-x: auto;
    overflow: hidden;
  }
  p:has(+ pre) {
    margin-bottom: 8px;
  }
  span,
  p span {
    line-height: 1.5;
  }
  /* 加粗 */
  strong {
    font-weight: bold;
  }
  /* 斜体 */
  i,
  cite,
  em,
  var,
  address,
  dfn {
    font-style: italic;
  }
  /* 上标 */
  sup {
    left: 2px;
  }
  /* 下标 */
  sub {
    margin: 0 2px;
  }
  /* 标题通用格式 */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--color-G900);
    margin: 0.67em 0;
    font-weight: 600;
  }
  h1 {
    font-size: 22px;
    line-height: 32px;
    margin-top: 24px;
    margin-bottom: 16px;
  }
  h2 {
    font-size: 20px;
    line-height: 30px;
  }

  h3 {
    font-size: 18px;
    line-height: 28px;
  }

  h4 {
    font-size: 16px;
    line-height: 26px;
  }

  h5 {
    font-size: 16px;
    line-height: 24px;
  }

  h6 {
    font-size: 16px;
    line-height: 24px;
  }

  h1 code {
    font-size: 28px;
  }

  h2 code {
    font-size: 24px;
  }

  h3 code {
    font-size: 22px;
  }

  h4 code {
    font-size: 20px;
  }

  h5 code {
    font-size: 18px;
  }

  h6 code {
    font-size: 16px;
  }

  /* 列表（有序，无序） */
  ul,
  ol {
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 14px;
    overflow: hidden;
    overflow-x: auto;
    color: var(--color-CG600);
  }
  li {
    margin: 4px 0 0 18px;
  }
  ol,
  ol > li {
    list-style-type: decimal !important;
    // 表达式,修复有序列表序号展示不全的问题
    :nth-child(n+10){
      margin-left: 24px;
    }
    :nth-child(n+100){
      margin-left: 30px;
    }
  }
  ul,
  ul > li {
    list-style-type: disc;
    font-size: 14px;
    margin-right: 11px;
    color: var(--color-G900);
  }
  ol ul,
  ol ul > li,
  ul ul,
  ul ul li {
    // list-style: circle;
    font-size: 14px;
    list-style: none;
    margin-left: 16px;
  }
  ul ul ul,
  ul ul ul li,
  ol ol,
  ol ol > li,
  ol ul ul,
  ol ul ul > li,
  ul ol,
  ul ol > li {
    list-style: square;
  }

  /* 任务列表 */
  .task-list-item {
    list-style: none;
    margin: 8px 0 0 0;
  }
  .task-list-item label {
    margin-left: 4px;
  }
  input[type=checkbox]+label, label+a {
    vertical-align: middle;
  }
  input[type=checkbox]+label {
    margin-left: 5px;
  }

  /* 图片 */
  img {
    margin: 8px 0;
    max-width: 100%;
    display: inline-block;
  }

  /* 引用 */
  blockquote {
    display: block;
    padding: 16px;
    margin: 0 0 24px;
    border-left: 8px solid #dddfe4;
    background: #eef0f4;
    overflow: auto;
    word-break: break-word !important;
  }

  blockquote ul,
  blockquote ol {
    margin-bottom: 0;
    padding: 0;
    font-size: 14px;
    line-height: 22px;
  }

  blockquote ul li {
    margin-bottom: 0;
  }

  blockquote ol li {
    margin-bottom: 0;
  }

  /* 引用 - 文字 */
  blockquote p {
    font-size: 14px;
    line-height: 22px;
    color: #555666;
    font-weight: normal;
    margin-bottom: 0;
  }

  /* 分割线 */
  hr {
    margin: 24px 0;
    border: none;
    border-bottom: solid #ddd 1px;
  }

  /* 表格 */
  tbody {
    border: 0;
  }

  table tr {
    border: 0;
    border-top: 1px solid #ddd;
    background-color: white;
  }

  table {
    border-collapse: collapse;
    display: table;
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
  }

  tbody {
    border: 0;
  }

  table tr:nth-child(2n) {
    background-color: #f7f7f7;
  }

  table tr th,
  table tr td {
    font-size: 14px;
    color: #4f4f4f;
    line-height: 22px;
    border: 1px solid #ddd;
    padding: 8px;
    word-break: normal !important;
    vertical-align: middle;
  }

  table tr th code,
  table tr td code {
    white-space: normal;
    word-break: normal !important;
  }

  table tr th {
    font-weight: bold;
    background-color: #eff3f5;
  }

  /* 目录列表 */
  dl {
    margin: 24px;
  }

  dl dt {
    margin: 8px;
    font-weight: bold;
  }
  dl dd {
    margin: 0 0 8px 40px;
  }
  dl dt dd {
    margin: 8px;
  }

  /* pre */
  pre {
    margin-bottom: 24px;
    white-space: pre-wrap;
    padding: 0;
  }
  pre code {
    // color: unset;
    color: var(--color-G900);
  }

  /* 代码块字体 */
  code,
  kbd,
  pre,
  samp {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-G900);
  }
  code {
    color: #c7254e;
    // background-color: #f9f2f4;
    background-color: var(--color-G200);
    border-radius: 4px;
    padding: 6px;
    // display: inline;
  }
  kbd {
    padding: 2px 8px;
    border: 1px solid rgba(63, 63, 63, 0.25);
    box-shadow: 0 1px 0 rgba(63, 63, 63, 0.25);
    background-color: #fff;
    color: #333;
    border-radius: 4px;
    display: inline-block;
    margin: 0 2px;
    white-space: nowrap;
  }

  /* 超链接 */
  a {
    // color: #4ea1db;
    color: var(--color-B600);
    text-decoration: none;
  }

  a:hover,
  a:focus {
    // color: #ca0c16;
    color: var(--color-B600);
    text-decoration: underline;
  }

  a:visited {
    // color: #6795b5;
    color: var(--color-B600);
  }

  /* abbr */
  abbr[title],
  abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted #999;
  }

  /* toc TODO: devui 尚未支持 */
  .toc {
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 24px;
    padding: 0;
  }

  .toc ul {
    margin: 0 0 8px;
    padding: 0;
  }

  .toc ul ul {
    padding-left: 24px;
  }

  .toc ul li {
    list-style-type: none;
    margin: 8px 0 0 24px;
  }

  /* 脚注  TODO: devui 尚未支持*/
  .footnote {
    vertical-align: top;
    position: relative;
    top: -4px;
    font-size: 12px;
  }

  .footnotes ol li {
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 8px 24px;
  }
}