// 
// @TODO: Add docs to Grid!
//
@mixin Grid() {
    .Grid {
        @include flex-grid-row();
    
        // mods
        &--full {
            max-width: 100%!important;
        }
        
        &--noGap {
            .Grid-column {
                padding: 0px;
            }
        }
        



        &-column {
            @include flex-grid-column();
            &--shrink {
                flex: flex-grid-column(shrink);
            }
        }
    
    
  // Sizing (percentage)
        @each $size in $breakpoint-classes {
          @include breakpoint($size) {
            @for $i from 1 through $grid-column-count {
              .u-#{$size}-#{$i} {
                flex: flex-grid-column($i);
                max-width: grid-column($i);
              }
            }
          }
        }
        
        // Sizing (expand)
        @each $size in $breakpoint-classes {
          @if $size != small {
            @include breakpoint($size) {
              .u-#{$size}-expand {
                flex: flex-grid-column();
              }
            }
          }
        }
        

        @each $hdir, $prop in (
          'right': flex-end,
          'center': center,
          'justify': space-between,
          'spaced': space-around,
        ) {
          &--#{$hdir} {
            justify-content: $prop;
          }
        }

        // Horizontal alignment using align-items and align-self
        @each $vdir, $prop in (
          'top': flex-start,
          'bottom': flex-end,
          'middle': center,
          'stretch': stretch,
        ) {
          &--#{$vdir} {
            align-items: $prop;
          }

          &-column--#{$vdir} {
            align-self: $prop;
          }
        }    
    }
}