//  Hydrogen / Properties / Margins

@mixin h2-prop-margin($mediaQueryMap, $sideMap, $whitespaceMap, $margin) {
    
  // Variable Margins
  @each $mediaKey, $mediaValue in $mediaQueryMap {
    @media #{$mediaValue} {
      @each $sideKey, $sideValue in $sideMap {
        @each $whitespaceKey, $whitespaceValue in $whitespaceMap {

          [data-h2-margin*="#{$mediaKey}(#{$sideKey}, #{$whitespaceKey})"] {
            @if $sideKey == "all" {
              margin: calc(#{$margin} #{$whitespaceValue});
            }
            @else if $sideKey == "tb" {
              margin-top: calc(#{$margin} #{$whitespaceValue});
              margin-bottom: calc(#{$margin} #{$whitespaceValue});
            }
            @else if $sideKey == "rl" {
              margin-right: calc(#{$margin} #{$whitespaceValue});
              margin-left: calc(#{$margin} #{$whitespaceValue});
            }
            @else {
              margin#{$sideValue}: calc(#{$margin} #{$whitespaceValue});
            }
          }

        }
      }
    }
  }

  // Auto Margins
  @each $mediaKey, $mediaValue in $mediaQueryMap {
    @media #{$mediaValue} {
      @each $sideKey, $sideValue in $sideMap {

        [data-h2-margin*="#{$mediaKey}(#{$sideKey}, auto)"] {
          @if $sideKey == "all" {
            margin: auto;
          }
          @else if $sideKey == "tb" {
            margin-top: auto;
            margin-bottom: auto;
          }
          @else if $sideKey == "rl" {
            margin-right: auto;
            margin-left: auto;
          }
          @else {
            margin#{$sideValue}: auto;
          }
        }

      }
    }
  }

}