Improved vertical divider

3 files changed, 6 insertions, 42 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
index 844ff90..cdb2a32 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -230,20 +230,6 @@ $-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') {
@@ -260,20 +246,6 @@ $-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') {
@@ -290,20 +262,6 @@ $-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);
-                    }
-                }
-            }
         }
     }
 
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 7741922..b746551 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -78,6 +78,10 @@
                 block-size:       props.get(vars.$faint--border-width);
                 background-color: props.get(vars.$faint--bg-color);
             }
+
+            @include bem.modifier('vertical') {
+                background-color: props.get(vars.$vertical--faint--bg-color);
+            }
         }
 
         @include bem.modifier('labelled') {
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 66656cd..7d50798 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -23,6 +23,8 @@ $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core
 $faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border)) !default;
 $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more)) !default;
 
+$vertical--faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute)) !default;
+
 $static-themes: props.def(--o-divider);
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {