// MARGIN
$marginSizes: (
  'auto': auto,
  '0': 0,
  '1-4': $spacing-margin-xxxxsmall,
  '1-2': $spacing-margin-xxxsmall,
  '1': $spacing-margin-xxsmall,
  '2': $spacing-margin-xsmall,
  '3': $spacing-margin-small,
  '4': $spacing-margin-medium,
  '5': $spacing-margin-large,
  '6': $spacing-margin-xlarge,
  '7': $spacing-margin-xxlarge,
);

@each $size, $margin in $marginSizes {
  .m-#{$size} { margin: $margin }
  .mt-#{$size} { margin-top: $margin }
  .ml-#{$size} { margin-left: $margin }
  .mb-#{$size} { margin-bottom: $margin }
  .mr-#{$size} { margin-right: $margin }
  .mx-#{$size} {
    margin: {
     left: $margin;
     right: $margin;
    }
  }
  .my-#{$size} {
    margin: {
     top: $margin;
     bottom: $margin;
    }
  }
}

// PADDING
$paddingSizes: (
  '0': 0,
  '1-4': $spacing-padding-xxxxsmall,
  '1-2': $spacing-padding-xxxsmall,
  '1': $spacing-padding-xxsmall,
  '2': $spacing-padding-xsmall,
  '3': $spacing-padding-small,
  '4': $spacing-padding-medium,
  '5': $spacing-padding-large,
  '6': $spacing-padding-xlarge,
  '7': $spacing-padding-xxlarge,
);

@each $size, $padding in $paddingSizes {
  .p-#{$size} { padding: $padding }
  .pt-#{$size} { padding-top: $padding }
  .pl-#{$size} { padding-left: $padding }
  .pb-#{$size} { padding-bottom: $padding }
  .pr-#{$size} { padding-right: $padding }
  .px-#{$size} {
    padding: {
     left: $padding;
     right: $padding;
    }
  }
  .py-#{$size} {
    padding: {
     top: $padding;
     bottom: $padding;
    }
  }
}