/*
 * Alerts rendered from > [!NOTE] etc. Modelled on the notices on docs.krokedil.com: a
 * tinted box with a thick left border. Each type sets three custom properties, which
 * the theme can override: background, border and accent (the label).
 */
.wp-block-group[class*="is-style-kds-"] {
	--kds-alert-background: #e8f4ff;
	--kds-alert-border: #8fb6e0;
	--kds-alert-color: #0a5aa8;
	background: var(--kds-alert-background);
	border: 0;
	border-left: 5px solid var(--kds-alert-border);
	border-radius: 0;
	padding: var(--wp--preset--spacing--small, 1rem) var(--wp--preset--spacing--small, 1rem) var(--wp--preset--spacing--small, 1rem) calc(var(--wp--preset--spacing--small, 1rem) + 0.25rem);
	font-size: var(--wp--preset--font-size--x-small, 0.9rem);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--body, 1.5);
}

.wp-block-group[class*="is-style-kds-"] > * {
	margin-top: 0;
	margin-bottom: 0;
}

.wp-block-group[class*="is-style-kds-"] > * + * {
	margin-top: 0.5em;
}

.wp-block-group[class*="is-style-kds-"] > .kds-alert__label {
	color: var(--kds-alert-color);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wp-block-group[class*="is-style-kds-"] > .kds-alert__label + * {
	margin-top: 0.25em;
}

.wp-block-group.is-style-kds-tip {
	--kds-alert-background: #eef7e3;
	--kds-alert-border: #a6cf6b;
	--kds-alert-color: #2d6a0f;
}

.wp-block-group.is-style-kds-important {
	--kds-alert-background: #f3eefc;
	--kds-alert-border: #c2aeea;
	--kds-alert-color: #5b33a6;
}

/* The red notice on docs.krokedil.com, which the migration maps to [!WARNING]. */
.wp-block-group.is-style-kds-warning {
	--kds-alert-background: #fde8e8;
	--kds-alert-border: #e7aaaa;
	--kds-alert-color: #a31f1f;
}

.wp-block-group.is-style-kds-caution {
	--kds-alert-background: #fbdcdc;
	--kds-alert-border: #cf2e2e;
	--kds-alert-color: #8f1414;
}