/**
 * core/paragraph「デモの吹き出し」（is-style-demo）。
 * コードの下に置く「▼ デモ」の小さなラベル。旧記事の <div class="demo">（theme.json の .demo）と同じ見た目。
 * 地 primary-pale・文字 ink・12px/700・角丸 999px・枠は drop-shadow 4方向（しっぽにも線を出すため）・下向きのしっぽ。
 */

/*
 * 文字の幅だけの箱（fit-content）にしつつ、本文の幅（content-size）の左端にそろえる。
 * 編集画面の本文は constrained（中央寄せ）で、コアの
 *   .editor-styles-wrapper .is-layout-constrained > :where(...) { margin-left/right: auto !important }（0-2-0）
 * が効く。inline-block だと本文の幅より左にはみ出し、fit-content だけだと中央に寄るので、
 * :root を付けて（0-2-1）左の余白を「（親の幅 − 本文の幅）÷ 2」にする。表示側（flow）では 0 になる。
 */
:root p.is-style-demo {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 100%)) / 2)) !important;
	margin-right: auto !important;
}

p.is-style-demo {
	position: relative;
	display: block;
	width: fit-content;
	margin-top: 2em;
	margin-bottom: 0.8em;
	padding: 3px 13px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary-pale);
	color: var(--wp--preset--color--ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
	filter:
		drop-shadow(1px 0 0 var(--wp--preset--color--label-border))
		drop-shadow(-1px 0 0 var(--wp--preset--color--label-border))
		drop-shadow(0 1px 0 var(--wp--preset--color--label-border))
		drop-shadow(0 -1px 0 var(--wp--preset--color--label-border));
}

p.is-style-demo::after {
	content: "";
	position: absolute;
	top: calc(100% - 1px);
	left: calc(50% - 6px);
	width: 12px;
	height: 7px;
	background-color: var(--wp--preset--color--primary-pale);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}