.padding-4xs { padding: var(--space-4xs); }
.padding-3xs { padding: var(--space-3xs); }
.padding-2xs { padding: var(--space-2xs); }
.padding-xs { padding: var(--space-xs); }
.padding-sm { padding: var(--space-sm); }
.padding-md { padding: var(--space-md); }
.padding-lg { padding: var(--space-lg); }
.padding-xl { padding: var(--space-xl); }
.padding-2xl { padding: var(--space-2xl); }
.padding-3xl { padding: var(--space-3xl); }
.padding-4xl { padding: var(--space-4xl); }
.padding-0 { padding: 0; }
.padding-component { padding: var(--component-padding); }

.margin-4xs { margin: var(--space-4xs); }
.margin-3xs { margin: var(--space-3xs); }
.margin-2xs { margin: var(--space-2xs); }
.margin-xs { margin: var(--space-xs); }
.margin-sm { margin: var(--space-sm); }
.margin-md { margin: var(--space-md); }
.margin-lg { margin: var(--space-lg); }
.margin-xl { margin: var(--space-xl); }
.margin-2xl { margin: var(--space-2xl); }
.margin-3xl { margin: var(--space-3xl); }
.margin-4xl { margin: var(--space-4xl); }
.margin-auto { margin: auto; }
.margin-0 { margin: 0; }

.padding-top-0 { padding-top: 0; }
.padding-bottom-0 { padding-bottom: 0; }
.padding-left-0 { padding-left: 0; }
.padding-right-0 { padding-right: 0; }

.margin-top-0 { margin-top: 0; }
.margin-bottom-0 { margin-bottom: 0; }
.margin-left-0 { margin-left: 0; }
.margin-right-0 { margin-right: 0; }

.margin-top-auto { margin-top: auto; }
.margin-bottom-auto { margin-bottom: auto; }
.margin-left-auto { margin-left: auto; }
.margin-right-auto { margin-right: auto; }

.padding-top-component { padding-top: var(--component-padding); }
.padding-bottom-component { padding-bottom: var(--component-padding); }
.padding-left-component { padding-left: var(--component-padding); }
.padding-right-component { padding-right: var(--component-padding); }

.padding-top-xs { padding-top: var(--space-xs); }
.padding-top-sm { padding-top: var(--space-sm); }
.padding-top-md { padding-top: var(--space-md); }
.padding-top-lg { padding-top: var(--space-lg); }
.padding-top-xl { padding-top: var(--space-xl); }

.padding-bottom-xs { padding-bottom: var(--space-xs); }
.padding-bottom-sm { padding-bottom: var(--space-sm); }
.padding-bottom-md { padding-bottom: var(--space-md); }
.padding-bottom-lg { padding-bottom: var(--space-lg); }
.padding-bottom-xl { padding-bottom: var(--space-xl); }

.padding-left-xs { padding-left: var(--space-xs); }
.padding-left-sm { padding-left: var(--space-sm); }
.padding-left-md { padding-left: var(--space-md); }
.padding-left-lg { padding-left: var(--space-lg); }
.padding-left-xl { padding-left: var(--space-xl); }

.padding-right-xs { padding-right: var(--space-xs); }
.padding-right-sm { padding-right: var(--space-sm); }
.padding-right-md { padding-right: var(--space-md); }
.padding-right-lg { padding-right: var(--space-lg); }
.padding-right-xl { padding-right: var(--space-xl); }

.margin-top-xs { margin-top: var(--space-xs); }
.margin-top-sm { margin-top: var(--space-sm); }
.margin-top-md { margin-top: var(--space-md); }
.margin-top-lg { margin-top: var(--space-lg); }
.margin-top-xl { margin-top: var(--space-xl); }

.margin-bottom-xs { margin-bottom: var(--space-xs); }
.margin-bottom-sm { margin-bottom: var(--space-sm); }
.margin-bottom-md { margin-bottom: var(--space-md); }
.margin-bottom-lg { margin-bottom: var(--space-lg); }
.margin-bottom-xl { margin-bottom: var(--space-xl); }

