/**
 * Spacing
 * https://stackoverflow.design/product/base/spacing/
 */
@import "helpers";

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

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

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

/**
 * Vertical Spacing
 */

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

            //@debug $value, $postfix;

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

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

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

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


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

    }
  }

}

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

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

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