Border suffix

1 files changed, 42 insertions, 0 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
index cdb2a32..844ff90 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -230,6 +230,20 @@ $-sizes: (
                     border#{$suffix}: 0;
                 }
             }
+
+            @each $breakpoint in map.keys(media.$breakpoints) {
+                @include media.media('<=#{$breakpoint}') {
+                    @include bem.suffix('#{$breakpoint}-lo') {
+                        border#{$suffix}: 0;
+                    }
+                }
+    
+                @include media.media('>#{$breakpoint}') {
+                    @include bem.suffix('#{$breakpoint}-hi') {
+                        border#{$suffix}: 0;
+                    }
+                }
+            }
         }
         
         @include bem.utility('b#{$dir}-1') {
@@ -246,6 +260,20 @@ $-sizes: (
                     border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
                 }
             }
+
+            @each $breakpoint in map.keys(media.$breakpoints) {
+                @include media.media('<=#{$breakpoint}') {
+                    @include bem.suffix('#{$breakpoint}-lo') {
+                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                    }
+                }
+    
+                @include media.media('>#{$breakpoint}') {
+                    @include bem.suffix('#{$breakpoint}-hi') {
+                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                    }
+                }
+            }
         }
         
         @include bem.utility('b#{$dir}-1-mute') {
@@ -262,6 +290,20 @@ $-sizes: (
                     border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
                 }
             }
+
+            @each $breakpoint in map.keys(media.$breakpoints) {
+                @include media.media('<=#{$breakpoint}') {
+                    @include bem.suffix('#{$breakpoint}-lo') {
+                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                    }
+                }
+    
+                @include media.media('>#{$breakpoint}') {
+                    @include bem.suffix('#{$breakpoint}-hi') {
+                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                    }
+                }
+            }
         }
     }