Improved vertical divider

2 files changed, 6 insertions, 0 deletions

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)) {