// Margin classes
// Applies spacing in single or multiple directions


// Individual directions
// with negative margins
$margin-sizes:  "px", "xs", "s", "m", "l", "xl", "xxl";
@each $size in $margin-sizes {
  .ma-t-#{$size}  { margin-top:              var(--space-#{$size});  } // postive
  .ma-t-#{$size}- { margin-top:    calc(-1 * var(--space-#{$size})); } // negative
  .ma-r-#{$size}  { margin-right:            var(--space-#{$size});  } // postive
  .ma-r-#{$size}- { margin-right:  calc(-1 * var(--space-#{$size})); } // negative
  .ma-b-#{$size}  { margin-bottom:           var(--space-#{$size});  } // postive
  .ma-b-#{$size}- { margin-bottom: calc(-1 * var(--space-#{$size})); } // negative
  .ma-l-#{$size}  { margin-left:             var(--space-#{$size});  } // postive
  .ma-l-#{$size}- { margin-left:   calc(-1 * var(--space-#{$size})); } // negative
  .ma-v-#{$size}  { margin-top:              var(--space-#{$size});  margin-bottom:           var(--space-#{$size});  } // postive
  .ma-v-#{$size}- { margin-top:    calc(-1 * var(--space-#{$size})); margin-bottom: calc(-1 * var(--space-#{$size})); } // negative
  .ma-h-#{$size}  { margin-left:             var(--space-#{$size});  margin-right:            var(--space-#{$size});  } // postive
  .ma-h-#{$size}- { margin-left:   calc(-1 * var(--space-#{$size})); margin-right:  calc(-1 * var(--space-#{$size})); } // negative
}

// Reset!
.ma-no { margin: 0 }
