/**
 * Notice: `rounded-lg border border-dashed bg-surface-cool p-5 text-sm` in
 * the muted foreground, an info icon in front. On the cool surface the box
 * turns white.
 */

.sba-c .sba-c-notice-box {
	display: flex;
	gap: 12px;
	max-width: 48rem;
	padding: 20px;
	border: 1px dashed var(--sba-border);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface-cool);
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-bg-cool .sba-c-notice-box {
	background-color: var(--sba-surface);
}

.sba-c .sba-c-notice-box > .sba-i {
	flex: 0 0 auto;
	margin-top: 2px;
	font-size: 16px;
}

.sba-c .sba-c-notice-box p {
	margin: 0;
}

.sba-c .sba-c-notice-box .sba-c-link {
	margin-top: 8px;
}