/**
 * Alert / notice component styles.
 * Status colors are for chrome, not default paragraph text on base.
 */

.pp-alert {
	display: grid;
	gap: var(--wp--preset--spacing--2xs);
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--border);
	border-left-width: 4px;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.pp-alert__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.pp-alert__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast);
}

.pp-alert--info {
	border-left-color: var(--wp--preset--color--info);
}

.pp-alert--success {
	border-left-color: var(--wp--preset--color--success);
}

.pp-alert--warning {
	border-left-color: var(--wp--preset--color--warning);
}

.pp-alert--danger {
	border-left-color: var(--wp--preset--color--danger);
}