// scss-lint:disable all
$sizes: (
  none: 0,
  xsmall: em-calc(4px),
  small: em-calc(8px),
  medium: em-calc(16px),
  large: em-calc(32px),
  xlarge: em-calc(64px),
);

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

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

// Margin: Negative
@each $name, $size in $sizes {
  .mn-#{$name} { margin: -$size; }
  .mtn-#{$name} { margin-top: -$size; }
  .mrn-#{$name} { margin-right: -$size; }
  .mbn-#{$name} { margin-bottom: -$size; }
  .mln-#{$name} { margin-left: -$size; }
  .mxn-#{$name} { margin-left: -$size; margin-right: -$size; }
  .myn-#{$name} { margin-top: -$size; margin-bottom: -$size; }
}

// Margin: Auto
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

// Flex
.jc-sa { justify-content: space-around; }
.jc-sb { justify-content: space-between; }
.jc-fe { justify-content: flex-end; }
.jc-fs { justify-content: flex-start; }
.ai-b { align-items: baseline; }
.ai-c { align-items: center; }
.ai-fe { align-items: flex-end; }
.ai-fs { align-items: flex-start; }
.ai-s { align-items: stretch; }