/*
 * rooster/note (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (BRIEF-2026-11-01-LANDINGS-BY-TEMPLATE.md, order 1): the legacy promo split's aside, complete on its
 * own: 0.75rem corners, the 4 px rule in the family's colour on the left, the card surface, 1rem inside, the small type
 * on a relaxed leading. Colours are the theme's tokens with the legacy's light and dark values as fallbacks. Compiled by
 * build/blocks-css.mjs.
 */

@import "../../theme.css";

/*
 * The Rooster One template's palette, defined here for this recipe (the legacy's light and dark pairs): nothing
 * reads an undefined custom property. `:where()`: a block's tone (its own sheet) re-maps the brand over it.
 */
:where(.rooster-note) {
	--wp--custom--rooster-one--line: light-dark(#d5dbe3, rgb(255 255 255 / 12%));
	--wp--custom--rooster-one--mute: light-dark(#5b6168, #d3d6d9);
	--wp--custom--rooster-one--ink: light-dark(#212222, #eff0f0);
}

.rooster-note {
	box-sizing: border-box;
	padding: 1rem;
	border-left: 4px solid var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
	border-radius: 0.75rem;
	background: light-dark(var(--wp--preset--color--bg, #ffffff), var(--wp--preset--color--neutral-50, #0f172b));
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--wp--preset--color--contrast-2, light-dark(#45556c, #cad5e2));
	overflow-wrap: normal;
	word-break: normal;
	margin-block-end: 0;
}

/*
 * The rule (order 2: the legacy Rooster One landing's `.note`): 3 px of the line colour at the left, 10 px over and
 * under, 16 px before the words, 12.5 px muted on a 1.6 leading, bold in the ink. The template's own palette as custom
 * tokens (`--wp--custom--rooster-one--*`) with the legacy's light and dark values as fallbacks.
 */
.rooster-note.rooster-note--rule {
	padding: 10px 0 10px 16px;
	border-left: 3px solid var(--wp--custom--rooster-one--line);
	border-radius: 0;
	background: none;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--wp--custom--rooster-one--mute);
}

.rooster-note--rule strong {
	font-weight: 600;
	color: var(--wp--custom--rooster-one--ink);
}