Tabbar: Separate border and indicator width

2 files changed, 3 insertions, 2 deletions

diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index a9daaae..eee38e9 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -18,8 +18,8 @@
 
                 &::after {
                         display:            block;
-                        block-size:         props.get(vars.$indicator--width);
-                        margin-block-start: calc(-1 * props.get(vars.$indicator--width));
+                        block-size:         props.get(vars.$border--width);
+                        margin-block-start: calc(-1 * props.get(vars.$border--width));
                         content:            '';
                         background-color:   props.get(vars.$railing--bg-color);
                 }
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss
index 4095629..e4367eb 100644
--- a/src/objects/_tabbar.vars.scss
+++ b/src/objects/_tabbar.vars.scss
@@ -8,6 +8,7 @@ $rounding:   props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !def
 $spacing:    props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default;
 $tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default;
 
+$border--width:    props.def(--o-tabbar--indicator--width, props.get(core.$border-width--thin)) !default;
 $indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; 
 
 $key-focus--border-width:  props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;