<style>
	/* Common */
	.alert {
		@apply mb-1;
		@apply border-l-4;
		@apply text-gray-600;
		@apply text-sm;
		@apply px-4;
		@apply py-2;
	}

	.icon {
		@apply h-5;
		@apply w-5;
	}

	.content {
		@apply text-sm;
		@apply w-full;
	}

	.link {
		@apply whitespace-nowrap;
		@apply font-bold;
	}

	.text {
		@apply border-none;
	}
	/* Info */
	.info {
		@apply border-blue-400;
		@apply bg-blue-50;
	}

	/* Warning */
	.warning {
		@apply border-yellow-300;
		@apply bg-yellow-50;
	}

	/* Error */
	.error {
		@apply border-red-400;
		@apply bg-red-50;
	}
</style>

<script>
	export let type = 'info';
	let classNames = '';
	export { classNames as class };
</script>

<div class="alert {type} {classNames}">
	<slot />
</div>
