@import "variables.scss";

$sizes: (
  xxs: $spacing-xxs,
  xs: $spacing-xs,
  s: $spacing-s,
  m: $spacing-m,
  l: $spacing-l,
  xl: $spacing-xl,
  xxl: $spacing-xxl,
  xxxl: $spacing-xxxl,
);

@each $name, $value in $sizes {
  .pd-#{$name} {
    padding: $value;
  }
  .pd-x-#{$name} {
    padding-left: $value;
    padding-right: $value;
  }
  .pd-y-#{$name} {
    padding-bottom: $value;
    padding-top: $value;
  }
  .pd-t-#{$name} {
    padding-top: $value;
  }
  .pd-b-#{$name} {
    padding-bottom: $value;
  }
  .pd-l-#{$name} {
    padding-left: $value;
  }
  .pd-r-#{$name} {
    padding-right: $value;
  }

  .mg-#{$name} {
    margin: $value;
  }
  .mg-x-#{$name} {
    margin-left: $value;
    margin-right: $value;
  }
  .mg-y-#{$name} {
    margin-bottom: $value;
    margin-top: $value;
  }
  .mg-t-#{$name} {
    margin-top: $value;
  }
  .mg-b-#{$name} {
    margin-bottom: $value;
  }
  .mg-l-#{$name} {
    margin-left: $value;
  }
  .mg-r-#{$name} {
    margin-right: $value;
  }
}
