@import "utils/functions";
// Spacing
//
// Classes to apply spacing (Margin and Padding)
// Format - m{direction}-{value} | p{direction}-{value} | w
//
// Markup:
//Valid values for direction:
// -> top : t
// -> bottom : b
// -> left : l
// -> right : r
// -> x : left,right
// -> y : top,bottom
// -> a : all ( left,right, top,bottom)
//
//Valid values for space amounts:
// -> 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 25, 30, 35, 40, 45, 50, 75, 100, auto
//
// Styleguide Spacing
//

$spaceamounts: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 25, 30, 35, 40, 45, 50, 75, 100, auto); // Adjust this to include the pixel amounts you need.
$sides: (top, bottom, left, right);

@each $space in $spaceamounts {
  $suffix_px: ternary($space == 'auto', '', 'px');
  $suffix_percent: ternary($space == 'auto', '', '%');
  @each $side in $sides {
    .m#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}#{$suffix_px} !important;
    }

    @if ($space != 'auto') {
      .p#{str-slice($side, 0, 1)}-#{$space} {
        padding-#{$side}: #{$space}#{$suffix_px} !important;
      }
    }
  }

  .w-#{$space} {
    width: #{$space}#{$suffix_percent} !important;
  }

  .h-#{$space} {
    height: #{$space}#{$suffix_percent} !important;
  }

  .mx-#{$space} {
    margin-left: #{$space}#{$suffix_px} !important;
    margin-right: #{$space}#{$suffix_px} !important;
  }

  .my-#{$space} {
    margin-top: #{$space}#{$suffix_px} !important;
    margin-bottom: #{$space}#{$suffix_px} !important;
  }

  .ma-#{$space} {
    margin: #{$space}#{$suffix_px} !important;
  }

  @if ($space != 'auto') {
    .px-#{$space} {
      padding-left: #{$space}#{$suffix_px} !important;
      padding-right: #{$space}#{$suffix_px} !important;
    }
  }

  @if ($space != 'auto') {
    .py-#{$space} {
      padding-top: #{$space}#{$suffix_px} !important;
      padding-bottom: #{$space}#{$suffix_px} !important;
    }
  }

  @if ($space != 'auto') {
    .pa-#{$space} {
      padding: #{$space}#{$suffix_px} !important;
    }
  }
}

// Margins
//
// Use margin classes using m{direction}-{value}
//
// Markup:
//  <div class="mb-6 ml-9">Margin Left 9px, Margin Bottom 6px</div>
// Markup:
//  <div class="mx-auto w-50">Margin Horizontal Auto</div>
//
// Styleguide Spacing.Margin

// Padding
//
// Use padding classes using p{direction}-{value}
//
// Markup:
//  <div class="pt-5">Padding Top 1px</div>
// Markup:
//  <div class="pa-30">Padding 30px</div>
//
// Styleguide Spacing.Padding
//