/* Semantic tokens inherit every installed theme, including imported themes. */ :where(.markdown-callout) { --callout-color: var(--color-callout-info, var(--color-info)); } .markdown-callout, .milkdown .ProseMirror blockquote.markdown-callout { border: 1px solid color-mix(in srgb, var(--callout-color) 35%, transparent); border-inline-start: 4px solid var(--callout-color); border-radius: var(--radius-md, 8px); background: color-mix(in srgb, var(--callout-color) 8%, var(--color-surface-primary, var(--paper, #fffdf7))); color: var(--color-text-primary, var(--ink, inherit)); margin: 12px 0; padding: 12px 16px; min-width: 0; } .markdown-callout[data-callout='warning'], .markdown-callout[data-callout='question'] { --callout-color: var(--color-callout-warning, var(--color-warning)); } .markdown-callout[data-callout='danger'], .markdown-callout[data-callout='failure'], .markdown-callout[data-callout='bug'] { --callout-color: var(--color-callout-danger, var(--color-error)); } .markdown-callout[data-callout='success'], .markdown-callout[data-callout='tip'] { --callout-color: var(--color-callout-success, var(--color-success)); } .markdown-callout[data-callout='abstract'], .markdown-callout[data-callout='important'], .markdown-callout[data-callout='example'] { --callout-color: var(--color-callout-important, var(--color-accent-secondary)); } .markdown-callout[data-callout='quote'] { --callout-color: var(--color-callout-quote, var(--color-text-secondary)); } .markdown-callout[data-callout='todo'] { --callout-color: var(--color-callout-info, var(--color-accent-primary)); } .markdown-callout > .callout-title { color: var(--callout-color); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; } .markdown-callout > button.callout-title { background: transparent; border: 0; padding: 0; width: 100%; text-align: start; cursor: pointer; } .markdown-callout > button.callout-title:disabled { opacity: 1; cursor: default; color: var(--callout-color); } .markdown-callout > summary.callout-title { cursor: pointer; } .markdown-callout > :is(button, summary).callout-title:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 4px; border-radius: var(--radius-sm); } .markdown-callout > :is(button:not(:disabled), summary).callout-title:hover { text-decoration: underline; text-underline-offset: 3px; } .markdown-callout .callout-body { min-width: 0; overflow-wrap: anywhere; } .markdown-callout .callout-body > :last-child { margin-bottom: 0; } .markdown-callout[data-collapsed='true'] > .callout-body { display: none; } .callout-marker { display: none; } .callout-title[hidden] { display: none !important; } .callout-marker-editing { opacity: .65; font-family: monospace; }