/* Tailwind Elements: cards.css */

@layer components {
	.card {
		/* background */
		@apply bg-surface-100-800-token;
		/* Ring */
		@apply ring-outline-token;
		/* Theme: Rounded */
		@apply rounded-container-token;
	}

	/* === Regions === */

	.card-header {
		@apply p-4 pb-0;
	}

	.card-footer {
		@apply p-4 pt-0;
	}

	/* === States === */

	a.card {
		@apply transition-all hover:brightness-105;
	}

	.card-hover {
		@apply transition-all hover:scale-[101%] hover:shadow-xl;
	}
}