/**
 * Spacing
 * https://stackoverflow.design/product/base/spacing/
 */
@use "helpers";
@use "sass:map";
@use "sass:list";

// Margin and Padding
$classes: ("m":"margin", "p":"padding");

/* Margin auto */
.m-auto {
  margin: auto;
}

@each $prefix, $prop in helpers.$coordinates {
  .m#{$prefix}-auto {
    margin-#{$prop}: auto;
  }
}

/**
 * Vertical Spacing
 */

@mixin generate-spacing-variables($axis_spacing, $prefix) {
  $project-prefix: map.get(helpers.$info, 'variable-prefix');
  @each $breakpoint, $values in $axis_spacing {
    @if helpers.is-breakpoint($breakpoint) {
      // Responsive value
      @include helpers.media-screen($breakpoint) {
        :root {
          @for $i from 1 through list.length($values) {
            $value: list.nth($values, $i);
            $postfix: helpers.get-desktop-value($i, $axis_spacing);

            //@debug $value, $postfix;

            /// if changed compare with desktop value
            @if $value != $postfix {
              $previous_postfix: helpers.get-previous-breakpoint-value($i, $value, $breakpoint, $axis_spacing);

              // and changed compare with the previous value
              @if $value != $previous_postfix {
                @include helpers.get-variable(#{$prefix}-#{helpers.replace-prop($postfix)}, #{helpers.format-value($value)});
              }
            }
          }
        }
      }
    } @else {
      // Desktop value
      :root {
        @for $i from 1 through list.length($values) {
          $value: list.nth($values, $i);
          $postfix: helpers.get-previous-breakpoint-value($i, $value, $breakpoint, $axis_spacing);
          //@debug $value, $postfix;
          @include helpers.get-variable(#{$prefix}-#{helpers.replace-prop($postfix)}, #{helpers.format-value($value)});
        }
      }

      @if ($prefix == "spacing") {
        // margin padding top bottom
        @for $i from 1 through list.length($values) {
          $value: list.nth($values, $i);
          $postfix: helpers.get-previous-breakpoint-value($i, $value, $breakpoint, $axis_spacing);
          //@debug $value, $postfix;

          $var: var(#{helpers.get-variable(#{$prefix}-#{helpers.replace-prop($postfix)})});


          .pt#{helpers.replace-prop($postfix)} {
            padding-top: #{$var};
          }
          .pb#{helpers.replace-prop($postfix)} {
            padding-bottom: #{$var};
          }
          .mt#{helpers.replace-prop($postfix)} {
            margin-top: #{$var};
          }
          .mb#{helpers.replace-prop($postfix)} {
            margin-bottom: #{$var};
          }
        }
      }

    }
  }

}

// print vertical spacing variables
@include helpers.print-variables-in-root(helpers.$vertical_spacing, helpers.$custom_vertical_spacing, 'spacing');

// print horizontal spacing variables
@include helpers.print-variables-in-root(helpers.$horizontal_spacing, helpers.$custom_horizontal_spacing, 'spacing-x');

// generate responsive values
@include generate-spacing-variables(helpers.$vertical_spacing, 'spacing');
@include generate-spacing-variables(helpers.$horizontal_spacing, 'spacing-x');