@use "spacing" as *;
@use "design-tokens" as *;

/* =========================
   Utility classes placeholder
========================= */

$spaces: (
  0: $space-0,
  1: $space-1,
  2: $space-2,
  3: $space-3,
  4: $space-4,
  5: $space-5,
  6: $space-6,
  7: $space-7,
  8: $space-8,
  9: $space-9,
  10: $space-10,
  11: $space-11,
  12: $space-12
);

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

  .p-#{$i} { padding: $value; }
  .pt-#{$i} { padding-top: $value; }
  .pr-#{$i} { padding-right: $value; }
  .pb-#{$i} { padding-bottom: $value; }
  .pl-#{$i} { padding-left: $value; }
  .px-#{$i} { padding-left: $value; padding-right: $value; }
  .py-#{$i} { padding-top: $value; padding-bottom: $value; }

  .g-#{$i} { gap: $value; }
  .gx-#{$i} { column-gap: $value; }
  .gy-#{$i} { row-gap: $value; }
}

.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

.cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: $space-3;
}