diff --git a/packages/devextreme/scss/widgets/fluent/tabPanel/_index.scss b/packages/devextreme/scss/widgets/fluent/tabPanel/_index.scss
index a641e5580f9c..eaaf843d4899 100644
--- a/packages/devextreme/scss/widgets/fluent/tabPanel/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/tabPanel/_index.scss
@@ -3,7 +3,8 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
-@use "../tabs/colors" as *;
+@use "../tabs/variables/colors" as *;
+@use "../tabs/mixins" as *;
 @use "../../base/tabPanel";
 
 // adduse
@@ -21,20 +22,20 @@
 
 .dx-tabpanel-tabs-position-top {
   .dx-tabs {
-    border-block-end: 1px solid $base-border-color;
+    border-bottom: 1px solid $base-border-color;
 
     @at-root #{selector-append(".dx-empty-collection", &)} {
-      border-block-end: none;
+      border-bottom: none;
     }
   }
 }
 
 .dx-tabpanel-tabs-position-bottom {
   .dx-tabs {
-    border-block-start: 1px solid $base-border-color;
+    border-top: 1px solid $base-border-color;
 
     @at-root #{selector-append(".dx-empty-collection", &)} {
-      border-block-start: none;
+      border-top: none;
     }
   }
 
@@ -42,29 +43,49 @@
     top: 0;
     bottom: unset;
   }
+
+  .dx-tabs-styling-mode-secondary:not(.dx-tabs-vertical) {
+    .dx-tab-selected .dx-tab-content {
+      @include dx-tabs-indicator-secondary-base-mixin(top, $tabs-selected-tab-border-color);
+
+      &.dx-state-disabled .dx-tab-content {
+        @include dx-tabs-indicator-secondary-base-mixin(top, $tabs-disabled-tab-border-color);
+      }
+    }
+  }
 }
 
 .dx-tabpanel-tabs-position-left {
   .dx-tabs {
-    border-inline-end: 1px solid $base-border-color;
+    border-right: 1px solid $base-border-color;
 
     @at-root #{selector-append(".dx-empty-collection", &)} {
-      border-inline-end: none;
+      border-right: none;
     }
   }
 }
 
 .dx-tabpanel-tabs-position-right {
   .dx-tabs {
-    border-inline-start: 1px solid $base-border-color;
+    border-left: 1px solid $base-border-color;
 
     @at-root #{selector-append(".dx-empty-collection", &)} {
-      border-inline-start: none;
+      border-left: none;
     }
   }
 
   .dx-tabpanel-tab.dx-tab-selected::after {
-    right: 0;
-    left: unset;
+    left: 0;
+    right: unset;
+  }
+
+  .dx-tabs-styling-mode-secondary {
+    .dx-tab-selected {
+      @include dx-tabs-indicator-secondary-vertical-mixin(left, $tabs-selected-tab-border-color);
+
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-secondary-vertical-mixin(left, $tabs-disabled-tab-border-color);
+      }
+    }
   }
 }
diff --git a/packages/devextreme/scss/widgets/fluent/tabs/_index.scss b/packages/devextreme/scss/widgets/fluent/tabs/_index.scss
index 90557ab5c122..fa099b6e8420 100644
--- a/packages/devextreme/scss/widgets/fluent/tabs/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/tabs/_index.scss
@@ -5,178 +5,13 @@
 @use "../button/mixins" as *;
 @use "../../base/icons" as *;
 @use "../../base/tabs";
-@use "colors" as *;
-@use "sizes" as *;
+@use "variables/colors" as *;
+@use "variables/sizes" as *;
+@use "mixins" as *;
+@use "layout/tabs" as *;
+@use "layout/tab/base" as *;
+@use "layout/navigation-button/base" as *;
 
 // adduse
 @use "../scrollable";
 @use "../badge";
