4 files changed, 45 insertions, 19 deletions

diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 2010a2d..04857e3 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -23,6 +23,7 @@ $breakpoints: (
 @forward 'config' as config--*;
 @forward 'props' as props--*;
 @forward 'core' as core--*;
+@forward 'layers' as layers--*;
 
 @forward 'layouts/button-group' as l-button-group--*;
 @forward 'layouts/card-list' as l-card-list--*;
diff --git a/src/_layers.scss b/src/_layers.scss
new file mode 100644
index 0000000..cc3bb50
--- /dev/null
+++ b/src/_layers.scss
@@ -0,0 +1,3 @@
+@mixin styles {
+    @layer scope, theme, object, layout, component, utility;
+}
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 6628eab..ff95526 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,7 +14,7 @@
         position:         relative;
         display:          flex;
         flex-direction:   column;
-        margin-inline:    calc(-1 * props.get(vars.$key-focus--border-width));
+        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
         background-color: props.get(vars.$bg-color);
         background-clip:  content-box;
         border:           props.get(vars.$key-focus--border-offset) solid transparent;
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 218fe7d..aaa6f07 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -14,15 +14,20 @@
     @include bem.object('tabbar') {
         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;
+            block-size:         props.get(vars.$indicator--width);
+            margin-block-start: calc(-1 * props.get(vars.$indicator--width));
+            content:            '';
+            background-color:   props.get(vars.$railing--bg-color);
+        }
 
         @include bem.elem('tabs') {
-            display:        flex;
-            gap:            props.get(vars.$spacing);
-            block-size:     100%;
-            padding-inline: calc(.5 * props.get(vars.$spacing));
-            margin-inline:  calc(-.5 * props.get(vars.$spacing));
+            display:         flex;
+            block-size:      100%;
+            margin-inline:   calc(-.5 * props.get(vars.$spacing));
+            overflow-inline: auto;
         }
 
         @include bem.modifier('quiet') {
@@ -34,17 +39,17 @@
         }
 
         @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;
                 inset-block-start: 50%;
-                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i));
+                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
                 z-index:           -10;
                 block-size:        1.5em;
                 content:           '';
@@ -52,6 +57,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,
@@ -73,16 +89,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);
                 }
             }
         }