// Spacing (margin + padding) utilities
$directions: (
  't': 'top',
  'l': 'left',
  'r': 'right',
  'b': 'bottom',
  '': '',
);
$spacer: 0.5rem;
$spacers: (
  0: 0,
  1: $spacer,
  2: 2 * $spacer,
  3: 3 * $spacer,
  4: 4 * $spacer,
  5: 5 * $spacer,
  6: 6 * $spacer,
  7: 7 * $spacer,
  8: 8 * $spacer,
  9: 9 * $spacer,
  10: 10 * $spacer,
);

@mixin make-space($dir-name, $dir, $spacer, $spacing-type) {
  @if $dir-name == '' {
    #{$spacing-type}: $spacer !important;
  } @else {
    #{$spacing-type}-#{$dir}: $spacer !important;
  }
}

@each $device, $width in $breakpoints {
  @include min-query($device) {
    @each $dir-name, $dir in $directions {
      @each $spacer-name, $spacer in $spacers {
        @if $device == mobile {
          .p#{$dir-name}-#{$spacer-name} {
            @include make-space($dir-name, $dir, $spacer, padding);
          }
          .m#{$dir-name}-#{$spacer-name} {
            @include make-space($dir-name, $dir, $spacer, margin);
          }
        } @else {
          .p#{$dir-name}-#{$spacer-name}-#{$device} {
            @include make-space($dir-name, $dir, $spacer, padding);
          }
          .m#{$dir-name}-#{$spacer-name}-#{$device} {
            @include make-space($dir-name, $dir, $spacer, margin);
          }
        }
      }
    }
  }
}

// gap
@each $device, $width in $breakpoints {
  @include min-query($device) {
    @each $dir-name, $dir in $directions {
      @each $spacer-name, $spacer in $spacers {
        @if $device == mobile {
          .gap-#{$spacer-name} {
            gap: $spacer;
          }
          .gap-row-#{$spacer-name} {
            row-gap: $spacer;
          }
          .gap-col-#{$spacer-name} {
            column-gap: $spacer;
          }
        } @else {
          .gap-#{$spacer-name}-#{$device} {
            gap: $spacer;
          }
          .gap-row-#{$spacer-name}-#{$device} {
            row-gap: $spacer;
          }
          .gap-col-#{$spacer-name}-#{$device} {
            column-gap: $spacer;
          }
        }
      }
    }
  }
}