markdown.css

@layer theme.preview.base {
  :root {
    --gfm-alert-note: var(--blue, hsl(var(--hsl-blue-500)));
    --gfm-alert-tip: var(--green, hsl(var(--hsl-green-500)));
    --gfm-alert-important: var(--purple, hsl(var(--hsl-purple-500)));
    --gfm-alert-warning: var(--orange, hsl(var(--hsl-orange-500)));
    --gfm-alert-caution: var(--red, hsl(var(--hsl-red-500)));

    --mde-preview-line-height: 1.5;
    --mde-preview-inline-mark-text-color: var(--text-color);
    --mde-preview-inline-mark-background-color: hsl(var(--hsl-yellow-500) / 30%);
    --mde-preview-inline-mark-underline-color: hsl(var(--hsl-yellow-500));

    --mde-preview-inline-code-text-color: var(--text-color);
    --mde-preview-inline-code-padding: 0.2em 0.4em;
    --mde-preview-inline-code-font-size: 85%;
    --mde-preview-inline-code-border-width: 0px;
    --mde-preview-inline-code-border-color: var(--border-color);
    --mde-preview-inline-code-background-color: light-dark(
      var(--transparent-black),
      var(--transparent-white)
    );

    /* Link */
    --mde-preview-link-color: var(--link-color);

    /* Input placeholder */
    --mde-preview-input-placeholder-color: light-dark(
      var(--light-text-color),
      var(--dark-text-color)
    );

    /* Headings */
    --mde-preview-heading-color: var(--text-color);
    --mde-preview-heading-border-color: var(--border-color);
    --mde-preview-heading-muted-text-color: var(--muted-text-color);
    --mde-preview-h1-border-width: 2px;
    --mde-preview-heading-border-width: 1px;

    /* Strong / Emphasis */
    --mde-preview-strong-color: var(--text-color);
    --mde-preview-em-color: var(--text-color);

    /* Horizontal rule */
    --mde-preview-hr-border-color: var(--border-color);
    --mde-preview-hr-background-color: var(--solid-border-color);

    /* Blockquote */
    --mde-preview-blockquote-text-color: var(--muted-text-color);
    --mde-preview-blockquote-border-color: var(--solid-border-color);

    /* Image */
    --mde-preview-image-background-color: light-dark(
      var(--strong-transparent-black),
      var(--strong-transparent-white)
    );

    /* Keyboard key */
    --mde-preview-kbd-text-color: var(--kbd-color);
    --mde-preview-kbd-background-color: var(--kbd-background);
    --mde-preview-kbd-border-color: var(--kbd-border-color);
    --mde-preview-kbd-shadow-color: var(--mde-preview-kbd-border-color);

    /* Table */
    --mde-preview-table-head-text-color: var(--text-color);
    --mde-preview-table-head-background-color: light-dark(
      var(--strong-transparent-black),
      var(--strong-transparent-white)
    );
    --mde-preview-table-border-color: var(--solid-border-color);
    --mde-preview-table-row-background-color: light-dark(
      var(--strong-transparent-black),
      var(--strong-transparent-white)
    );
    --mde-preview-table-row-border-color: var(--border-color);
    --mde-preview-table-row-stripe-background-color: light-dark(
      var(--transparent-black),
      var(--transparent-white)
    );

    /* Footnotes */
    --mde-preview-footnote-text-color: var(--muted-text-color);
    --mde-preview-footnote-border-color: var(--solid-border-color);
    --mde-preview-footnote-highlight-border-color: var(--primary-color-active);

    /* Task list */
    --mde-preview-task-list-checked-color: var(--muted-text-color);

    /* Code block */
    --mde-preview-codeblock-meta-font-size: 80%;
    --mde-preview-codeblock-meta-text-color: var(--muted-text-color);
    --mde-preview-codeblock-meta-background-color: light-dark(
      var(--transparent-black),
      var(--transparent-white)
    );
    --mde-preview-codeblock-text-color: var(--text-color);
    --mde-preview-codeblock-background-color: light-dark(
      hsl(var(--hsl-slate-200) / 10%),
      hsl(var(--hsl-neutral-700) / 20%)
    );
    --mde-preview-codeblock-border-color: light-dark(
      hsl(var(--hsl-slate-300) / 50%),
      hsl(var(--hsl-blue-200) / 10%)
    );
  }

  .mde-preview {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    margin: 0;
    color: var(--text-color);
    /* font-family: */
    /*   "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, */
    /*   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', */
    /*   Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; */
    font-size: 16px;
    line-height: var(--mde-preview-line-height);
    word-wrap: break-word;

    .metadata + h1,
    .metadata + h2,
    .metadata + h3,
    .metadata + h4,
    .metadata + h5,
    .metadata + h6 {
      padding-top: 0;
      margin-top: 0;
    }

    details,
    figcaption,
    figure {
      display: block;
    }

    summary {
      display: list-item;
    }

    iframe {
      border: none;
      width: 100%;
      height: clamp(320px, 50vh, 640px);
    }

    [hidden] {
      display: none !important;
    }

    a {
      background-color: transparent;
      color: var(--mde-preview-link-color);
      text-decoration: none;
    }

    abbr[title] {
      border-bottom: none;
      text-decoration: underline dotted;
    }

    b,
    strong {
      font-weight: var(--font-weights-bold, 600);
      color: var(--mde-preview-strong-color);
    }

    em {
      color: var(--mde-preview-em-color);
    }

    dfn {
      font-style: italic;
    }

    h1 {
      margin: 0.67em 0;
      font-weight: var(--font-weights-bold, 600);
      padding-bottom: 0.3em;
      font-size: var(--h1);
      border-bottom: var(--mde-preview-h1-border-width) solid
        var(--mde-preview-heading-border-color);
    }

    mark {
      color: var(--mde-preview-inline-mark-text-color, currentColor);
      background-color: var(--mde-preview-inline-mark-background-color);
      text-decoration: underline var(--mde-preview-inline-mark-underline-color);
      text-underline-offset: 3px;
      text-decoration-thickness: 3px;
      text-decoration-style: solid;
      text-decoration-skip-ink: none;
    }

    small {
      font-size: 90%;
    }

    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }

    sub {
      bottom: -0.25em;
    }

    sup {
      top: -0.5em;
    }

    img {
      border-style: none;
      max-width: 100%;
      box-sizing: content-box;
      background-color: var(--mde-preview-image-background-color);
    }

    code,
    kbd,
    pre,
    samp {
      font-family: monospace;
      font-size: 1em;
    }

    figure {
      margin: 1em 40px;
    }

    hr {
      box-sizing: content-box;
      overflow: hidden;
      background: transparent;
      border-bottom: 1px solid var(--mde-preview-hr-border-color);
      height: 0.25em;
      padding: 0;
      margin: 24px 0;
      background-color: var(--mde-preview-hr-background-color);
      border: 0;
    }

    input {
      font: inherit;
      margin: 0;
      overflow: visible;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
    }

    [type='button'],
    [type='reset'],
    [type='submit'] {
      -webkit-appearance: button;
      appearance: button;
    }

    [type='checkbox'],
    [type='radio'] {
      box-sizing: border-box;
      padding: 0;
    }

    [type='number']::-webkit-inner-spin-button,
    [type='number']::-webkit-outer-spin-button {
      height: auto;
    }

    [type='search']::-webkit-search-cancel-button,
    [type='search']::-webkit-search-decoration {
      -webkit-appearance: none;
      appearance: none;
    }

    ::-webkit-input-placeholder {
      color: inherit;
      opacity: 0.54;
    }

    ::-webkit-file-upload-button {
      -webkit-appearance: button;
      appearance: button;
      font: inherit;
    }

    a:hover {
      text-decoration: underline;
    }

    ::placeholder {
      color: var(--mde-preview-input-placeholder-color);
      opacity: 1;
    }

    hr::before {
      display: table;
      content: '';
    }

    hr::after {
      display: table;
      clear: both;
      content: '';
    }

    pre {
      overflow: auto;
    }

    table {
      border-spacing: 0;
      border-collapse: collapse;
      display: block;
      width: max-content;
      max-width: 100%;
      overflow: auto;
    }

    td,
    th {
      padding: 0;
    }

    details summary {
      cursor: pointer;
    }

    details:not([open]) > *:not(summary) {
      display: none !important;
    }

    kbd {
      display: inline-block;
      padding: 4px 5px;
      font:
        11px ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        Liberation Mono,
        monospace;
      line-height: 1;
      color: var(--mde-preview-kbd-text-color);
      vertical-align: middle;
      background-color: var(--mde-preview-kbd-background-color);
      border: solid 1px var(--mde-preview-kbd-border-color);
      border-bottom-color: var(--mde-preview-kbd-border-color);
      border-radius: 6px;
      box-shadow: inset 0 -1px 0 var(--mde-preview-kbd-shadow-color);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: 24px;
      margin-bottom: 16px;
      font-weight: var(--font-weights-bold, 600);
      line-height: 1.25;
      color: var(--mde-preview-heading-color);
    }

    h2 {
      font-weight: var(--font-weights-bold, 600);
      padding-bottom: 0.3em;
      font-size: var(--h2);
      border-bottom: var(--mde-preview-heading-border-width) solid
        var(--mde-preview-heading-border-color);
    }

    h3 {
      font-weight: var(--font-weights-bold, 600);
      font-size: var(--h3);
    }

    h4 {
      font-weight: var(--font-weights-bold, 600);
      font-size: var(--h4);
    }

    h5 {
      font-weight: var(--font-weights-bold, 600);
      font-size: var(--h5);
    }

    h6 {
      font-weight: var(--font-weights-bold, 600);
      font-size: var(--h6);
      color: var(--mde-preview-heading-muted-text-color);
    }

    p {
      margin-top: 0;
      margin-bottom: 10px;
    }

    blockquote {
      margin: 0;
      padding: 0 1em;
      color: var(--mde-preview-blockquote-text-color);
      border-left: 0.25em solid var(--mde-preview-blockquote-border-color);
    }

    ul,
    ol {
      margin-top: 0;
      margin-bottom: 0;
      padding-left: 2em;
    }

    ol ol,
    ul ol {
      list-style-type: lower-roman;
    }

    ul ul ol,
    ul ol ol,
    ol ul ol,
    ol ol ol {
      list-style-type: lower-alpha;
    }

    dd {
      margin-left: 0;
    }

    tt,
    code,
    samp {
      font-family:
        ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        Liberation Mono,
        monospace;
      font-size: 12px;
    }

    pre {
      margin-top: 0;
      margin-bottom: 0;
      font-family:
        ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        Liberation Mono,
        monospace;
      font-size: 12px;
      word-wrap: normal;
    }

    .octicon {
      display: inline-block;
      overflow: visible !important;
      vertical-align: text-bottom;
      fill: currentColor;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none;
      appearance: none;
    }

    .mr-2 {
      margin-right: var(--base-size-8, 8px) !important;
    }

    & > *:first-child {
      margin-top: 0 !important;
    }

    & > *:last-child {
      margin-bottom: 0 !important;
    }

    a:not([href]) {
      color: inherit;
      text-decoration: none;
    }

    .absent {
      color: light-dark(var(--negative-color), var(--red));
    }

    .anchor {
      float: left;
      padding-right: 4px;
      margin-left: -20px;
      line-height: 1;
    }

    p,
    blockquote,
    ul,
    ol,
    dl,
    table,
    pre,
    details {
      margin-top: 0;
      margin-bottom: 16px;
    }

    blockquote > :first-child {
      margin-top: 0;
    }

    blockquote > :last-child {
      margin-bottom: 0;
    }

    h1:hover .anchor,
    h2:hover .anchor,
    h3:hover .anchor,
    h4:hover .anchor,
    h5:hover .anchor,
    h6:hover .anchor {
      text-decoration: none;
    }

    h1 tt,
    h1 code,
    h2 tt,
    h2 code,
    h3 tt,
    h3 code,
    h4 tt,
    h4 code,
    h5 tt,
    h5 code,
    h6 tt,
    h6 code {
      padding: 0 0.2em;
      font-size: inherit;
    }

    summary h1,
    summary h2,
    summary h3,
    summary h4,
    summary h5,
    summary h6 {
      display: inline-block;
    }

    summary h1 .anchor,
    summary h2 .anchor,
    summary h3 .anchor,
    summary h4 .anchor,
    summary h5 .anchor,
    summary h6 .anchor {
      margin-left: -40px;
    }

    summary h1,
    summary h2 {
      padding-bottom: 0;
      border-bottom: 0;
    }

    ul.no-list,
    ol.no-list {
      padding: 0;
      list-style-type: none;
    }

    ol[type='a s'] {
      list-style-type: lower-alpha;
    }

    ol[type='A s'] {
      list-style-type: upper-alpha;
    }

    ol[type='i s'] {
      list-style-type: lower-roman;
    }

    ol[type='I s'] {
      list-style-type: upper-roman;
    }

    ol[type='1'] {
      list-style-type: decimal;
    }

    div > ol:not([type]) {
      list-style-type: decimal;
    }

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

    li > p {
      margin-top: 16px;
    }

    li + li {
      margin-top: 0.25em;
    }

    dl {
      padding: 0;
    }

    dl dt {
      padding: 0;
      margin-top: 16px;
      font-size: 1em;
      font-style: italic;
      font-weight: var(--font-weights-bold, 600);
    }

    dl dd {
      padding: 0 16px;
      margin-bottom: 16px;
    }

    table thead tr {
      color: var(--mde-preview-table-head-text-color);
      background-color: var(--mde-preview-table-head-background-color);
    }

    table th {
      font-weight: var(--font-weights-bold, 600);
    }

    table th,
    table td {
      padding: 6px 13px;
      border: 1px solid var(--mde-preview-table-border-color);
    }

    table td > :last-child {
      margin-bottom: 0;
    }

    table tr {
      background-color: var(--mde-preview-table-row-background-color);
      border-top: 1px solid var(--mde-preview-table-row-border-color);
    }

    table tbody tr:nth-child(odd) {
      background-color: var(--mde-preview-table-row-stripe-background-color);
    }

    table img {
      background-color: transparent;
    }

    img[align='right'] {
      padding-left: 20px;
    }

    img[align='left'] {
      padding-right: 20px;
    }

    code {
      color: var(--mde-preview-inline-code-text-color, currentColor);
      border: var(--mde-preview-inline-code-border-width, 0) solid
        var(--mde-preview-inline-code-border-color, transparent);
      padding: var(--mde-preview-inline-code-padding);
      margin: 0;
      font-size: var(--mde-preview-inline-code-font-size);
      white-space: break-spaces;
      background-color: var(--mde-preview-inline-code-background-color);
      border-radius: 6px;
    }

    a code {
      color: inherit;
    }

    del code {
      text-decoration: inherit;
    }

    samp {
      font-size: 85%;
    }

    pre code {
      font-size: 100%;
    }

    pre > code {
      padding: 0;
      margin: 0;
      word-break: normal;
      white-space: pre;
      background: transparent;
      border: 0;
    }

    .codeblock .codeblock-meta + pre {
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
    }

    .codeblock .codeblock-meta {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      font-size: var(--mde-preview-codeblock-meta-font-size);
      line-height: 1.3;
      color: var(--mde-preview-codeblock-meta-text-color);
      background-color: var(
        --mde-preview-codeblock-meta-background-color,
        var(--mde-preview-codeblock-background-color)
      );
      border: 1px solid var(--mde-preview-codeblock-border-color);
      border-radius: 6px 6px 0 0;
      border-bottom: none;

      .codeblock-meta-body {
        flex: 1;

        .codeblock-info {
          display: flex;
          flex-wrap: wrap;
          gap: 0.4em;

          & :first-child:first-letter {
            text-transform: capitalize;
          }
        }
      }

      .codeblock-meta-icon {
        display: flex;
        align-items: center;
      }

      .codeblock-title,
      .codeblock-filename {
        font-weight: 600;
      }
    }

    .codeblock {
      position: relative;
      margin-bottom: 16px;
    }

    .codeblock pre {
      margin-bottom: 0;
      word-break: normal;
    }

    .codeblock pre,
    pre {
      position: relative;
      padding: 16px;
      overflow: auto;
      font-size: 85%;
      line-height: 1.45;
      color: var(--mde-preview-codeblock-text-color);
      background-color: var(--mde-preview-codeblock-background-color);
      border: 1px solid var(--mde-preview-codeblock-border-color);
      border-radius: 6px;
    }

    pre code,
    pre tt {
      display: inline;
      max-width: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      line-height: inherit;
      word-wrap: normal;
      background-color: transparent;
      border: 0;
    }

    .mde-preview-code {
      display: flex;
      flex-direction: row;
      gap: 1em;

      &.with-line-numbers code.mde-preview-code-body {
        overflow: auto;
        white-space: pre;
      }

      .mde-preview-code-line-number {
        user-select: none;
        text-align: right;
      }
    }

    [data-footnote-ref]::before {
      content: '[';
    }

    [data-footnote-ref]::after {
      content: ']';
    }

    .footnotes {
      font-size: 12px;
      color: var(--mde-preview-footnote-text-color);
      border-top: 1px solid var(--mde-preview-footnote-border-color);
    }

    .footnotes ol {
      padding-left: 16px;
    }

    .footnotes ol ul {
      display: inline-block;
      padding-left: 16px;
      margin-top: 16px;
    }

    .footnotes li {
      position: relative;
    }

    .footnotes li:target::before {
      position: absolute;
      top: -8px;
      right: -8px;
      bottom: -8px;
      left: -24px;
      pointer-events: none;
      content: '';
      border: 2px solid var(--mde-preview-footnote-highlight-border-color);
      border-radius: 6px;
    }

    .footnotes li:target {
      color: var(--text-color);
    }

    .footnotes .data-footnote-backref g-emoji {
      font-family: monospace;
    }

    g-emoji {
      display: inline-block;
      min-width: 1ch;
      font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
      font-size: 1em;
      font-style: normal !important;
      font-weight: var(--font-weights-normal, 400);
      line-height: 1;
      vertical-align: -0.075em;
    }

    g-emoji img {
      width: 1em;
      height: 1em;
    }

    .task-list-item {
      list-style-type: none;
    }

    ol > li.task-list-item {
      list-style-type: inherit;

      .task-list-item-checkbox {
        margin: 0 0.2em 0 0;
      }
    }

    .task-list-item label {
      font-weight: var(--font-weights-normal, 400);
    }

    .task-list-item.enabled label {
      cursor: pointer;
    }

    .task-list-item + .task-list-item {
      margin-top: 4px;
    }

    .task-list-item .handle {
      display: none;
    }

    .task-list-item-checkbox {
      margin: 0 0.2em 0.25em -1.4em;
      vertical-align: middle;
    }

    .task-list-item .task-list-item-checkbox {
      margin-inline-end: 4px;
    }

    .task-list-item.checked {
      text-decoration: line-through;
      text-decoration-color: var(--mde-preview-task-list-checked-color);
    }

    .contains-task-list:dir(rtl) .task-list-item-checkbox {
      margin: 0 -1.6em 0.25em 0.2em;
    }

    .contains-task-list {
      position: relative;
    }

    .gfm-alert {
      margin-bottom: 16px;
      padding: 0.5rem 1rem;
      border-left: 0.25em solid;

      & > :last-child {
        margin-bottom: 0;
      }
    }

    p.gfm-alert-title {
      margin-bottom: 16px;
      font-weight: 600;

      & > span.icon {
        margin-right: 0.5em;
        display: inline-flex;
        overflow: visible !important;
        vertical-align: text-bottom;
      }
    }

    .gfm-alert-type-note {
      > p.gfm-alert-title {
        color: var(--gfm-alert-note);
      }
      border-color: var(--gfm-alert-note);
    }
    .gfm-alert-type-tip {
      > p.gfm-alert-title {
        color: var(--gfm-alert-tip);
      }
      border-color: var(--gfm-alert-tip);
    }
    .gfm-alert-type-important {
      > p.gfm-alert-title {
        color: var(--gfm-alert-important);
      }
      border-color: var(--gfm-alert-important);
    }
    .gfm-alert-type-warning {
      > p.gfm-alert-title {
        color: var(--gfm-alert-warning);
      }
      border-color: var(--gfm-alert-warning);
    }
    .gfm-alert-type-caution {
      > p.gfm-alert-title {
        color: var(--gfm-alert-caution);
      }
      border-color: var(--gfm-alert-caution);
    }
  }

  @media print {
    .mde-preview {
      table {
        overflow: hidden;
        word-break: break-word;
      }
      pre > code {
        word-wrap: break-word;
        white-space: pre-wrap;
      }
    }
  }
}