/**
 * Notice block – front-end styles.
 *
 * @package wuppi-blocks
 */

.wuppi-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	padding: 1em 1.25em;
	border-left: 3px solid var(--wuppi-notice-border, #3b82f6);
	background-color: var(--wuppi-notice-bg, #eff6ff);
	border-radius: 0 4px 4px 0;
}

.wuppi-notice--info    { --wuppi-notice-border: #3b82f6; --wuppi-notice-bg: #eff6ff; }
.wuppi-notice--warning { --wuppi-notice-border: #f59e0b; --wuppi-notice-bg: #fffbeb; }
.wuppi-notice--success { --wuppi-notice-border: #10b981; --wuppi-notice-bg: #ecfdf5; }
.wuppi-notice--error   { --wuppi-notice-border: #ef4444; --wuppi-notice-bg: #fef2f2; }

/* ── Icon ────────────────────────────────────────────────────────────────── */

.wuppi-notice__icon {
	flex-shrink: 0;
	display: inline-flex;
	line-height: 1;
	margin-top: 0.1em;
}

.wuppi-notice__icon svg {
	width: 1.25em;
	height: 1.25em;
	stroke: var(--wuppi-notice-border);
	fill: none;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.wuppi-notice__body {
	flex: 1;
	min-width: 0;
}

.wuppi-notice__title {
	display: block;
	margin-bottom: 0.3em;
}

.wuppi-notice__content > *:first-child { margin-top: 0; }
.wuppi-notice__content > *:last-child  { margin-bottom: 0; }