CSS Mixin/Macro Polyfill - Multiple @apply

Demonstrating multiple @apply rules composed within a single selector

1. Composed Card (5 @apply rules)

					.theme-card { @apply --card-spacing; @apply
					--gradient-bg(#caf0f8, white); @apply --rounded; @apply
					--shadow-depth; @apply --centered-text; }
				

This card composes spacing, gradient, rounding, shadow, and centering!

2. Typography + Spacing Composition

					.size-text { @apply --heading-style(24px, 600, #333); @apply
					--responsive-padding(30px, 20px, 10px); }
				

Heading style mixin + responsive padding mixin combined!

3. Accent Card (border + gradient + typography)

					.theme-text { @apply --border-accent(2px, solid, #1e40af);
					@apply --card-spacing; @apply --gradient-bg(#dbeafe,
					#f7fafc); @apply --heading-style(18px, 600, #1e40af); }
				

Multiple @mixin rules create a layered accent card!

4. Border + Shadow Composition

					.border-demo { @apply --border-accent(3px, solid, #0ea5e9);
					@apply --card-spacing; @apply --shadow-depth; }
				

Border mixin and shadow macro combined for depth!

5. Responsive Layout (padding + font + gradient)

					.responsive-demo { @apply --responsive-padding; @apply
					--responsive-font; @apply --gradient-bg(#e0f2fe, #f8fafc); }
				

Resize the window to see responsive padding and font size in action!

6. Interactive Card (shadow + hover + motion-safe)

					.feature-demo { @apply --card-spacing; @apply
					--shadow-depth; @apply --smooth-hover; @apply
					--motion-safe-transition; } .feature-demo:hover { @apply
					--hover-scale; }
				

Hover me! Composed from shadow, hover, and motion-safe macros/mixins.

7. Animation-Safe Interactive Element

					.animation-demo { @apply --card-spacing; @apply --rounded;
					@apply --smooth-hover; @apply --motion-safe-transition(0.3s,
					ease); } .animation-demo:hover { @apply --hover-scale; }
				

Hover me! This respects your motion preferences via composed @apply rules.