@use 'variables' as *;

// Semantic spacing utilities
@mixin spacing-utilities($property, $prefix) {
  // Zero
  .nu-u-#{$prefix}-zero {
    #{$property}: var(--spacing-zero);
  }

  // Semantic spacing scale
  .nu-u-#{$prefix}-xs {
    #{$property}: var(--spacing-xs);
  }
  .nu-u-#{$prefix}-s {
    #{$property}: var(--spacing-s);
  }
  .nu-u-#{$prefix}-m {
    #{$property}: var(--spacing-m);
  }
  .nu-u-#{$prefix}-l {
    #{$property}: var(--spacing-l);
  }
  .nu-u-#{$prefix}-xl {
    #{$property}: var(--spacing-xl);
  }
  .nu-u-#{$prefix}-xxl {
    #{$property}: var(--spacing-xxl);
  }
  .nu-u-#{$prefix}-xxxl {
    #{$property}: var(--spacing-xxxl);
  }
}

// Margins
.nu-u-mx-auto {
  margin-inline: auto;
}

.nu-u-me-auto {
  margin-right: auto;
}

.nu-u-ms-auto {
  margin-left: auto;
}

// Margin - All sides
@include spacing-utilities(margin, 'm');

// Margin - Top
@include spacing-utilities(margin-top, 'mt');

// Margin - Bottom
@include spacing-utilities(margin-bottom, 'mb');

// Margin - Left
@include spacing-utilities(margin-left, 'ms');

// Margin - Right
@include spacing-utilities(margin-right, 'me');

// Margin - Inline (left & right)
@include spacing-utilities(margin-inline, 'mx');

// Margin - Block (top & bottom)
@include spacing-utilities(margin-block, 'my');

// Padding - All sides
@include spacing-utilities(padding, 'p');

// Padding - Top
@include spacing-utilities(padding-top, 'pt');

// Padding - Bottom
@include spacing-utilities(padding-bottom, 'pb');

// Padding - Left
@include spacing-utilities(padding-left, 'ps');

// Padding - Right
@include spacing-utilities(padding-right, 'pe');

// Padding - Inline (left & right)
@include spacing-utilities(padding-inline, 'px');

// Padding - Block (top & bottom)
@include spacing-utilities(padding-block, 'py');