// Available spaces
$spaces: 0, 4px, 8px, 16px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px, 88px, 96px, 104px, 112px, 120px, 128px;

// Available gaps
$gaps: (
  '0': '0px',
  '0-5': '0.125rem',
  '1': '0.25rem',
  '1-5': '0.375rem',
  '2': '0.5rem',
  '2-5': '0.625rem',
  '3': '0.75rem',
  '3-5': '0.875rem',
  '4': '1rem',
  '5': '1.25rem',
  '6': '1.5rem',
  '7': '1.75rem',
  '8': '2rem',
  '9': '2.25rem',
  '10': '2.5rem',
  '11': '2.75rem',
  '12': '3rem',
  '14': '3.5rem',
  '16': '4rem',
  '20': '5rem',
  '24': '6rem',
  '28': '7rem',
  '32': '8rem',
  '36': '9rem',
  '40': '10rem',
  '44': '11rem',
  '48': '12rem',
  '52': '13rem',
  '56': '13rem',
  '60': '15rem',
  '64': '16rem',
  '72': '18rem',
  '80': '20rem',
  '96': '24rem'
);

// Spacing utilities
// Mixin take size in parameter
// @see _breakpoints.scss
// Every class are generated with breakpoints prefix
@mixin mic-spacing-utilities($size: '') {
  @for $i from 0 through length($spaces) - 1 {
    $index: $i + 1;
    // margin
    .#{$size}m-#{$i} {
      margin: nth($spaces, $index);
    }

    .#{$size}mt-#{$i},
    .#{$size}my-#{$i} {
      margin-top: nth($spaces, $index);
    }

    .#{$size}mr-#{$i},
    .#{$size}mx-#{$i} {
      margin-right: nth($spaces, $index);
    }

    .#{$size}mb-#{$i},
    .#{$size}my-#{$i} {
      margin-bottom: nth($spaces, $index);
    }

    .#{$size}ml-#{$i},
    .#{$size}mx-#{$i} {
      margin-left: nth($spaces, $index);
    }

    .#{$size}mbls-#{$i},
    .#{$size}mbl-#{$i} {
      margin-block-start: nth($spaces, $index);
    }

    .#{$size}mble-#{$i},
    .#{$size}mbl-#{$i} {
      margin-block-end: nth($spaces, $index);
    }

    .#{$size}mins-#{$i},
    .#{$size}min-#{$i} {
      margin-inline-start: nth($spaces, $index);
    }

    .#{$size}mine-#{$i},
    .#{$size}min-#{$i} {
      margin-inline-end: nth($spaces, $index);
    }

    // padding
    .#{$size}p-#{$i} {
      padding: nth($spaces, $index);
    }

    .#{$size}pt-#{$i},
    .#{$size}py-#{$i} {
      padding-top: nth($spaces, $index);
    }

    .#{$size}pr-#{$i},
    .#{$size}px-#{$i} {
      padding-right: nth($spaces, $index);
    }

    .#{$size}pb-#{$i},
    .#{$size}py-#{$i} {
      padding-bottom: nth($spaces, $index);
    }

    .#{$size}pl-#{$i},
    .#{$size}px-#{$i} {
      padding-left: nth($spaces, $index);
    }

    .#{$size}pbls-#{$i},
    .#{$size}pbl-#{$i} {
      padding-block-start: nth($spaces, $index);
    }

    .#{$size}pble-#{$i},
    .#{$size}pbl-#{$i} {
      padding-block-end: nth($spaces, $index);
    }

    .#{$size}pins-#{$i},
    .#{$size}pin-#{$i} {
      padding-inline-start: nth($spaces, $index);
    }

    .#{$size}pine-#{$i},
    .#{$size}pin-#{$i} {
      padding-inline-end: nth($spaces, $index);
    }
  }

  // Gaps
  @each $i, $g in $gaps {
    .#{$size + 'gap-' + $i} {
      gap: #{$g};
    }
    .#{$size + 'gap-x-' + $i} {
      column-gap: #{$g};
    }
    .#{$size + 'gap-y-' + $i} {
      row-gap: #{$g};
    }
  }
}