.margin-left-xs { margin-left: var(--space-xs); }
.margin-left-sm { margin-left: var(--space-sm); }
.margin-left-md { margin-left: var(--space-md); }
.margin-left-lg { margin-left: var(--space-lg); }
.margin-left-xl { margin-left: var(--space-xl); }

.margin-right-xs { margin-right: var(--space-xs); }
.margin-right-sm { margin-right: var(--space-sm); }
.margin-right-md { margin-right: var(--space-md); }
.margin-right-lg { margin-right: var(--space-lg); }
.margin-right-xl { margin-right: var(--space-xl); }

.padding-x-0 { padding-left: 0; padding-right: 0; }
.padding-y-0 { padding-top: 0; padding-bottom: 0; }
.margin-x-0 { margin-left: 0; margin-right: 0; }
.margin-y-0 { margin-top: 0; margin-bottom: 0; }

.padding-x-component { padding-left: var(--component-padding); padding-right: var(--component-padding); }
.padding-y-component { padding-top: var(--component-padding); padding-bottom: var(--component-padding); }
.margin-x-auto { margin-left: auto; margin-right: auto; }
.margin-y-auto { margin-top: auto; margin-bottom: auto; }

.top-0 { top: 0; }
.top-50\% { top: 50%; }
.right-0 { right: 0; }
.right-50\% { right: 50%; }
.bottom-0 { bottom: 0; }
.bottom-50\% { bottom: 50%; }
.left-0 { left: 0; }
.left-50\% { left: 50%; }

.top-xs { top: var(--space-xs); }
.top-sm { top: var(--space-sm); }
.top-md { top: var(--space-md); }
.top-lg { top: var(--space-lg); }
.top-xl { top: var(--space-xl); }

.right-xs { right: var(--space-xs); }
.right-sm { right: var(--space-sm); }
.right-md { right: var(--space-md); }
.right-lg { right: var(--space-lg); }
.right-xl { right: var(--space-xl); }

.bottom-xs { bottom: var(--space-xs); }
.bottom-sm { bottom: var(--space-sm); }
.bottom-md { bottom: var(--space-md); }
.bottom-lg { bottom: var(--space-lg); }
.bottom-xl { bottom: var(--space-xl); }

.left-xs { left: var(--space-xs); }
.left-sm { left: var(--space-sm); }
.left-md { left: var(--space-md); }
.left-lg { left: var(--space-lg); }
.left-xl { left: var(--space-xl); }

.scroll-padding-xs { scroll-padding: var(--space-xs); }
.scroll-padding-sm { scroll-padding: var(--space-sm); }
.scroll-padding-md { scroll-padding: var(--space-md); }
.scroll-padding-lg { scroll-padding: var(--space-lg); }
.scroll-padding-xl { scroll-padding: var(--space-xl); }
.scroll-padding-4xs { scroll-padding: var(--space-4xs); }
.scroll-padding-3xs { scroll-padding: var(--space-3xs); }
.scroll-padding-2xs { scroll-padding: var(--space-2xs); }
.scroll-padding-2xl { scroll-padding: var(--space-2xl); }
.scroll-padding-3xl { scroll-padding: var(--space-3xl); }
.scroll-padding-4xl { scroll-padding: var(--space-4xl); }

.padding-top-4xs { padding-top: var(--space-4xs); }
.padding-top-3xs { padding-top: var(--space-3xs); }
.padding-top-2xs { padding-top: var(--space-2xs); }
.padding-top-2xl { padding-top: var(--space-2xl); }
.padding-top-3xl { padding-top: var(--space-3xl); }
.padding-top-4xl { padding-top: var(--space-4xl); }

.padding-bottom-4xs { padding-bottom: var(--space-4xs); }
.padding-bottom-3xs { padding-bottom: var(--space-3xs); }
.padding-bottom-2xs { padding-bottom: var(--space-2xs); }
.padding-bottom-2xl { padding-bottom: var(--space-2xl); }
.padding-bottom-3xl { padding-bottom: var(--space-3xl); }
.padding-bottom-4xl { padding-bottom: var(--space-4xl); }

