$components-colors: (
	'positive',
	'negative',
	'warning',
	'info'
);

.#{$component-prefix}message {
	padding: 1rem 1.25rem;
	border-radius: 3px;

	@each $key, $value in $components-colors {
		color: var(--color-primary-400);
		background-color: var(--color-primary-50);
		border: 1px solid var(--color-primary-200);

		&.-#{$key} {
			color: var(--color-#{$key}-400);
			background-color: var(--color-#{$key}-50);
			border: 1px solid var(--color-#{$key}-200);
		}
	}
}