Tabbar

1 files changed, 25 insertions, 10 deletions

diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 8518525..68666dc 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -14,7 +14,6 @@
     @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));
@@ -44,7 +43,7 @@
             position:               relative;
             display:                flex;
             align-items:            center;
-            padding-inline:         calc(.5 * props.get(vars.$spacing));
+            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;
@@ -61,6 +60,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,
@@ -81,21 +90,27 @@
                 }
             }
 
-            @include bem.is('selected') {
-                color:                  props.get(vars.$tab--selected--text-color);
-                border-block-end-color: props.get(vars.$tab--selected--text-color);
+            @include bem.next-twin-elem {
+                padding-inline-start: calc(.5 * props.get(vars.$spacing));
             }
-        }
 
-        @include bem.elem('caret') {
-            display: none;
+            @include bem.is('selected') {
+                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);
                 }
             }
         }