@use 'functions' as fn;
@use 'sass:math';

$spacing-step: 4px;
$spacing-count: 40; // до 160px

$spacing-properties: (
  'p': 'padding',
  'pt': 'padding-top',
  'pb': 'padding-bottom',
  'pl': 'padding-left',
  'pr': 'padding-right',
  'px': null,
  'py': null,
  'm': 'margin',
  'mt': 'margin-top',
  'mb': 'margin-bottom',
  'ml': 'margin-left',
  'mr': 'margin-right',
  'mx': null,
  'my': null,
);

@mixin spacing-value($i, $property) {
  @if $i ==0 {
    #{$property}: 0;
  }

  @else {
    #{$property}: fn.rem($i * $spacing-step);
  }
}

@each $prefix, $property in $spacing-properties {
  @if $property {
    .#{$prefix} {
      @for $i from 0 through $spacing-count {
        $suffix: math.div($i * $spacing-step, 1px);

        &--#{$suffix} {
          @include spacing-value($i, $property);
        }
      }

      @if $prefix =='m' or $prefix =='mt' or $prefix =='mb' or $prefix =='ml' or $prefix =='mr' {
        &--auto {
          #{$property}: auto;
        }
      }
    }
  }
}

// px / mx — горизонталь
@each $prefix, $x-prop, $second-prop in ('px', 'padding-left', 'padding-right'), ('mx', 'margin-left', 'margin-right') {
  .#{$prefix} {
    @for $i from 0 through $spacing-count {
      $suffix: math.div($i * $spacing-step, 1px);

      &--#{$suffix} {
        @include spacing-value($i, $x-prop);
        @include spacing-value($i, $second-prop);
      }
    }
  }
}

// py / my — вертикаль
@each $prefix, $y-prop, $second-prop in ('py', 'padding-top', 'padding-bottom'), ('my', 'margin-top', 'margin-bottom') {
  .#{$prefix} {
    @for $i from 0 through $spacing-count {
      $suffix: math.div($i * $spacing-step, 1px);

      &--#{$suffix} {
        @include spacing-value($i, $y-prop);
        @include spacing-value($i, $second-prop);
      }
    }
  }
}

.mx--auto {
  margin-left: auto;
  margin-right: auto;
}

.my--auto {
  margin-top: auto;
  margin-bottom: auto;
}