fix(tabs): fix non-working Sass theme parameters

src/components/tabs/themes/shared/tab/tab.bootstrap.scss

@@ -31,12 +31,25 @@ $theme: $bootstrap;
 }
 
 [part='tab-header'] {
+    border: none;
+
     &:hover {
+        border: none;
+        background: var-get($theme, 'item-background');;
+
         &::before {
             box-shadow:
                 inset 0 var(--_border-size) 0 0 var-get($theme, 'border-color--hover'),  /* Top */
                 inset calc(var(--_border-size) * -1) 0 0 0 var-get($theme, 'border-color--hover'),  /* Left */
-                inset var(--_border-size) 0 0 0 var-get($theme, 'border-color--hover'),  /* Right */
+                inset var(--_border-size) 0 0 0 var-get($theme, 'border-color--hover');  /* Right */
+
+            background: var-get($theme, 'item-hover-background');
+        }
+
+        &:hover:focus-within {
+            &::before {
+                box-shadow: none;
+            }
         }
     }
 
@@ -54,8 +67,7 @@ $theme: $bootstrap;
             position: absolute;
             width: 100%;
             height: 100%;
-            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color');
-            border-radius: var-get($theme, 'border-radius');
+            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-active-hover-color');
             z-index: 2;
         }
     }
@@ -64,25 +76,47 @@ $theme: $bootstrap;
 :host([selected]) {
     [part='tab-header'] {
         position: relative;
+        background: var-get($theme, 'item-background');
 
         &::before {
             box-shadow:
                 inset 0 var(--_border-size) 0 0 var-get($theme, 'border-color'),  /* Top */
                 inset calc(var(--_border-size) * -1) 0 0 0 var-get($theme, 'border-color'),  /* Left */
-                inset var(--_border-size) 0 0 0 var-get($theme, 'border-color'),  /* Right */
+                inset var(--_border-size) 0 0 0 var-get($theme, 'border-color');  /* Right */
+
+            background: var-get($theme, 'item-active-background');
+            border-start-start-radius: var-get($theme, 'border-radius');
+            border-start-end-radius: var-get($theme, 'border-radius');
         }
 
         &:hover {
             border-top-color: var-get($theme, 'border-color');
             border-inline-color: var-get($theme, 'border-color');
             border-bottom-color: var-get($theme, 'item-background');
+            background: var-get($theme, 'item-background');
+
+            &::before {
+                background: var-get($theme, 'item-active-hover-background');
+            }
         }
 
         &:focus,
-        &:focus-within
-        {
-            background: var-get($theme, 'item-hover-background');
-            z-index: 1;
+        &:focus-within {
+            border: none;
+            background: var-get($theme, 'item-background');
+
+            &::after{
+                border-radius: var-get($theme, 'border-radius') var-get($theme, 'border-radius') rem(4px) rem(4px);
+            }
+        }
+
+        &:focus-within {
+            &::before {
+                box-shadow: none;
+                border-bottom-left-radius: rem(4px);
+                border-bottom-right-radius: rem(4px);
+                background: var-get($theme, 'item-active-hover-background');
+            }
         }
     }
 }

src/components/tabs/themes/shared/tab/tab.common.scss

@@ -7,6 +7,7 @@ $theme: $material;
     color: var-get($theme, 'item-text-color');
     background: var-get($theme, 'item-background');
     border-radius: var-get($theme, 'border-radius');
+    border: rem(1px) solid var-get($theme, 'border-color');
 
     ::slotted(igc-icon) {
         color: var-get($theme, 'item-icon-color');
@@ -16,6 +17,7 @@ $theme: $material;
     &:focus-within {
         color: var-get($theme, 'item-hover-color');
         background: var-get($theme, 'item-hover-background');
+        border: rem(1px) solid var-get($theme, 'border-color--hover');
 
         ::slotted(igc-icon) {
             color: var-get($theme, 'item-hover-icon-color');
@@ -26,17 +28,19 @@ $theme: $material;
 :host([selected]) {
     [part='tab-header'] {
         color: var-get($theme, 'item-active-color');
+        background: var-get($theme, 'item-active-background');
 
         ::slotted(igc-icon) {
             color: var-get($theme, 'item-active-icon-color');
         }
 
         &:hover,
         &:focus-within {
-            color: var-get($theme, 'item-active-color');
+            color: var-get($theme, 'item-active-hover-color');
+            background: var-get($theme, 'item-active-hover-background');
 
             ::slotted(igc-icon) {
-                color: var-get($theme, 'item-active-icon-color');
+                color: var-get($theme, 'item-active-hover-icon-color');
             }
         }
     }

src/components/tabs/themes/shared/tab/tab.fluent.scss

@@ -16,15 +16,4 @@ $theme: $fluent;
     [part='content'] {
         font-weight: 700;
     }
-
-    [part='tab-header'] {
-        &:hover,
-        &:focus-within {
-            color: var-get($theme, 'item-hover-color');
-
-            ::slotted(igc-icon) {
-                color: var-get($theme, 'item-hover-icon-color');
-            }
-        }
-    }
 }

src/components/tabs/themes/shared/tab/tab.indigo.scss

@@ -13,10 +13,19 @@ $theme: $indigo;
 
 [part='tab-header'] {
     padding: pad-block(rem(12px)) pad-inline(rem(16px));
+    border-top: rem(1px) solid transparent;
+    border-inline: none;
+
+    &:hover,
+    &:focus-within {
+        border-top: rem(1px) solid transparent;
+        border-inline: none;
+        border-bottom: rem(1px) solid var-get($theme, 'border-color--hover');
+    }
 }
 
 [part='content'] {
     @include type-style('subtitle-2');
 
     text-transform: uppercase;
-}
+}

src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss

@@ -7,6 +7,10 @@ $theme: $bootstrap;
     --header-min-height: #{rem(48px)};
 }
 
+[part~='inner'] {
+    flex-grow: 1;
+}
+
 :host([alignment='start']) {
     [part~='inner']:not([part~='scrollable']) {
         &::after {

src/components/tabs/themes/shared/tabs/tabs.common.scss

@@ -15,7 +15,7 @@ $theme: $material;
     --active-background: #{var-get($theme, 'button-hover-background')};
     --border-color: #{var-get($theme, 'button-background')};
     --disabled-foreground: #{var-get($theme, 'button-disabled-color')};
-    --disabled-background: #{var-get($theme, 'item-background')};
+    --disabled-background: #{var-get($theme, 'button-background')};
 
     [part~='base'] {
         transition: all 0ms;

src/components/tabs/themes/shared/tabs/tabs.indigo.scss

@@ -8,6 +8,7 @@ $theme: $indigo;
 :host {
     --header-min-height: #{rem(40px)};
     --scroll-btn-size: #{rem(40px)};
+    --nav-btn-border-color: #{var-get($theme, 'border-color')};
 }
 
 [part='selected-indicator'] {
@@ -27,7 +28,6 @@ $theme: $indigo;
         position: absolute;
         width: 100%;
         height: $indicator-height;
-        background-color: var-get($theme, 'border-color');
         inset-block-end: 100%;
     }
 }
@@ -45,11 +45,12 @@ $theme: $indigo;
 }
 
 igc-icon-button:hover::part(base) {
+    background-color: var-get($theme, 'button-hover-background');
+
     &::after {
         content: '';
         position: absolute;
         inset: 0;
-        background-color: var-get($theme, 'button-hover-background');
         z-index: 1;
     }
 }
@@ -58,6 +59,11 @@ igc-icon-button::part(base) {
     overflow: hidden;
 }
 
+igc-icon-button[disabled]::part(base), 
+igc-icon-button:disabled::part(base) {
+    border-bottom: rem(1px) solid var(--nav-btn-border-color);
+}
+
 igc-icon-button::part(icon) {
     --size: #{rem(16px)};
 

src/components/tabs/themes/shared/tabs/tabs.material.scss

@@ -18,3 +18,7 @@ $theme: $material;
         background: var-get($theme, 'indicator-color');
     }
 }
+
+igc-icon-button:hover::part(icon) {
+    color: var(--hover-foreground);
+}

src/components/tabs/themes/tabs.base.scss

@@ -43,7 +43,6 @@
     grid-template-rows: minmax(var(--header-min-height), auto) auto 1fr;
     align-items: center;
     position: relative;
-    flex-grow: 1;
 
     ::slotted(igc-tab) {
         display: contents;