Update

1 files changed, 23 insertions, 13 deletions

diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index e0dbcb0..0d18f77 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -18,15 +18,9 @@
         box-shadow:      0 calc(-1 * props.get(vars.$indicator--width)) 0 0 props.get(vars.$railing--bg-color) inset;
 
         @include bem.elem('tabs') {
-            display:       flex;
-            block-size:    100%;
-            margin-inline: calc(-.5 * props.get(vars.$spacing));
-
-            &::after {
-                display:     block;
-                inline-size: props.get(vars.$spacing);
-                content:     '';
-            }
+            display:             flex;
+            block-size:          100%;
+            margin-inline-start: calc(-.5 * props.get(vars.$spacing));
         }
 
         @include bem.modifier('quiet') {
@@ -57,6 +51,16 @@
                 transform:         translateY(-50%);
             }
 
+            &::after {
+                position:         absolute;
+                inset-block-end:  0;
+                inset-inline:     calc(.5 * props.get(vars.$spacing));
+                z-index:          10;
+                display:          none;
+                content:          '';
+                background-color: props.get(vars.$tab--selected--text-color);
+            }
+
             &:link,
             &:visited {
                 &:hover,
@@ -78,16 +82,22 @@
             }
 
             @include bem.is('selected') {
-                color:                  props.get(vars.$tab--selected--text-color);
-                border-block-end-color: props.get(vars.$tab--selected--text-color);
+                color: props.get(vars.$tab--selected--text-color);
+                
+                &::after {
+                    display: block;
+                }
             }
         }
 
         @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);
-                    border-block-end-color: props.get(vars.$tab--accent--text-color);
+                    color: props.get(vars.$tab--accent--text-color);
                 }
             }
         }