@media screen, print {
  body {
    --callout-blend-mode: normal;
    --callout-border-width: var(--divider-width);
    --callout-padding: 16px;
    --callout-size: var(--font-text-size);
  }

  .callout:not([data-callout="note-toolbar"]) {
    font-size: var(--callout-size);

    p:first-child,
    .callout-content > *:first-child {
      margin-top: 8px;
    }

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

    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;
      color: color-mix(in srgb, rgb(var(--callout-color)), var(--text-normal) 15%);
    }

    .callout-fold {
      padding-inline-end: 0;
    }

    .callout-content {
      margin-left: calc(var(--icon-size) + 8px);
    }
  }

  .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);
    }
  }

  // Callout: Tactile
  body.callouts-tactile .callout:not([data-callout="note-toolbar"]) {
    box-shadow: var(--shadow-tactile);
    background: linear-gradient(rgba(var(--callout-color), 0.1), rgba(var(--callout-color), 0.2));
  }

  // Callout: Padded
  body.callouts-padded.theme-light .callout:not([data-callout="note-toolbar"]) {
    background-color: rgba(var(--callout-color), 0.2);

    .callout-content {
      --callout-content-background: color-mix(in srgb, rgb(var(--callout-color)) 10%, var(--background-primary));
    }
  }
  body.callouts-padded.theme-dark .callout:not([data-callout="note-toolbar"]) {
    background-color: rgba(var(--callout-color), 0.3);

    .callout-content {
      --callout-content-background: color-mix(in srgb, rgb(var(--callout-color)) 15%, var(--background-primary));
    }
  }
  body.callouts-padded .callout:not([data-callout="note-toolbar"]) {
    --callout-border-width: 0;
    --callout-padding: 4px;
    --callout-content-padding: 16px;
    --callout-radius: var(--radius-s);

    position: relative;

    .callout-icon {
      width: 56px;
      position: absolute;
      z-index: -1;
      opacity: 0.2;
      right: 16px;
      top: 8px;
    }

    .callout-icon svg.svg-icon {
      width: 100%;
      height: 100%;
    }

    .callout-title {
      padding: 12px 12px 16px;
      overflow: hidden;
      position: relative;
    }

    .callout-content {
      border-radius: calc(var(--callout-radius) - 4px);
      margin-left: 0 !important;
      background: var(--callout-content-background);
    }

    p:first-child,
    .callout-content > *:first-child {
      margin-top: 0;
    }
  }

  // Callout: Outlined
  body.callouts-outlined {
    .callout:not([data-callout="note-toolbar"]) {
      --callout-border-width: 2px;

      background-color: transparent;
      position: relative;
      overflow: visible;

      .callout-title {
        transform: translateY(-1.75rem);
        width: fit-content;
        padding: 0 8px;
        background-color: var(--background-primary);
        max-width: 90%;
      }

      .callout-content {
        margin-left: 0 !important;
        overflow: visible;
      }

      p:first-child,
      .callout-content > *:first-child {
        margin-top: -1rem;
      }
    }

    .markdown-source-view .cm-embed-block.cm-callout {
      contain: unset !important;
      overflow: visible !important;
      box-shadow: none !important;
    }
  }
}
