/* Margin utilities
 * Sizes: 0, auto, xx-small, x-small, small, base, medium, large, x-large, xx-large
 * Sides: (all), t (top), r (right), b (bottom), l (left), x (horizontal), y (vertical)
 */

/* All sides */
.m-0         { margin: 0; }
.m-auto      { margin: auto; }
.m-xx-small  { margin: var(--space--xx-small); }
.m-x-small   { margin: var(--space--x-small); }
.m-small     { margin: var(--space--small); }
.m-base      { margin: var(--space--base); }
.m-medium    { margin: var(--space--medium); }
.m-large     { margin: var(--space--large); }
.m-x-large   { margin: var(--space--x-large); }
.m-xx-large  { margin: var(--space--xx-large); }

/* Top */
.m-t-0         { margin-top: 0; }
.m-t-auto      { margin-top: auto; }
.m-t-xx-small  { margin-top: var(--space--xx-small); }
.m-t-x-small   { margin-top: var(--space--x-small); }
.m-t-small     { margin-top: var(--space--small); }
.m-t-base      { margin-top: var(--space--base); }
.m-t-medium    { margin-top: var(--space--medium); }
.m-t-large     { margin-top: var(--space--large); }
.m-t-x-large   { margin-top: var(--space--x-large); }
.m-t-xx-large  { margin-top: var(--space--xx-large); }

/* Right */
.m-r-0         { margin-right: 0; }
.m-r-auto      { margin-right: auto; }
.m-r-xx-small  { margin-right: var(--space--xx-small); }
.m-r-x-small   { margin-right: var(--space--x-small); }
.m-r-small     { margin-right: var(--space--small); }
.m-r-base      { margin-right: var(--space--base); }
.m-r-medium    { margin-right: var(--space--medium); }
.m-r-large     { margin-right: var(--space--large); }
.m-r-x-large   { margin-right: var(--space--x-large); }
.m-r-xx-large  { margin-right: var(--space--xx-large); }

/* Bottom */
.m-b-0         { margin-bottom: 0; }
.m-b-auto      { margin-bottom: auto; }
.m-b-xx-small  { margin-bottom: var(--space--xx-small); }
.m-b-x-small   { margin-bottom: var(--space--x-small); }
.m-b-small     { margin-bottom: var(--space--small); }
.m-b-base      { margin-bottom: var(--space--base); }
.m-b-medium    { margin-bottom: var(--space--medium); }
.m-b-large     { margin-bottom: var(--space--large); }
.m-b-x-large   { margin-bottom: var(--space--x-large); }
.m-b-xx-large  { margin-bottom: var(--space--xx-large); }

/* Left */
.m-l-0         { margin-left: 0; }
.m-l-auto      { margin-left: auto; }
.m-l-xx-small  { margin-left: var(--space--xx-small); }
.m-l-x-small   { margin-left: var(--space--x-small); }
.m-l-small     { margin-left: var(--space--small); }
.m-l-base      { margin-left: var(--space--base); }
.m-l-medium    { margin-left: var(--space--medium); }
.m-l-large     { margin-left: var(--space--large); }
.m-l-x-large   { margin-left: var(--space--x-large); }
.m-l-xx-large  { margin-left: var(--space--xx-large); }

/* Horizontal (left + right) */
.m-x-0         { margin-left: 0; margin-right: 0; }
.m-x-auto      { margin-left: auto; margin-right: auto; }
.m-x-xx-small  { margin-left: var(--space--xx-small); margin-right: var(--space--xx-small); }
.m-x-x-small   { margin-left: var(--space--x-small); margin-right: var(--space--x-small); }
.m-x-small     { margin-left: var(--space--small); margin-right: var(--space--small); }
.m-x-base      { margin-left: var(--space--base); margin-right: var(--space--base); }
.m-x-medium    { margin-left: var(--space--medium); margin-right: var(--space--medium); }
.m-x-large     { margin-left: var(--space--large); margin-right: var(--space--large); }
.m-x-x-large   { margin-left: var(--space--x-large); margin-right: var(--space--x-large); }
.m-x-xx-large  { margin-left: var(--space--xx-large); margin-right: var(--space--xx-large); }

/* Vertical (top + bottom) */
.m-y-0         { margin-top: 0; margin-bottom: 0; }
.m-y-auto      { margin-top: auto; margin-bottom: auto; }
.m-y-xx-small  { margin-top: var(--space--xx-small); margin-bottom: var(--space--xx-small); }
.m-y-x-small   { margin-top: var(--space--x-small); margin-bottom: var(--space--x-small); }
.m-y-small     { margin-top: var(--space--small); margin-bottom: var(--space--small); }
.m-y-base      { margin-top: var(--space--base); margin-bottom: var(--space--base); }
.m-y-medium    { margin-top: var(--space--medium); margin-bottom: var(--space--medium); }
.m-y-large     { margin-top: var(--space--large); margin-bottom: var(--space--large); }
.m-y-x-large   { margin-top: var(--space--x-large); margin-bottom: var(--space--x-large); }
.m-y-xx-large  { margin-top: var(--space--xx-large); margin-bottom: var(--space--xx-large); }

.m-0-auto {
  margin: 0 auto;
}