//  Hydrogen / Properties / Visibility

@mixin h2-prop-visibility($mediaQueryMap) {
  @each $mediaKey, $mediaValue in $mediaQueryMap {
    @media #{$mediaValue} {

      [data-h2-visibility*="#{$mediaKey}(invisible)"]{
        height: 1px;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: -100vw;
        width: 1px;
      }
      [data-h2-visibility*="#{$mediaKey}(hidden)"] {
        display: none;
        visibility: hidden;
      }
      [data-h2-visibility*="#{$mediaKey}(visible)"] {
        display: block;
        height: auto;
        overflow: auto;
        position: static;
        top: auto;
        left: auto;
        width: auto;
        visibility: visible;
      }
        
    }
  }
}