.padding-left-4xs { padding-left: var(--space-4xs); }
.padding-left-3xs { padding-left: var(--space-3xs); }
.padding-left-2xs { padding-left: var(--space-2xs); }
.padding-left-2xl { padding-left: var(--space-2xl); }
.padding-left-3xl { padding-left: var(--space-3xl); }
.padding-left-4xl { padding-left: var(--space-4xl); }

.padding-right-4xs { padding-right: var(--space-4xs); }
.padding-right-3xs { padding-right: var(--space-3xs); }
.padding-right-2xs { padding-right: var(--space-2xs); }
.padding-right-2xl { padding-right: var(--space-2xl); }
.padding-right-3xl { padding-right: var(--space-3xl); }
.padding-right-4xl { padding-right: var(--space-4xl); }

.padding-x-4xs { padding-left: var(--space-4xs); padding-right: var(--space-4xs); }
.padding-x-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
.padding-x-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
.padding-x-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.padding-x-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.padding-x-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.padding-x-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.padding-x-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
.padding-x-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.padding-x-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }
.padding-x-4xl { padding-left: var(--space-4xl); padding-right: var(--space-4xl); }

.padding-y-4xs { padding-top: var(--space-4xs); padding-bottom: var(--space-4xs); }
.padding-y-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }
.padding-y-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); }
.padding-y-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.padding-y-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.padding-y-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.padding-y-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.padding-y-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.padding-y-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.padding-y-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.padding-y-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }

.margin-top-4xs { margin-top: var(--space-4xs); }
.margin-top-3xs { margin-top: var(--space-3xs); }
.margin-top-2xs { margin-top: var(--space-2xs); }
.margin-top-2xl { margin-top: var(--space-2xl); }
.margin-top-3xl { margin-top: var(--space-3xl); }
.margin-top-4xl { margin-top: var(--space-4xl); }

.margin-bottom-4xs { margin-bottom: var(--space-4xs); }
.margin-bottom-3xs { margin-bottom: var(--space-3xs); }
.margin-bottom-2xs { margin-bottom: var(--space-2xs); }
.margin-bottom-2xl { margin-bottom: var(--space-2xl); }
.margin-bottom-3xl { margin-bottom: var(--space-3xl); }
.margin-bottom-4xl { margin-bottom: var(--space-4xl); }

.margin-left-4xs { margin-left: var(--space-4xs); }
.margin-left-3xs { margin-left: var(--space-3xs); }
.margin-left-2xs { margin-left: var(--space-2xs); }
.margin-left-2xl { margin-left: var(--space-2xl); }
.margin-left-3xl { margin-left: var(--space-3xl); }
.margin-left-4xl { margin-left: var(--space-4xl); }

.margin-right-4xs { margin-right: var(--space-4xs); }
.margin-right-3xs { margin-right: var(--space-3xs); }
.margin-right-2xs { margin-right: var(--space-2xs); }
.margin-right-2xl { margin-right: var(--space-2xl); }
.margin-right-3xl { margin-right: var(--space-3xl); }
.margin-right-4xl { margin-right: var(--space-4xl); }

.margin-x-4xs { margin-left: var(--space-4xs); margin-right: var(--space-4xs); }
.margin-x-3xs { margin-left: var(--space-3xs); margin-right: var(--space-3xs); }
.margin-x-2xs { margin-left: var(--space-2xs); margin-right: var(--space-2xs); }
.margin-x-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.margin-x-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
.margin-x-md { margin-left: var(--space-md); margin-right: var(--space-md); }
.margin-x-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }
.margin-x-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
.margin-x-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl); }
.margin-x-3xl { margin-left: var(--space-3xl); margin-right: var(--space-3xl); }
.margin-x-4xl { margin-left: var(--space-4xl); margin-right: var(--space-4xl); }

.margin-y-4xs { margin-top: var(--space-4xs); margin-bottom: var(--space-4xs); }
.margin-y-3xs { margin-top: var(--space-3xs); margin-bottom: var(--space-3xs); }
.margin-y-2xs { margin-top: var(--space-2xs); margin-bottom: var(--space-2xs); }
.margin-y-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.margin-y-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.margin-y-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.margin-y-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.margin-y-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.margin-y-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }
.margin-y-3xl { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); }
.margin-y-4xl { margin-top: var(--space-4xl); margin-bottom: var(--space-4xl); }