//  Hydrogen / Properties / Flexbox Grid

// data-h2-grid="MEDIA(ALIGNMENT, EXPANSION, GRID-PADDING, ITEM-GUTTER-VALUE)"
// data-h2-grid-item="MEDIA(XofY)"
// data-h2-grid-item-content

@mixin h2-prop-grid($mediaQueryMap, $whitespaceMap, $gridColumns, $padding) {

  // Grid Alignment Map
  $grid-alignment-map: (
    "top": "flex-start",
    "middle": "center",
    "bottom": "flex-end",
    "stretch": "stretch"
  );

  // Grid Expansion Map
  $grid-expansion-map: (
    "contained": "contained",
    "expanded": "expanded"
  );

  // Grid Padding Map
  $grid-padding-map: (
    "padded": "padded",
    "flush": "flush"
  );

  @each $mediaKey, $mediaValue in $mediaQueryMap {
    @media #{$mediaValue} {
      @each $alignmentKey, $alignmentValue in $grid-alignment-map {
        @each $expansionKey, $expansionValue in $grid-expansion-map {
          @each $paddingKey, $paddingValue in $grid-padding-map {
            @each $whitespaceKey, $whitespaceValue in $whitespaceMap {

              [data-h2-grid*="#{$mediaKey}(#{$alignmentKey}, #{$expansionKey}, #{$paddingKey}, #{$whitespaceKey})"] {
                align-items: #{$alignmentValue};
                display: flex;
                flex-wrap: wrap;
                @if $expansionKey == "expanded" {
                  margin: calc(((#{$padding}/2) #{$whitespaceValue}) * -1);
                }
                @if $paddingKey == "padded" {
                  padding: calc((#{$padding}/2) #{$whitespaceValue});
                }
                >[data-h2-grid-item] {
                  padding: calc((#{$padding}/2) #{$whitespaceValue});
                  @if $alignmentKey == "stretch" {
                    >[data-h2-grid-item-content] {
                      height: 100%;
                    }
                  }
                }
              }

            }
          }
        }
      }
    }
  }

  [data-h2-grid] >[data-h2-grid-item] {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
  }

  @each $mediaKey, $mediaValue in $mediaQueryMap {
    @media #{$mediaValue} {
      @for $i from 1 through $gridColumns {
        @for $r from 1 through $gridColumns {

          [data-h2-grid] >[data-h2-grid-item*="#{$mediaKey}(#{$i}of#{$r})"] {
            flex: 0 0 calc(#{$i} / #{$r} * 100%);
            max-width: ($i / $r * 100%);
          }

        }
      }
    }
  }

}