//  Hydrogen / Properties / Borders

// data-h2-border="MEDIA(COLOR, SIDE, STYLE, WIDTH)"

@mixin h2-prop-border($mediaQueryMap, $sideMap, $borderWidthMap, $borderStyleMap, $colorMap, $border-thickness-thin, $border-thickness-thick) {
  @each $mediaKey, $mediaValue in $mediaQueryMap {
    @media #{$mediaValue} {
      @each $sideKey, $sideValue in $sideMap {
        @each $width in $borderWidthMap {
          @each $style in $borderStyleMap {
            @each $colorKey, $colorValue in $colorMap {

              [data-h2-border*="#{$mediaKey}(#{$colorKey}, #{$sideKey}, #{$style}, #{$width})"] {
                @if $sideKey == "all" {
                  border-color: $colorValue;
                  border-style: unquote($style);
                  @if ($width == "thin") {
                    border-width: $border-thickness-thin;
                  }
                  @if ($width == "thick") {
                    border-width: $border-thickness-thick;
                  }
                }
                @else if $sideKey == "tb" {
                  border-top-color: $colorValue;
                  border-top-style: unquote($style);
                  border-bottom-color: $colorValue;
                  border-bottom-style: unquote($style);
                  @if ($width == "thin") {
                    border-top-width: $border-thickness-thin;
                    border-bottom-width: $border-thickness-thin;
                  }
                  @if ($width == "thick") {
                    border-top-width: $border-thickness-thick;
                    border-bottom-width: $border-thickness-thick;
                  }
                }
                @else if $sideKey == "rl" {
                  border-right-color: $colorValue;
                  border-right-style: unquote($style);
                  border-left-color: $colorValue;
                  border-left-style: unquote($style);
                  @if ($width == "thin") {
                    border-right-width: $border-thickness-thin;
                    border-left-width: $border-thickness-thin;
                  }
                  @if ($width == "thick") {
                    border-right-width: $border-thickness-thick;
                    border-left-width: $border-thickness-thick;
                  }
                }
                @else {
                  border#{$sideValue}-color: $colorValue;
                  border#{$sideValue}-style: unquote($style);
                  @if ($width == "thin") {
                    border#{$sideValue}-width: $border-thickness-thin;
                  }
                  @if ($width == "thick") {
                    border#{$sideValue}-width: $border-thickness-thick;
                  }
                }
              }

            }
          }
        }
      }
    }
  }

}