@layer components {
	.yst-root {
		.yst-alert {
			@apply
			yst-flex
			yst-gap-3
			yst-rounded-md
			yst-p-4;
		}

		/* Variants */
		.yst-alert--info {
			@apply yst-bg-blue-100;

			.yst-alert__message {
				@apply yst-text-blue-800;
			}
		}

		.yst-alert--warning {
			@apply yst-bg-amber-100;

			.yst-alert__message {
				@apply yst-text-amber-800;
			}
		}

		.yst-alert--success {
			@apply yst-bg-green-100;

			.yst-alert__message {
				@apply yst-text-green-800;
			}
		}

		.yst-alert--error {
			@apply yst-bg-red-100;

			.yst-alert__message {
				@apply yst-text-red-800;
			}
		}

		/* Elements */
		.yst-alert__icon {
			@apply
			yst-shrink-0
			yst-grow-0
			yst-h-5
			yst-w-5;
		}
	}
}
