Tabbar

1 files changed, 37 insertions, 36 deletions

diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 58701b7..bd937d0 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -14,14 +14,23 @@
     @include bem.object('tabbar') {
         position:        relative;
         display:         flex;
-        gap:             props.get(vars.$spacing);
         min-inline-size: 0;
         block-size:      props.get(vars.$block-size);
         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: 0;
+            content:            '';
+            background-color:   props.get(vars.$railing--bg-color);
+        }
 
         @include bem.modifier('quiet') {
-            box-shadow: none;
+            &::after {
+                display: none;
+            }
         }
 
         @include bem.modifier('adapt') {
@@ -29,12 +38,12 @@
         }
 
         @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;
+            position:       relative;
+            display:        flex;
+            align-items:    center;
+            padding-inline: calc(.5 * props.get(vars.$spacing));
+            color:          props.get(vars.$tab--text-color);
+            white-space:    nowrap;
 
             &::before {
                 position:          absolute;
@@ -47,6 +56,17 @@
                 transform:         translateY(-50%);
             }
 
+            &::after {
+                position:         absolute;
+                inset-block-end:  0;
+                inset-inline:     calc(.5 * props.get(vars.$spacing));
+                z-index:          -10;
+                display:          none;
+                block-size:       props.get(vars.$indicator--width);
+                content:          '';
+                background-color: props.get(vars.$tab--selected--text-color);
+            }
+
             &:link,
             &:visited {
                 &:hover,
@@ -68,8 +88,11 @@
             }
 
             @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;
+                }
             }
         }
 
@@ -79,36 +102,14 @@
 
         @include bem.modifier('accent') {
             @include bem.elem('tab') {
-                @include bem.is('selected') {
-                    color:                  props.get(vars.$tab--accent--text-color);
-                    border-block-end-color: props.get(vars.$tab--accent--text-color);
+                &::after {
+                    background-color: props.get(vars.$tab--accent--text-color);
                 }
-            }
-        }
-
-        @include bem.is('collapsed') {
-            @include bem.elem('tab') {
-                display: none;
 
                 @include bem.is('selected') {
-                    display:                flex;
-                    color:                  props.get(vars.$tab--text-color);
-                    border-block-end-color: transparent;
-
-                    &:link,
-                    &:visited {
-                        &:hover,
-                        &:active,
-                        &:focus-visible {
-                            color: props.get(vars.$tab--selected--text-color);
-                        }
-                    }
+                    color: props.get(vars.$tab--accent--text-color);
                 }
             }
-
-            @include bem.elem('caret') {
-                display: block;
-            }
         }
     }
 }