/* Tailwind Elements: alerts.css */

@layer components {
	.alert {
		@apply flex flex-col items-start lg:items-center lg:flex-row p-4 space-y-4 lg:space-y-0 lg:space-x-4;
		/* Text */
		@apply text-surface-900-50-token;
		/* Rounded */
		@apply rounded-container-token;
	}
	.alert-message {
		@apply flex-auto space-y-2;
	}
	.alert-actions {
		@apply flex items-center space-x-2;
	}
}