-
-
-@mixin dx-tabs-border-mixin($position, $color) {
-  &::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    background-color: $color;
-
-    @if $position == bottom {
-      top: unset;
-      height: 2px;
-      width: auto;
-    } @else if $position == top {
-      bottom: unset;
-      height: 2px;
-      width: auto;
-    } @else if $position == left {
-      right: unset;
-      width: 2px;
-      height: auto;
-    } @else if $position == right {
-      left: unset;
-      width: 2px;
-      height: auto;
-    }
-  }
-}
-
-.dx-tab {
-  padding: $fluent-tabs-item-padding;
-  min-width: $fluent-tab-min-width;
-  background-color: $tabs-tab-background;
-  color: $tabs-tab-color;
-
-  &.dx-state-hover {
-    background-color: $tabs-hovered-tab-bg-color;
-  }
-
-  &.dx-tab-selected {
-    color: $tabs-tab-selected-color;
-
-    @include dx-tabs-border-mixin(bottom, $tabs-selected-tab-border-color);
-
-    &.dx-state-disabled {
-      @include dx-tabs-border-mixin(bottom, $tabs-disabled-tab-border-color);
-    }
-
-    .dx-icon {
-      color: $tabs-tab-icon-selected-color;
-    }
-  }
-
-  &.dx-state-focused {
-    background-color: $tabs-focused-tab-bg-color;
-  }
-
-
-  &.dx-state-disabled {
-    color: $tabs-tab-disabled-color;
-
-    .dx-icon {
-      color: $tabs-tab-icon-disabled-color;
-    }
-  }
-
-  &.dx-state-active,
-  &.dx-state-active .dx-inkripple-wave {
-    background-color: $tabs-active-tab-bg-color;
-  }
-
-  .dx-tab-text {
-    flex-direction: column;
-    text-transform: uppercase;
-    line-height: $fluent-tab-text-line-height;
-    font-weight: 500;
-  }
-
-  .dx-icon {
-    color: $tabs-tab-icon-color;
-
-    @include dx-icon-sizing($fluent-base-icon-size);
-  }
-}
-
-.dx-tabs {
-  padding: 0;
-  background-color: $tabs-tab-background;
-
-  .dx-inkripple {
-    overflow: hidden;
-  }
-
-  .dx-scrollable {
-    flex-basis: 100%;
-  }
-}
-
-.dx-tabs-nav-button {
-  border: none;
-  background-color: $tabs-tab-background;
-  height: $fluent-tab-height;
-  border-radius: 0;
-  box-shadow: none;
-
-  &.dx-button.dx-tabs-nav-button.dx-button-has-icon:not(.dx-button-has-text) {
-    @include dx-button-flat-color-styling(
-      $base-icon-color,
-      $fluent-tabs-nav-button-background,
-      $fluent-tabs-nav-button-background,
-      $fluent-tabs-nav-button-background,
-    );
-
-    border-radius: 0;
-
-    .dx-inkripple-wave {
-      background-color: $fluent-tabs-nav-button-background;
-    }
-  }
-
-  &.dx-button-has-icon .dx-icon {
-    width: $fluent-tab-nav-button-icon-width;
-    height: $fluent-tab-nav-button-icon-height;
-    font-size: $fluent-tab-nav-button-icon-font-size;
-  }
-  
-  &.dx-state-active {
-    border: none;
-  }
-
-  &.dx-state-disabled {
-    opacity: 1;
-    background-color: $tabs-tab-background;
-
-    .dx-button-content {
-      opacity: $tabs-tab-button-disabled-opacity;
-    }
-  }
-
-  .dx-button-content {
-    flex: unset;
-    padding: $fluent-tab-nav-button-content-padding;
-  }
-}
-
-.dx-tabs-vertical {
-  .dx-tab-selected {
-    @include dx-tabs-border-mixin(left, $tabs-selected-tab-border-color);
-
-    &.dx-state-disabled {
-      @include dx-tabs-border-mixin(left, $tabs-disabled-tab-border-color);
-    }
-  }
-
-  .dx-tab-text {
-    flex-direction: row;
-
-    .dx-icon {
-      @include dx-icon-margin($fluent-base-icon-margin-right);
-    }
-  }
-
-  .dx-tabs-nav-button {
-    padding: $fluent-tab-vertical-nav-button-content-padding;
-  }
-}
diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/navigation-button/_base.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/navigation-button/_base.scss
new file mode 100644
index 000000000000..e22dd395044a
--- /dev/null
+++ b/packages/devextreme/scss/widgets/fluent/tabs/layout/navigation-button/_base.scss
@@ -0,0 +1,68 @@
+@use "sass:color";
+@use "../../../colors" as *;
+@use "../../../sizes" as *;
+@use "../../../button/colors" as *;
+@use "../../../button/mixins" as *;
+@use "../../../../base/icons" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+
+// adduse
+@use "../../../scrollable";
+@use "../../../badge";
+
+
+.dx-tabs-nav-button {
+  border: none;
+  background-color: $tabs-tab-background;
+  height: $fluent-tab-height;
+  border-radius: 0;
+  box-shadow: none;
+
+  &.dx-button.dx-tabs-nav-button.dx-button-has-icon:not(.dx-button-has-text) {
+    @include dx-button-flat-color-styling(
+      $base-icon-color,
+      $fluent-tabs-nav-button-background,
+      $fluent-tabs-nav-button-background,
+      $fluent-tabs-nav-button-background,
+    );
+
+    border-radius: 0;
+
+    .dx-inkripple-wave {
+      background-color: $fluent-tabs-nav-button-background;
+    }
+  }
+
+  &.dx-button-has-icon .dx-icon {
+    width: $fluent-tab-nav-button-icon-width;
+    height: $fluent-tab-nav-button-icon-height;
+    font-size: $fluent-tab-nav-button-icon-font-size;
+  }
+  
+  &.dx-state-active {
+    border: none;
+  }
+
+  &.dx-state-disabled {
+    opacity: 1;
+    background-color: $tabs-tab-background;
+
+    .dx-button-content {
+      opacity: $tabs-tab-button-disabled-opacity;
+    }
+  }
+
+  .dx-button-content {
+    flex: unset;
+    padding: $fluent-tab-nav-button-content-padding;
+  }
+}
+
+.dx-tabs-vertical {
+  .dx-tabs-nav-button {
+    padding: $fluent-tab-vertical-nav-button-content-padding;
+  }
+}
diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss
new file mode 100644
index 000000000000..839a8aa03c57
--- /dev/null
+++ b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss
@@ -0,0 +1,74 @@
+@use "sass:color";
+@use "../../../colors" as *;
+@use "../../../sizes" as *;
+@use "../../../button/colors" as *;
+@use "../../../button/mixins" as *;
+@use "../../../../base/icons" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+
+// adduse
+@use "../../../scrollable";
+@use "../../../badge";
+@import "styling-mode/primary";
+@import "styling-mode/secondary";
+
+
+.dx-tab {
+  padding: $fluent-tabs-item-padding;
+  min-width: $fluent-tab-min-width;
+  background-color: $tabs-tab-background;
+  color: $tabs-tab-color;
+
+  &.dx-state-hover {
+    background-color: $tabs-hovered-tab-bg-color;
+  }
+
+  &.dx-tab-selected {
+    color: $tabs-tab-selected-color;
+
+    .dx-icon {
+      color: $tabs-tab-icon-selected-color;
+    }
+  }
+
+  &.dx-state-focused {
+    background-color: $tabs-focused-tab-bg-color;
+  }
+
+
+  &.dx-state-disabled {
+    color: $tabs-tab-disabled-color;
+
+    .dx-icon {
+      color: $tabs-tab-icon-disabled-color;
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-active .dx-inkripple-wave {
+    background-color: $tabs-active-tab-bg-color;
+  }
+
+  .dx-tab-text {
+    text-transform: uppercase;
+    line-height: $fluent-tab-text-line-height;
+    font-weight: 500;
+  }
+
+  .dx-icon {
+    color: $tabs-tab-icon-color;
+
+    @include dx-icon-sizing($fluent-base-icon-size);
+  }
+}
+
+.dx-tabs-icon-position-start .dx-tab .dx-icon {
+  @include dx-icon-margin($fluent-base-icon-margin, start);
+}
+
+.dx-tabs-icon-position-end .dx-tab .dx-icon {
+  @include dx-icon-margin($fluent-base-icon-margin, end);
+}
diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_primary.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_primary.scss
new file mode 100644
index 000000000000..da10094c2f88
--- /dev/null
+++ b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_primary.scss
@@ -0,0 +1,37 @@
+@use "sass:color";
+@use "../../../../colors" as *;
+@use "../../../../sizes" as *;
+@use "../../../../button/colors" as *;
+@use "../../../../button/mixins" as *;
+@use "../../../../../base/icons" as *;
+@use "../../../../../base/tabs";
+@use "../../../variables/colors" as *;
+@use "../../../variables/sizes" as *;
+@use "../../../mixins" as *;
+
+// adduse
+@use "../../../../scrollable";
+@use "../../../../badge";
+
+
+.dx-tabs-styling-mode-primary {
+  &:not(.dx-tabs-vertical) {
+    .dx-tab-selected {
+      @include dx-tabs-indicator-primary-mixin(bottom, $tabs-selected-tab-border-color);
+  
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-primary-mixin(bottom, $tabs-disabled-tab-border-color);
+      }
+    }
+  }
+
+  &.dx-tabs-vertical {
+    .dx-tab-selected {
+      @include dx-tabs-indicator-primary-mixin(right, $tabs-selected-tab-border-color);
+  
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-primary-mixin(right, $tabs-disabled-tab-border-color);
+      }
+    }
+  }
+}
diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_secondary.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_secondary.scss
new file mode 100644
index 000000000000..a139818fe8a6
--- /dev/null
+++ b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/styling-mode/_secondary.scss
@@ -0,0 +1,47 @@
+@use "sass:color";
+@use "../../../../colors" as *;
+@use "../../../../sizes" as *;
+@use "../../../../button/colors" as *;
+@use "../../../../button/mixins" as *;
+@use "../../../../../base/icons" as *;
+@use "../../../../../base/tabs";
+@use "../../../variables/colors" as *;
+@use "../../../variables/sizes" as *;
+@use "../../../mixins" as *;
+
+// adduse
+@use "../../../../scrollable";
+@use "../../../../badge";
+
+
+.dx-tabs-styling-mode-secondary {
+  .dx-tab .dx-tab-text {
+    text-transform: initial;
+  }
+
+  .dx-tab-content {
+    position: relative;
+  }
+}
+
+.dx-tabs-styling-mode-secondary:not(.dx-tabs-vertical) {
+  .dx-tab.dx-tab-selected .dx-tab-content {
+    @include dx-tabs-indicator-secondary-base-mixin(bottom, $tabs-selected-tab-border-color);
+  }
+
+  .dx-tab.dx-state-disabled .dx-tab-content {
+    @include dx-tabs-indicator-secondary-base-mixin(bottom, $tabs-disabled-tab-border-color);
+  }
+}
+
+.dx-tabs-vertical {
+  &.dx-tabs-styling-mode-secondary {
+    .dx-tab-selected {
+      @include dx-tabs-indicator-secondary-vertical-mixin(right, $tabs-selected-tab-border-color);
+    }
+
+    .dx-tab-selected.dx-state-disabled {
+      @include dx-tabs-indicator-secondary-vertical-mixin(right, $tabs-disabled-tab-border-color);
+    }
+  }
+}
diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss
new file mode 100644
index 000000000000..ff371a3f2c8e
--- /dev/null
+++ b/packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss
@@ -0,0 +1,28 @@
+@use "sass:color";
+@use "../../../colors" as *;
+@use "../../../sizes" as *;
+@use "../../../button/colors" as *;
+@use "../../../button/mixins" as *;
+@use "../../../../base/icons" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+
+// adduse
+@use "../../../scrollable";
+@use "../../../badge";
+
+
+.dx-tabs {
+  padding: 0;
+  background-color: $tabs-tab-background;
+
+  .dx-inkripple {
+    overflow: hidden;
+  }
+
+  .dx-scrollable {
+    flex-basis: 100%;
+  }
+}
diff --git a/packages/devextreme/scss/widgets/fluent/tabs/mixins/_index.scss b/packages/devextreme/scss/widgets/fluent/tabs/mixins/_index.scss
new file mode 100644
index 000000000000..b261e9695e1b
--- /dev/null
+++ b/packages/devextreme/scss/widgets/fluent/tabs/mixins/_index.scss
@@ -0,0 +1,89 @@
+@use "../variables/sizes" as *;
+
+// adduse
+
+
+@mixin dx-tabs-indicator-primary-mixin($position, $color) {
+  &::after {
+    content: "";
+    position: absolute;
+    background-color: $color;
+
+    @if $position == top {
+      top: 0;
+      right: 0;
+      left: 0;
+      width: $fluent-indicator-length-primary;
+      height: $fluent-indicator-thickness-primary;
+    } @else if $position == right {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      height: $fluent-indicator-length-primary;
+      width: $fluent-indicator-thickness-primary;
+    } @else if $position == bottom {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: $fluent-indicator-length-primary;
+      height: $fluent-indicator-thickness-primary;
+    } @else if $position == left {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      height: $fluent-indicator-length-primary;
+      width: $fluent-indicator-thickness-primary;
+    }
+  }
+}
+
+@mixin dx-tabs-indicator-secondary-base-mixin($position, $color) {
+  &::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    left: 0;
+    width: $fluent-indicator-length-secondary;
+    height: $fluent-indicator-thickness-secondary;
+    background-color: $color;
+
+    @if $position == top {
+      top: -$fluent-tabs-item-padding-horizontal;
+      border-bottom-right-radius: $fluent-indicator-border-radius-secondary;
+      border-bottom-left-radius: $fluent-indicator-border-radius-secondary;
+      border-top-right-radius: unset;
+      border-top-left-radius: unset;
+    } @else if $position == bottom {
+      bottom: -$fluent-tabs-item-padding-horizontal;
+      border-top-right-radius: $fluent-indicator-border-radius-secondary;
+      border-top-left-radius: $fluent-indicator-border-radius-secondary;
+      border-bottom-right-radius: unset;
+      border-bottom-left-radius: unset;
+    }
+  }
+}
+
+@mixin dx-tabs-indicator-secondary-vertical-mixin($position, $color) {
+  &::after {
+    content: "";
+    position: absolute;
+    top: $fluent-tabs-item-padding-horizontal;
+    width: $fluent-indicator-thickness-secondary;
+    height: calc($fluent-indicator-length-secondary - 2 * $fluent-tabs-item-padding-horizontal);
+    background-color: $color;
+
+    @if $position == right {
+      right: 0;
+      border-top-left-radius: $fluent-indicator-border-radius-secondary;
+      border-bottom-left-radius: $fluent-indicator-border-radius-secondary;
+      border-top-right-radius: unset;
+      border-bottom-right-radius: unset;
+    } @else if $position == left {
+      left: 0;
+      border-top-right-radius: $fluent-indicator-border-radius-secondary;
+      border-bottom-right-radius: $fluent-indicator-border-radius-secondary;
+      border-top-left-radius: unset;
+      border-bottom-left-radius: unset;
+    }
+  }
+}
diff --git a/packages/devextreme/scss/widgets/fluent/tabs/_colors.scss b/packages/devextreme/scss/widgets/fluent/tabs/variables/_colors.scss
similarity index 96%
rename from packages/devextreme/scss/widgets/fluent/tabs/_colors.scss
rename to packages/devextreme/scss/widgets/fluent/tabs/variables/_colors.scss
index 12f7a1d99558..5fd67f8484b4 100644
--- a/packages/devextreme/scss/widgets/fluent/tabs/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/tabs/variables/_colors.scss
@@ -1,6 +1,6 @@
 @use "sass:color";
