/**
 * Simple Alert Block – styles (frontend + editor)
 *
 * Loaded on both the public-facing site and inside the block editor,
 * so the rendered preview matches the live output.
 *
 * Variants: info | warning | success | error
 */

/* ── Base layout ────────────────────────────────────────────────────────────── */

.simple-alert {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-radius: 4px;
	border-left: 4px solid transparent;
	margin-block: 1.25em;
	box-sizing: border-box;
}

/* ── Variants ───────────────────────────────────────────────────────────────── */

/* Info – blue */
.simple-alert--info {
	border-left-color: #2271b1;
	background-color: #eef5fb;
}
.simple-alert--info .simple-alert__svg {
	fill: #2271b1;
}

/* Warning – amber */
.simple-alert--warning {
	border-left-color: #dba617;
	background-color: #fdf8ec;
}
.simple-alert--warning .simple-alert__svg {
	fill: #dba617;
}

/* Success – green */
.simple-alert--success {
	border-left-color: #1a7f37;
	background-color: #edfaf1;
}
.simple-alert--success .simple-alert__svg {
	fill: #1a7f37;
}

/* Error – red */
.simple-alert--error {
	border-left-color: #cc1818;
	background-color: #fdf0f0;
}
.simple-alert--error .simple-alert__svg {
	fill: #cc1818;
}

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

.simple-alert__icon {
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
}

/* ── Content column ─────────────────────────────────────────────────────────── */

.simple-alert__content {
	flex: 1 1 auto;
	min-width: 0;
}

/* Remove top/bottom margin on the first/last child so padding alone
   controls the internal spacing. */
.simple-alert__content > *:first-child {
	margin-top: 0;
}
.simple-alert__content > *:last-child {
	margin-bottom: 0;
}

/* ── Editor-only tweaks ─────────────────────────────────────────────────────── */

/* Give the InnerBlocks drop-zone a minimum height so empty alerts
   are easy to click into in the editor. */
.wp-block-simple-alert-simple-alert .simple-alert__content > .block-editor-inner-blocks {
	min-height: 2em;
	width: 100%;
}