/*
 * Callouts: Group block styles "Callout: note / warning / important" (inc/block-styles.php), from the Figma
 * legal page (1831:16158 cyan, 1831:16134 orange, 1831:16181 red). 3px left rule + 16px padding (Figma
 * counts the rule, so the text starts 19px in), no radius; the first block is the title (18/26 Medium in
 * the rule colour), the rest is 16/24 #2f2f2f text: 8px under the title, 24px between paragraphs.
 */

.wp-block-group[class*="is-style-callout-"] {
	--rs-callout: var(--wp--preset--color--cyan-100);
	--rs-callout-bg: var(--wp--preset--color--cyan-20);
	box-sizing: border-box;
	padding: 16px;
	border-left: 3px solid var(--rs-callout);
	background: var(--rs-callout-bg);
}

.wp-block-group.is-style-callout-warning {
	--rs-callout: var(--wp--preset--color--orange-100);
	--rs-callout-bg: var(--wp--preset--color--orange-20);
}

/* Figma's red has no palette token. */
.wp-block-group.is-style-callout-danger {
	--rs-callout: #ff171b;
	--rs-callout-bg: #ffeaeb;
}

.wp-block-group[class*="is-style-callout-"] > * {
	margin-block: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--paragraph);
	line-height: 24px;
	letter-spacing: -0.005em;
}

.wp-block-group[class*="is-style-callout-"] > * + * {
	margin-block-start: 8px;
}

.wp-block-group[class*="is-style-callout-"] > * + * + * {
	margin-block-start: 24px;
}

.wp-block-group[class*="is-style-callout-"] > :first-child {
	color: var(--rs-callout);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: 26px;
}