-@use "../colors" as *;
-@use "../button/colors" as *;
+@use "../../colors" as *;
+@use "../../button/colors" as *;
 
 // adduse
 
diff --git a/packages/devextreme/scss/widgets/fluent/tabs/_sizes.scss b/packages/devextreme/scss/widgets/fluent/tabs/variables/_sizes.scss
similarity index 58%
rename from packages/devextreme/scss/widgets/fluent/tabs/_sizes.scss
rename to packages/devextreme/scss/widgets/fluent/tabs/variables/_sizes.scss
index eca0ba649b53..170dfd737ed2 100644
--- a/packages/devextreme/scss/widgets/fluent/tabs/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/tabs/variables/_sizes.scss
@@ -1,15 +1,16 @@
-@use "../sizes" as *;
+@use "../../sizes" as *;
 
 // adduse
 
 
 $fluent-tabs-item-padding: null !default;
+$fluent-tabs-item-padding-horizontal: null !default;
+$fluent-tabs-item-padding-vertical: null !default;
 $fluent-tab-height: null !default;
 $fluent-tab-min-width: null !default;
 
 $fluent-tab-text-line-height: null !default;
-$fluent-base-icon-margin-right: null !default;
-$fluent-base-icon-margin-bottom: null !default;
+$fluent-base-icon-margin: null !default;
 
 $fluent-tab-nav-button-icon-width: null !default;
 $fluent-tab-nav-button-icon-height: null !default;
