Tabs

2 files changed, 33 insertions, 34 deletions

diff --git a/src/objects/_tabs.scss b/src/objects/_tabs.scss
index c1fcb56..b998120 100644
--- a/src/objects/_tabs.scss
+++ b/src/objects/_tabs.scss
@@ -12,6 +12,7 @@
     @include materialize-at-root(meta.module-variables('vars'));
 
     @include bem.object('tabs') {
+        position:        relative;
         display:         flex;
         flex:            1 1 auto;
         gap:             props.get(vars.$spacing);
@@ -21,36 +22,41 @@
         margin-inline:   calc(-.5 * props.get(vars.$spacing));
         overflow-inline: auto;
 
-        @include bem.elem('tab') {
-            position:       relative;
-            display:        flex;
-            align-items:    center;
-            color:          props.get(vars.$tab--text-color);
-            white-space:    nowrap;
+        &::after {
+            position:         absolute;
+            inset-block-end:  0;
+            inset-inline:     calc(.5 * props.get(vars.$spacing));
+            z-index:          -10;
+            block-size:       props.get(vars.$indicator--width);
+            content:          '';
+            background-color: props.get(vars.$railing--bg-color);
+        }
 
-            &::before,
+        @include bem.modifier('quiet') {
             &::after {
-                position: absolute;
-                z-index:  -10;
-                content:  '';
+                display: none;
             }
+        }
+
+        @include bem.elem('tab') {
+            position:               relative;
+            display:                flex;
+            align-items:            center;
+            color:                  props.get(vars.$tab--text-color);
+            white-space:            nowrap;
+            border-block:           props.get(vars.$indicator--width) solid transparent;
 
             &::before {
+                position:          absolute;
                 inset-block-start: 50%;
                 inset-inline:      calc(-1 * props.get(vars.$tab--pad-i));
+                z-index:           -10;
                 block-size:        1.5em;
+                content:           '';
                 border-radius:     props.get(vars.$rounding);
                 transform:         translateY(-50%);
             }
 
-            &::after {
-                inset-block-end:  0;
-                inset-inline:     0;
-                display:          none;
-                block-size:       props.get(vars.$indicator--width);
-                background-color: props.get(vars.$tab--selected--text-color);
-            }
-
             &:link,
             &:visited {
                 &:hover,
@@ -72,11 +78,8 @@
             }
 
             @include bem.is('selected') {
-                color: props.get(vars.$tab--selected--text-color);
-
-                &::after {
-                    display: block;
-                }
+                color:                  props.get(vars.$tab--selected--text-color);
+                border-block-end-color: props.get(vars.$tab--selected--text-color);
             }
         }
 
@@ -86,12 +89,9 @@
 
         @include bem.modifier('accent') {
             @include bem.elem('tab') {
-                &::after {
-                    background-color: props.get(vars.$tab--accent--text-color);
-                }
-
                 @include bem.is('selected') {
-                    color: props.get(vars.$tab--accent--text-color);
+                    color:                  props.get(vars.$tab--accent--text-color);
+                    border-block-end-color: props.get(vars.$tab--accent--text-color);
                 }
             }
         }
@@ -101,12 +101,9 @@
                 display: none;
 
                 @include bem.is('selected') {
-                    display: flex;
-                    color:   props.get(vars.$tab--text-color);
-
-                    &::after {
-                        display: none;
-                    }
+                    display:                flex;
+                    color:                  props.get(vars.$tab--text-color);
+                    border-block-end-color: transparent;
 
                     &:link,
                     &:visited {
diff --git a/src/objects/_tabs.vars.scss b/src/objects/_tabs.vars.scss
index 620228a..daad166 100644
--- a/src/objects/_tabs.vars.scss
+++ b/src/objects/_tabs.vars.scss
@@ -17,6 +17,8 @@ $tab--text-color:           props.def(--o-tabs--tab--text-color, props.get(core.
 $tab--selected--text-color: props.def(--o-tabs--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
 $tab--accent--text-color:   props.def(--o-tabs--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
 
+$railing--bg-color: props.def(--o-tabs--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+
 $key-focus--text-color:    props.def(--o-tabs--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
 $key-focus--border-color:  props.def(--o-tabs--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
 $key-focus--outline-color: props.def(--o-tabs--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;