/**
 * GitHub-style Alerts (Issue #1136)
 *
 * Styles the `> [!NOTE]` / `[!TIP]` / `[!IMPORTANT]` / `[!WARNING]` / `[!CAUTION]`
 * callouts emitted by all three Markdown pipelines (markdown-it in the editor and
 * the client fallback, league/commonmark on the server). The markup is always:
 *
 *   <div class="gfmr-alert gfmr-alert-note">
 *     <p class="gfmr-alert-title"><svg class="gfmr-alert-icon">…</svg>Note</p>
 *     …body…
 *   </div>
 *
 * The frontend container (.gfmr-markdown-rendered) and the editor preview
 * (.gfmr-markdown-rendered-preview) are matched through one :is() group so the
 * author and the visitor cannot drift apart.
 *
 * Colours come from --gfmr-alert-accent-* in gfmr-variables.css, which tracks the
 * light/dark theme; only shape lives here.
 */

:is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert {
	padding: 0.5rem 1em;
	margin: 0 0 16px 0;
	border-left: 0.25em solid var(--gfmr-alert-accent, #0969da);
}

:is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert > :first-child {
	margin-top: 0;
}

:is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert > :last-child {
	margin-bottom: 0;
}

:is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert-title {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	font-weight: 600;
	line-height: 1;
	color: var(--gfmr-alert-accent, #0969da);
}

:is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert-icon {
	flex: 0 0 auto;
	margin-right: 0.5em;

	/* The inline SVG also carries fill="currentColor" so the icon stays visible
	   if this stylesheet is blocked or overridden by a theme reset. */
	fill: currentcolor;
}

/* Per-type accent. Each modifier only pins the shared custom property, so every
   structural rule above works for all five types. */

:is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert-note {
	--gfmr-alert-accent: var(--gfmr-alert-accent-note, #0969da);
}

:is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert-tip {
	--gfmr-alert-accent: var(--gfmr-alert-accent-tip, #1a7f37);
}

:is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert-important {
	--gfmr-alert-accent: var(--gfmr-alert-accent-important, #8250df);
}

:is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert-warning {
	--gfmr-alert-accent: var(--gfmr-alert-accent-warning, #9a6700);
}

:is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert-caution {
	--gfmr-alert-accent: var(--gfmr-alert-accent-caution, #cf222e);
}

/*
 * Style presets shape alerts the way they shape blockquotes (padding, radius,
 * rhythm) but never repaint the accent: the colour carries the alert's meaning,
 * so it stays GitHub's under all four presets.
 *
 * The spacing values intentionally mirror the blockquote preset rules in
 * blocks/markdown/style.css and must be kept in step with them. They cannot
 * simply join those selector lists: that stylesheet ships as the `gfmr-block-style`
 * handle, which WordPress only enqueues when the Markdown BLOCK renders — a
 * [gfmr_markdown] shortcode page never loads it, and alerts must be styled there
 * too. `github` (the default preset) adds no override and uses the base rules.
 */

[data-gfmr-style-preset="obsidian"] :is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert {
	padding: 0.75rem 1rem;
	border-radius: 6px;
}

[data-gfmr-style-preset="vscode"] :is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert {
	padding: 0.65rem 1rem;
}

[data-gfmr-style-preset="technical-book"] :is(.gfmr-markdown-rendered, .gfmr-markdown-rendered-preview) .gfmr-alert {
	padding: 0.85rem 1.1rem;
	margin-bottom: 1.1rem;
}