@@ -18,12 +19,21 @@ $fluent-tab-nav-button-content-padding: null !default;
 
 $fluent-tab-vertical-nav-button-content-padding: null !default;
 
+$fluent-indicator-thickness-primary: 2px !default;
+$fluent-indicator-thickness-secondary: 3px !default;
+
+$fluent-indicator-length-primary: 100% !default;
+$fluent-indicator-length-secondary: 100% !default;
+
+$fluent-indicator-border-radius-secondary: 8px !default;
+
 @if $size == "default" {
-  $fluent-tabs-item-padding: 12px 16px !default;
+  $fluent-tabs-item-padding-horizontal: 12px !default;
+  $fluent-tabs-item-padding-vertical: 16px !default;
+  $fluent-tabs-item-padding: $fluent-tabs-item-padding-horizontal $fluent-tabs-item-padding-vertical !default;
   $fluent-tab-height: auto !default;
   $fluent-tab-min-width: 90px !default;
-  $fluent-base-icon-margin-right: 8px !default;
-  $fluent-base-icon-margin-bottom: 4px !default;
+  $fluent-base-icon-margin: 8px !default;
   $fluent-tab-text-line-height: 24px !default;
   $fluent-tab-nav-button-icon-width: 24px !default;
   $fluent-tab-nav-button-icon-height: 24px !default;
@@ -33,11 +43,12 @@ $fluent-tab-vertical-nav-button-content-padding: null !default;
 }
 
 @else if $size == "compact" {
-  $fluent-tabs-item-padding: 6px 12px !default;
+  $fluent-tabs-item-padding-horizontal: 6px !default;
+  $fluent-tabs-item-padding-vertical: 12px !default;
+  $fluent-tabs-item-padding: $fluent-tabs-item-padding-horizontal $fluent-tabs-item-padding-vertical !default;
   $fluent-tab-height: auto !default;
   $fluent-tab-min-width: 82px !default;
-  $fluent-base-icon-margin-right: 8px !default;
-  $fluent-base-icon-margin-bottom: 4px !default;
+  $fluent-base-icon-margin: 8px !default;
   $fluent-tab-text-line-height: 24px !default;
   $fluent-tab-nav-button-icon-width: 24px !default;
   $fluent-tab-nav-button-icon-height: 24px !default;