.alert {
	padding: 1rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.info {
	background-color: var(--alert-info-bg, hsl(204, 94%, 94%));
	color: var(--alert-info-text, hsl(204, 95%, 32%));
	border: 1px solid var(--alert-info-border, hsl(199, 95%, 74%));
}

.success {
	background-color: var(--alert-success-bg, hsl(138, 76%, 93%));
	color: var(--alert-success-text, hsl(144, 61%, 20%));
	border: 1px solid var(--alert-success-border, hsl(142, 69%, 73%));
}

.warning {
	background-color: var(--alert-warning-bg, hsl(53, 98%, 88%));
	color: var(--alert-warning-text, hsl(37, 86%, 29%));
	border: 1px solid var(--alert-warning-border, hsl(52, 98%, 63%));
}

.danger {
	background-color: var(--alert-danger-bg, hsl(0, 94%, 94%));
	color: var(--alert-danger-text, hsl(0, 63%, 35%));
	border: 1px solid var(--alert-danger-border, hsl(0, 93%, 82%));
}
