@import "../config";

$spacing-spacer: 1rem;
$spacing-spacers: (
  0: 0,
  1: ($spacing-spacer * .25),
  2: ($spacing-spacer * .5),
  3: #{$spacing-spacer},
  4: ($spacing-spacer * 1.5),
  5: ($spacing-spacer * 3)
);

// Margin and Padding

// The spacing utility classes are named using the
// format `{namespace}-{property}{sides}-{size}` and `{property}{sides}-{breakpoint}-{size}`
//
// Namespace
// `u-` - signifies that this class is a Utility class 
// Property
// `m` - for classes that set `margin`
// `p` - for classes that set `padding`
//
// Sides
// `t` - for classes that set `margin-top` or `padding-top`
// `b` - for classes that set `margin-bottom` or `padding-bottom`
// `l` - for classes that set `margin-left` or `padding-left`
// `r` - for classes that set `margin-right` or `padding-right`
// `x` - for classes that set both `*-left` and `*-right`
// `y` - for classes that set both `*-top` and `*-bottom`
//
// Sizes
// `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
// `1` - (by default) for classes that set `margin` or `padding` to `$spacing-spacer * .25`
// `2` - (by default) for classes that set `margin` or `padding` to `$spacing-spacer * .5`
// `3` - (by default) for classes that set `margin` or `padding` to `$spacing-spacer`
// `4` - (by default) for classes that set `margin` or `padding` to `$spacing-spacer * 1.5`
// `5` - (by default) for classes that set `margin` or `padding` to `$spacing-spacer * 3`
// `auto` - (by default) for classes that set `margin` to `auto`


@mixin cwui-spacing-classes {
  // @each $breakpoint in $breakpoint-classes {
  //   @include media-breakpoint-up($breakpoint) {
  //     $infix: breakpoint-infix($breakpoint, $breakpoints);
  
  //     @each $prop, $abbrev in (margin: m, padding: p) {
  //       @each $size, $length in $spacing-spacers {
  
  //         .u-#{$abbrev}-#{$size} {
  //           #{$prop}: $length !important;
  //         }
  //         .u-#{$abbrev}t#{$infix}-#{$size},
  //         .u-#{$abbrev}y#{$infix}-#{$size} {
  //           #{$prop}-top: $length !important;
  //         }
  //         .u-#{$abbrev}r#{$infix}-#{$size},
  //         .u-#{$abbrev}x#{$infix}-#{$size} {
  //           #{$prop}-right: $length !important;
  //         }
  //         .u-#{$abbrev}b#{$infix}-#{$size},
  //         .u-#{$abbrev}y#{$infix}-#{$size} {
  //           #{$prop}-bottom: $length !important;
  //         }
  //         .u-#{$abbrev}l#{$infix}-#{$size},
  //         .u-#{$abbrev}x#{$infix}-#{$size} {
  //           #{$prop}-left: $length !important;
  //         }
  //       }
  //     }
  //   }
  // }
  
  
  @include -zf-each-breakpoint {
    @for $i from 1 through $grid-column-count{
    // $infix: breakpoint-infix($breakpoint, $breakpoints);

      @each $prop, $abbrev in (margin: m, padding: p) {
        @each $spacing-size, $length in $spacing-spacers {

          .u-#{$abbrev}--#{$spacing-size} {
            #{$prop}: $length !important;
          }
          .u-#{$abbrev}t-#{$-zf-size}--#{$spacing-size},
          .u-#{$abbrev}y-#{$-zf-size}--#{$spacing-size} {
            #{$prop}-top: $length !important;
          }
          .u-#{$abbrev}r-#{$-zf-size}--#{$spacing-size},
          .u-#{$abbrev}x-#{$-zf-size}--#{$spacing-size} {
            #{$prop}-right: $length !important;
          }
          .u-#{$abbrev}b-#{$-zf-size}--#{$spacing-size},
          .u-#{$abbrev}y-#{$-zf-size}--#{$spacing-size} {
            #{$prop}-bottom: $length !important;
          }
          .u-#{$abbrev}l-#{$-zf-size}--#{$spacing-size},
          .u-#{$abbrev}x-#{$-zf-size}--#{$spacing-size} {
            #{$prop}-left: $length !important;
          }
        }
      }

    }
  }
}