From 0d8ff84a82e93348a97ffc550094d2e9b47f4943 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 24 Oct 2024 09:05:39 +0200
Subject: Improved vertical divider

---
 src/_utils.scss                | 42 ------------------------------------------
 src/objects/_divider.scss      |  4 ++++
 src/objects/_divider.vars.scss |  2 ++
 3 files changed, 6 insertions(+), 42 deletions(-)

(limited to 'src')

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)) {
-- 
cgit v1.2.3-70-g09d2