/* #region Margins */
/* Uniform  */
.mar-0 {margin: 0;}
.mar-xxs {margin: var(--space-xxs);}    
.mar-xs {margin: var(--space-xs);}
.mar-s {margin: var(--space-s);}
.mar-m {margin: var(--space-m);}
.mar-l {margin: var(--space-l);}
.mar-xl {margin: var(--space-xl);}
.mar-xxl {margin: var(--space-xxl);}

/* Uniform Directional  */
.mar-y-0 {margin-top: 0; margin-bottom: 0;}
.mar-y-xxs {margin-top: var(--space-xxs); margin-bottom: var(--space-xxs);} 
.mar-y-xs {margin-top: var(--space-xs); margin-bottom: var(--space-xs);} 
.mar-y-s {margin-top: var(--space-s); margin-bottom: var(--space-s);} 
.mar-y-m {margin-top: var(--space-m); margin-bottom: var(--space-m);}
.mar-y-l {margin-top: var(--space-l); margin-bottom: var(--space-l);} 
.mar-y-xl {margin-top: var(--space-xl); margin-bottom: var(--space-xl);} 
.mar-y-xxl {margin-top: var(--space-xxl); margin-bottom: var(--space-xxl);} 

.mar-x-0 {margin-right: 0; margin-left: 0;} 
.mar-x-xxs {margin-right: var(--space-xxs); margin-left: var(--space-xxs);} 
.mar-x-xs {margin-right: var(--space-xs); margin-left: var(--space-xs);} 
.mar-x-s {margin-right: var(--space-s); margin-left: var(--space-s);} 
.mar-x-m {margin-right: var(--space-m); margin-left: var(--space-m);}
.mar-x-l {margin-right: var(--space-l); margin-left: var(--space-l);} 
.mar-x-xl {margin-right: var(--space-xl); margin-left: var(--space-xl);}
.mar-x-xxl {margin-right: var(--space-xxl); margin-left: var(--space-xxl);}

/* Directional */
.mar-top-0 {margin-top: 0;}
.mar-top-xxs {margin-top: var(--space-xxs);}
.mar-top-xs {margin-top: var(--space-xs);}
.mar-top-s {margin-top: var(--space-s);}
.mar-top-m {margin-top: var(--space-m);}
.mar-top-l {margin-top: var(--space-l);}
.mar-top-xl {margin-top: var(--space-xl);}
.mar-top-xxl {margin-top: var(--space-xxl);}

.mar-right-0 {margin-right: 0;}
.mar-right-xxs {margin-right: var(--space-xxs);}
.mar-right-xs {margin-right: var(--space-xs);}
.mar-right-s {margin-right: var(--space-s);}
.mar-right-m {margin-right: var(--space-m);}
.mar-right-l {margin-right: var(--space-l);}
.mar-right-xl {margin-right: var(--space-xl);}
.mar-right-xxl {margin-right: var(--space-xxl);}

.mar-bottom-0 {margin-bottom: 0;}
.mar-bottom-xxs {margin-bottom: var(--space-xxs);}
.mar-bottom-xs {margin-bottom: var(--space-xs);}
.mar-bottom-s {margin-bottom: var(--space-s);}
.mar-bottom-m {margin-bottom: var(--space-m);}
.mar-bottom-l {margin-bottom: var(--space-l);}
.mar-bottom-xl {margin-bottom: var(--space-xl);}
.mar-bottom-xxl {margin-bottom: var(--space-xxl);}

.mar-left-0 {margin-left: 0;}
.mar-left-xxs {margin-left: var(--space-xxs);}
.mar-left-xs {margin-left: var(--space-xs);}
.mar-left-s {margin-left: var(--space-s);}
.mar-left-m {margin-left: var(--space-m);}
.mar-left-l {margin-left: var(--space-xs);}
.mar-left-l {margin-left: var(--space-l);}
.mar-left-xl {margin-left: var(--space-xl);}
.mar-left-xxl {margin-left: var(--space-xxl);}

.centered {margin: 0 auto;}
/* #endregion */

/* #region Padding */
/* Uniform  */
.pad-0 {padding: 0;}
.pad-xxs {padding: var(--space-xxs);}    
.pad-xs {padding: var(--space-xs);}
.pad-s {padding: var(--space-s);}
.pad-m {padding: var(--space-m);}
.pad-l {padding: var(--space-l);}
.pad-xl {padding: var(--space-xl);}
.pad-xxl {padding: var(--space-xxl);}

/* Uniform Directional  */
.pad-y-0 {padding-top: 0; padding-bottom: 0;}
.pad-y-xs {padding-top: var(--space-xxs); padding-bottom: var(--space-xxs);} 
.pad-y-xs {padding-top: var(--space-xs); padding-bottom: var(--space-xs);} 
.pad-y-s {padding-top: var(--space-s); padding-bottom: var(--space-s);} 
.pad-y-m {padding-top: var(--space-m); padding-bottom: var(--space-m);}
.pad-y-l {padding-top: var(--space-l); padding-bottom: var(--space-l);} 
.pad-y-xl {padding-top: var(--space-xl); padding-bottom: var(--space-xl);} 
.pad-y-xxl {padding-top: var(--space-xxl); padding-bottom: var(--space-xxl);} 

.pad-x-0 {padding-right: 0; padding-left: 0;} 
.pad-x-xxs {padding-right: var(--space-xxs); padding-left: var(--space-xxs);} 
.pad-x-xs {padding-right: var(--space-xs); padding-left: var(--space-xs);} 
.pad-x-s {padding-right: var(--space-s); padding-left: var(--space-s);} 
.pad-x-m {padding-right: var(--space-m); padding-left: var(--space-m);}
.pad-x-l {padding-right: var(--space-l); padding-left: var(--space-l);} 
.pad-x-xl {padding-right: var(--space-xl); padding-left: var(--space-xl);}
.pad-x-xxl {padding-right: var(--space-xxl); padding-left: var(--space-xxl);}

/* Directional */
.pad-top-0 {padding-top: 0;}
.pad-top-xxs {padding-top: var(--space-xxs);}
.pad-top-xs {padding-top: var(--space-xs);}
.pad-top-s {padding-top: var(--space-s);}
.pad-top-m {padding-top: var(--space-m);}
.pad-top-l {padding-top: var(--space-l);}
.pad-top-xl {padding-top: var(--space-xxl);}
.pad-top-xxl {padding-top: var(--space-xxl);}

.pad-right-0 {padding-right: 0;}
.pad-right-xxs {padding-right: var(--space-xxs);}
.pad-right-xs {padding-right: var(--space-xs);}
.pad-right-s {padding-right: var(--space-s);}
.pad-right-m {padding-right: var(--space-m);}
.pad-right-l {padding-right: var(--space-l);}
.pad-right-xl {padding-right: var(--space-xxl);}
.pad-right-xxl {padding-right: var(--space-xxl);}

.pad-bottom-0 {padding-bottom: 0;}
.pad-bottom-xxs {padding-bottom: var(--space-xxs);}
.pad-bottom-xs {padding-bottom: var(--space-xs);}
.pad-bottom-s {padding-bottom: var(--space-s);}
.pad-bottom-m {padding-bottom: var(--space-m);}
.pad-bottom-l {padding-bottom: var(--space-l);}
.pad-bottom-xl {padding-bottom: var(--space-xxl);}
.pad-bottom-xxl {padding-bottom: var(--space-xxl);}

.pad-left-0 {padding-left: 0;}
.pad-left-xxs {padding-left: var(--space-xxs);}
.pad-left-xs {padding-left: var(--space-xs);}
.pad-left-s {padding-left: var(--space-s);}
.pad-left-m {padding-left: var(--space-m);}
.pad-left-l {padding-left: var(--space-l);}
.pad-left-xl {padding-left: var(--space-xxl);}
.pad-left-xxl {padding-left: var(--space-xxl);}
/* #endregion */