@media print {
  .markdown-rendered pre,
  .HyperMD-codeblock {
    box-shadow: none !important;
  }
}

@media screen, print {
  body {
    --bold-color: rgb(var(--mono-rgb-100));
    --italic-color: rgb(var(--mono-rgb-100));
    --inline-title-color: rgb(var(--mono-rgb-100));
    --h1-color: rgb(var(--mono-rgb-100));
    --h2-color: rgb(var(--mono-rgb-100));
    --h3-color: rgb(var(--mono-rgb-100));
    --h4-color: rgb(var(--mono-rgb-100));
    --h5-color: rgb(var(--mono-rgb-100));
    --h6-color: rgb(var(--mono-rgb-100));
  }
  .markdown-reading-view,
  .markdown-source-view {
    --text-normal: var(--color-base-80);

    transition: var(--anim-duration-fast) ease-in-out;
    letter-spacing: 0.1px;
    font-feature-settings: "ss01" 1, "ss07" 1, "cv07" 1;
  }
  .markdown-preview-view {
    scrollbar-gutter: auto;
  }
  .workspace-tabs {
    overflow: visible;
  }
  .mod-fade::before,
  .mod-fade::after {
    display: none;
  }
  .collapse-indicator {
    --cursor: pointer;
  }
  i,
  em {
    font-weight: var(--font-medium);
  }

  /* Animation */
  .workspace-leaf-content[data-mode="source"] .markdown-reading-view {
    transform: scale(0.99);
  }
  .workspace-leaf-content[data-mode="preview"] .markdown-source-view {
    transform: scale(0.99);
  }

  /* Mode switcher */
  .mod-root .workspace-leaf-content[data-mode="source"] .view-header .view-actions button:nth-last-child(2) {
    background-color: var(--interactive-accent) !important;
    color: var(--text-on-accent) !important;
  }

  /* Image */
  img {
    border-radius: var(--radius-s);
  }

  body:not(.full-width-off) .workspace-leaf-content[data-type="markdown"] {
    .image-embed:not(.canvas-node-content) {
      display: block;
      border-radius: var(--radius-s);
      width: 100%;
      line-height: 0;
    }
    img:not([width]):not([class]) {
      background-color: var(--background-secondary);
      width: 100%;
      max-height: 480px;
      object-fit: contain;
      text-align: center;
    }
  }

  /*Image grid*/
  .img-grid .markdown-preview-section {
    .el-p > p:has(> .image-embed),
    .el-p > p:has(> img) {
      --p-spacing: 4px;
      display: flex;
      gap: 4px;

      line-height: 0;

      br {
        display: none;
      }

      > img,
      > .image-embed {
        flex: 1;
        object-fit: cover;
      }

      img {
        height: -webkit-fill-available;
        overflow: auto;
        object-fit: cover;
      }
      img:not(:only-child),
      span:not(:only-child) img {
        object-fit: cover;
      }
    }
  }

  /* Code */
  .markdown-rendered code,
  .cm-s-obsidian .cm-inline-code:not(.cm-formatting) {
    padding: 2px 4px;
  }

  pre[class*="language-"] code {
    border-radius: 0;
  }

  kbd {
    box-shadow: var(--shadow-editor);
    border: 1px solid var(--background-modifier-border);
    background-color: var(--background-primary);
    padding: var(--tag-padding-y) var(--tag-padding-x);
    font-weight: var(--font-medium);
    font-family: var(--font-text);
  }

  /* Codeblock */
  .markdown-rendered pre,
  .HyperMD-codeblock {
    box-shadow: var(--shadow-editor);
  }

  .HyperMD-codeblock-begin {
    border-bottom: none;
  }
  .HyperMD-codeblock:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end) {
    border-top: none;
    border-bottom: none;
  }
  .HyperMD-codeblock-end {
    border-top: none;
  }

  .HyperMD-codeblock-begin,
  .HyperMD-codeblock-end {
    color: var(--text-faint) !important;

    &:not(:has(.cm-formatting-code-block)) {
      height: 12px;
    }
  }

  .HyperMD-codeblock {
    padding-right: 16px !important;
  }

  .markdown-rendered button.copy-code-button,
  .markdown-source-view.mod-cm6 .edit-block-button,
  .code-block-flair {
    box-shadow: none !important;
    padding: 8px !important;
    line-height: 100%;
    background-color: transparent !important;
  }

  /* Highlight */
  .markdown-reading-view mark,
  .markdown-source-view mark,
  .markdown-rendered mark {
    box-decoration-break: clone;
    border-radius: var(--radius-s);
    padding: 2px 4px;
    color: var(--color-base-100);
    font-weight: var(--font-medium);
    background-color: hsla(var(--color-accent-hsl), 0.25);

    &:not([style]):not([class*="hltr-"]) {
      color: var(--text-accent);
    }
  }

  .cm-s-obsidian span.cm-highlight {
    font-weight: var(--font-medium);
    box-decoration-break: clone;
    padding-top: 2px;
    padding-bottom: 2px;
    color: var(--text-accent);
    background-color: hsla(var(--color-accent-hsl), 0.25);
  }
  .cm-line .cm-highlight:nth-child(1 of .cm-highlight) {
    border-top-left-radius: var(--radius-s);
    border-bottom-left-radius: var(--radius-s);
    padding-left: 4px;
  }
  .cm-line .cm-highlight:nth-last-child(1 of .cm-highlight) {
    border-top-right-radius: var(--radius-s);
    border-bottom-right-radius: var(--radius-s);
    padding-right: 4px;
  }

  /* Link */
  body:not(.clean-link-off) {
    --link-decoration: none;
    --link-external-decoration: none;
  }

  /* Callout */
  .callout:not([data-callout="note-toolbar"]) {
    background: linear-gradient(rgba(var(--callout-color), 0.1), rgba(var(--callout-color), 0.15));
    backdrop-filter: var(--blur-s);
    box-shadow: var(--shadow-editor);

    p:first-child {
      margin-block-start: 8px !important;
    }

    p:last-child {
      margin-bottom: 0;
    }

    pre {
      box-shadow: none;
      border: var(--border-width) solid var(--background-modifier-border);
    }

    .callout-title {
      align-items: center;
      gap: 8px;
    }

    &.is-collapsible .callout-title {
      cursor: pointer;
    }

    .callout-title-inner {
      --p-spacing: 0;
    }

    .callout-icon svg.svg-icon {
      --icon-size: var(--icon-s);
    }

    .callout-content > *:last-child {
      margin-bottom: 0 !important;
    }
  }

  .callout:not([data-callout]) {
    --callout-color: var(--color-accent);
    background-color: hsla(var(--color-accent-hsl), 0.15);
    border-color: hsla(var(--color-accent-hsl), var(--callout-border-opacity));

    .callout-title {
      color: var(--callout-color);
    }
  }

  /* Active line */
  body:not(.active-line-off) .markdown-source-view .cm-active:not(:has(.cm-fold-indicator):hover) {
    &::after {
      position: absolute;
      top: 4px;
      bottom: 4px;
      inset-inline-start: -12px;
      border-left: 4px solid var(--background-modifier-border-hover);
      border-radius: var(--input-radius);
      content: "";
    }
  }

  /* Heading */
  body {
    --h1-size: 1.5em;
    --h2-size: 1.25em;
    --h3-size: 1.125em;
    --h4-size: 1em;
    --h5-size: 1em;
    --h6-size: 0.875em;

    h4,
    .markdown-rendered h4,
    .cm-header-4 {
      opacity: 0.8;
      letter-spacing: normal;
    }

    h5,
    .markdown-rendered h5,
    .cm-header-5 {
      opacity: 0.5;
      letter-spacing: normal;
    }

    h6,
    .markdown-rendered h6,
    .cm-header-6 {
      opacity: 0.5;
      letter-spacing: normal;
      text-transform: uppercase;
    }
  }

  .embed-title {
    color: var(--color-base-100);

    &:empty {
      display: none;
    }
  }

  /* Table */
  :root table {
    border-collapse: separate;
    border-spacing: 0;
  }

  body:not(.full-width-off) table,
  body:not(.full-width-off) .table-wrapper {
    width: 100% !important;
  }

  .markdown-preview-view,
  .cm-sizer {
    table {
      position: relative;
      border-radius: var(--radius-s);
    }

    table::before {
      position: absolute;
      z-index: 1;
      inset: 0;
      border: var(--table-border-width) solid var(--table-border-color);
      border-radius: var(--radius-s);
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      pointer-events: none;
      content: "";
    }

    .table-cell-wrapper:active,
    .table-cell-wrapper:focus,
    .table-cell-wrapper:focus-within {
      background-color: var(--background-modifier-hover) !important;
    }

    thead,
    tbody {
      background-color: var(--background-secondary);
    }

    thead tr th {
      border-top: none;
    }

    tr td,
    tr th {
      border-right: none;
      border-bottom: none;
    }

    th:first-child,
    th:first-child .table-cell-wrapper {
      border-top-left-radius: var(--radius-s);
    }
    th:last-child,
    th:last-child .table-cell-wrapper {
      border-top-right-radius: var(--radius-s);
    }
    tr:last-child td:first-child,
    tr:last-child td:first-child .table-cell-wrapper {
      border-bottom-left-radius: var(--radius-s);
    }
    tr:last-child td:last-child,
    tr:last-child td:last-child .table-cell-wrapper {
      border-bottom-right-radius: var(--radius-s);
    }

    .cm-table-widget[dir="rtl"],
    .el-table[dir="rtl"],
    div[dir="rtl"] {
      th:first-child,
      th:first-child .table-cell-wrapper {
        border-top-right-radius: var(--radius-s);
        border-top-left-radius: 0;
      }
      th:last-child,
      th:last-child .table-cell-wrapper {
        border-top-right-radius: 0;
        border-top-left-radius: var(--radius-s);
      }
      tr:last-child td:first-child,
      tr:last-child td:first-child .table-cell-wrapper {
        border-bottom-right-radius: var(--radius-s);
        border-bottom-left-radius: 0;
      }
      tr:last-child td:last-child,
      tr:last-child td:last-child .table-cell-wrapper {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: var(--radius-s);
      }

      tr th:first-child,
      tr td:first-child {
        border-left: var(--table-border-width) solid var(--table-border-color);
      }
      tr th:last-child,
      tr td:last-child {
        border-left-width: 0 !important;
      }
    }

    .table-col-btn,
    .table-row-btn {
      border: none !important;
    }
  }

  .cm-html-embed td,
  .markdown-rendered td,
  .cm-html-embed th,
  .markdown-rendered th,
  .markdown-source-view.mod-cm6 .cm-table-widget .table-cell-wrapper {
    padding: 8px;
  }

  /* Embed */
  .workspace-leaf-content[data-type="markdown"] {
    .markdown-embed,
    .file-embed {
      border-radius: var(--radius-m);
    }

    .markdown-embed-title {
      font-size: var(--inline-title-size);
    }

    iframe.external-embed {
      border-radius: var(--radius-s);
      aspect-ratio: 16/9;
      height: auto;
    }
  }

  body:not(.full-width-off) .workspace-leaf-content[data-type="markdown"] {
    iframe.external-embed {
      width: 100%;
    }
  }

  /* Blockquote */

  .cm-formatting-quote {
    margin-left: 8px;
  }

  .markdown-rendered blockquote {
    position: relative;
    border-radius: var(--radius-s);
    border-inline-start: none;
    padding-inline: calc(32px + var(--blockquote-border-thickness)) 16px;
    padding-block: 16px;
  }
  .markdown-rendered blockquote > blockquote {
    padding-inline-start: calc(16px + var(--blockquote-border-thickness));
    padding-block: 0 !important;
  }
  .markdown-rendered blockquote > blockquote::before {
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
  }

  .markdown-rendered blockquote::before {
    position: absolute;
    top: 16px;
    bottom: 16px;
    inset-inline-start: 16px;
    border-radius: var(--radius-s);
    background-color: var(--blockquote-border-color);
    width: var(--blockquote-border-thickness);
    pointer-events: none;
    content: "";
  }

  .HyperMD-quote {
    border: solid var(--blockquote-background-color);
    border-width: 0 16px 0 16px;
    background-color: var(--blockquote-background-color);
    &::before {
      width: 0 !important;
    }
  }
  .HyperMD-quote:first-child,
  .cm-sizer > div > div > *:not(.HyperMD-quote) + .HyperMD-quote {
    border-top-width: 16px;
    border-start-start-radius: var(--radius-s);
    border-start-end-radius: var(--radius-s);
    &::before {
      border-start-start-radius: var(--radius-s);
      border-start-end-radius: var(--radius-s);
    }
  }
  .HyperMD-quote:last-child,
  .cm-sizer > div > div > .HyperMD-quote:has(+ *:not(.HyperMD-quote)) {
    border-bottom-width: 16px;
    border-end-start-radius: var(--radius-s);
    border-end-end-radius: var(--radius-s);
    &::before {
      border-end-start-radius: var(--radius-s);
      border-end-end-radius: var(--radius-s);
    }
  }
  /***/

  body:not(.is-mobile) {
    &.theme-light .mod-root .workspace-tab-container {
      box-shadow: rgba(0, 0, 0, 0.04) 0px 24px 48px, rgba(0, 0, 0, 0.02) 0px 4px 16px;
    }
    &.theme-dark .mod-root .workspace-tab-container {
      box-shadow: rgba(0, 0, 0, 0.16) 0px 24px 48px, rgba(0, 0, 0, 0.12) 0px 4px 16px;
    }

    .workspace.is-left-sidedock-open .mod-root .workspace-leaf-resize-handle,
    .workspace.is-right-sidedock-open .mod-root .workspace-leaf-resize-handle {
      border-color: transparent;
    }

    &.is-popout-window .workspace .mod-root {
      margin-left: 8px;
      margin-right: 8px;
    }

    .workspace.is-left-sidedock-open .mod-root,
    .workspace.is-right-sidedock-open .mod-root {
      gap: 8px;
    }

    &:not(.show-ribbon) .workspace:not(.is-left-sidedock-open).is-right-sidedock-open .mod-root {
      margin-left: 8px;

      .workspace-tabs.mod-top-left-space .workspace-tab-header-container {
        margin-left: -8px;
      }

      .workspace-tabs.mod-top-left-space:not(.mod-top-right-space) .workspace-tab-header-container-inner {
        padding-left: 8px;
      }
    }

    .workspace.is-left-sidedock-open:not(.is-right-sidedock-open) .mod-root {
      margin-right: 8px;

      .workspace-tabs.mod-top-right-space .workspace-tab-header-container {
        margin-right: -8px;
      }

      .workspace-tabs:not(.mod-top-left-space).mod-top-right-space .workspace-tab-header-container-inner {
        padding-right: 8px;
      }
    }

    .mod-root {
      padding-bottom: 8px;

      .workspace-tab-container {
        outline: var(--border-width) solid var(--background-modifier-border);
        border-radius: var(--radius-m);
        background-color: var(--background-primary);
      }

      .workspace-tabs:not(:only-of-type) .workspace-tab-container {
        box-shadow: none;
      }

      .workspace-leaf-content[data-type="markdown"] {
        .view-header,
        .markdown-source-view .document-search-container {
          background-color: transparent;
          position: absolute;
          inset: 0 0 auto;
        }

        .view-header::before {
          position: absolute;
          z-index: -1;
          content: "";
          inset: 0;
          background-color: var(--background-primary);
          mask: linear-gradient(to bottom, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.99) 18.4%, hsla(0, 0%, 0%, 0.963) 33.7%, hsla(0, 0%, 0%, 0.92) 46.4%, hsla(0, 0%, 0%, 0.864) 56.7%, hsla(0, 0%, 0%, 0.796) 64.8%, hsla(0, 0%, 0%, 0.72) 71.2%, hsla(0, 0%, 0%, 0.637) 76.1%, hsla(0, 0%, 0%, 0.55) 79.9%, hsla(0, 0%, 0%, 0.46) 82.8%, hsla(0, 0%, 0%, 0.37) 85.2%, hsla(0, 0%, 0%, 0.283) 87.3%, hsla(0, 0%, 0%, 0.2) 89.6%, hsla(0, 0%, 0%, 0.124) 92.3%, hsla(0, 0%, 0%, 0.056) 95.6%, hsla(0, 0%, 0%, 0) 100%);
          border-radius: var(--radius-m) var(--radius-m) 0 0;
        }

        .document-search-container {
          padding: 8px;
          margin: 0;
          background-color: var(--background-primary) !important;
        }

        // Content pusher
        .view-content > .markdown-reading-view > div:first-child:not(.document-search-container),
        .view-content > .markdown-source-view > .cm-editor > .cm-scroller {
          padding-top: calc(var(--file-margins) + var(--view-header-height)) !important;
        }
      }
    }

    &:not(.show-ribbon) .workspace:not(.is-left-sidedock-open) .mod-root .workspace-tab-container {
      border-radius: var(--radius-window);
    }
    .workspace:not(.is-right-sidedock-open) .mod-root .workspace-tab-container {
      border-radius: var(--radius-window);
    }
    &:not(.is-popout-window) .workspace:not(.is-left-sidedock-open):not(.is-right-sidedock-open) {
      background-color: var(--background-primary);

      .mod-root {
        padding-bottom: 0;
      }
      .mod-root .workspace-tab-container {
        margin: 0 !important;
        outline: 1px solid transparent;
        box-shadow: none;
        border: 0px solid transparent !important;
        border-radius: 0;
      }
    }
  }

  body:not(.is-phone) {
    .view-header {
      flex-shrink: 0;
      border: none;
      padding: 0 12px;
      height: var(--view-header-height);
    }

    .view-header-title-parent .view-header-breadcrumb,
    .view-header-title-parent .view-header-breadcrumb-separator {
      opacity: 0.5;
      color: var(--text-muted);
    }
  }

  body.is-mobile {
    .mod-root .view-content {
      background-color: var(--background-primary);
    }

    .markdown-preview-view .task-list-item-checkbox {
      top: 0.25em;
      margin-inline-start: calc((var(--checkbox-size) + 8px) * -1);
      margin-inline-end: 10px;
    }
  }

  body.is-tablet {
    .mod-root .workspace-leaf {
      contain: none !important;
    }
    .mod-root .workspace-tabs.mod-stacked .workspace-tab-header-container-inner {
      display: none;
    }

    .view-header {
      padding: 0 var(--side-padding);

      button {
        height: 100%;
      }
    }
    .view-header-nav-buttons,
    .view-actions {
      gap: 0px !important;
    }
  }
}
