/**
 * BW Guides design kit — editor preview.
 *
 * Mirror of the component rules in the CLIENT plugin's stylesheet
 * (bw-guides/assets/css/bw-guides-admin.css, "BW guide components" section).
 * Its job is to make the hub editor show what a client site will actually
 * render, since the client renders guides in wp-admin with no theme and no
 * theme.json global styles.
 *
 * Keep in sync with the client when changing a colour or spacing value.
 * Structural blocks (columns, buttons, tables, details) are left to the
 * editor's own styles here — this file covers only the BW components, which
 * the editor knows nothing about.
 */

.bw-callout {
	background: #eef4ff;
	border-left: 4px solid #2271b1;
	border-radius: 6px;
	padding: 16px 20px;
	margin: 1.5em 0;
}

.bw-callout > *:first-child {
	margin-top: 0;
}

.bw-callout > *:last-child {
	margin-bottom: 0;
}

.bw-callout-warning {
	background: #fff8e5;
	border-left-color: #dba617;
}

.bw-callout-success {
	background: #edf8f0;
	border-left-color: #00a32a;
}

.bw-callout-danger {
	background: #fcf0f1;
	border-left-color: #d63638;
}

.bw-callout-label {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 6px;
	color: #1d2327;
}

.bw-steps {
	counter-reset: bw-step;
	list-style: none;
	padding-left: 0;
	margin: 1.5em 0;
}

.bw-steps > li {
	counter-increment: bw-step;
	position: relative;
	padding: 0 0 0 42px;
	margin: 0 0 16px;
	min-height: 28px;
	list-style: none;
}

.bw-steps > li::before {
	content: counter(bw-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #2271b1;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 28px;
	text-align: center;
}

.bw-steps > li:last-child {
	margin-bottom: 0;
}