Tabs

1 files changed, 17 insertions, 42 deletions

diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 68666dc..1513cc1 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -14,19 +14,16 @@
     @include bem.object('tabbar') {
         position:        relative;
         display:         flex;
+        gap:             props.get(vars.$spacing);
         min-inline-size: 0;
         block-size:      props.get(vars.$block-size);
-        margin-inline:   calc(-.5 * props.get(vars.$spacing));
         overflow-inline: auto;
+        box-shadow:      0 calc(-1 * props.get(vars.$indicator--width)) 0 0 props.get(vars.$railing--bg-color) inset;
 
-        &::after {
-            display:            block;
-            flex:               1 1 auto;
-            block-size:         props.get(vars.$indicator--width);
-            margin-block-start: auto;
-            margin-inline-end:  calc(.5 * props.get(vars.$spacing));
-            content:            '';
-            background-color:   props.get(vars.$railing--bg-color);
+        @include bem.elem('tabs') {
+            display:        block;
+            padding-inline: calc(.5 * props.get(vars.$spacing));
+            margin-inline:  calc(-.5 * props.get(vars.$spacing));
         }
 
         @include bem.modifier('quiet') {
@@ -40,19 +37,17 @@
         }
 
         @include bem.elem('tab') {
-            position:               relative;
-            display:                flex;
-            align-items:            center;
-            padding-inline-end:     calc(.5 * props.get(vars.$spacing));
-            color:                  props.get(vars.$tab--text-color);
-            white-space:            nowrap;
-            border-block:           props.get(vars.$indicator--width) solid transparent;
-            border-block-end-color: props.get(vars.$railing--bg-color);
+            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) + .5 * props.get(vars.$spacing));
+                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i));
                 z-index:           -10;
                 block-size:        1.5em;
                 content:           '';
@@ -60,16 +55,6 @@
                 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,
@@ -90,27 +75,17 @@
                 }
             }
 
-            @include bem.next-twin-elem {
-                padding-inline-start: calc(.5 * props.get(vars.$spacing));
-            }
-
             @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);
             }
         }
 
         @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);
                 }
             }
         }