diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss
index 3aaa5450378..5f62ca3bcaa 100644
--- a/packages/default/scss/tabstrip/_layout.scss
+++ b/packages/default/scss/tabstrip/_layout.scss
@@ -43,7 +43,8 @@
         outline: 0;
         display: flex;
         flex-flow: row wrap;
-        flex: 0 0 auto;
+        flex: 1 1 auto;
+        gap: $tabstrip-item-gap;
 
         *,
         *::before,
@@ -86,6 +87,7 @@
 
     .k-tabstrip-content,
     .k-tabstrip > .k-content {
+        margin: 0 !important; // sass-lint:disable-line no-important
         padding: $tabstrip-content-padding-y $tabstrip-content-padding-x;
         box-sizing: border-box;
         border-width: $tabstrip-content-border-width;
@@ -137,7 +139,6 @@
         > .k-tabstrip-items-wrapper {
 
             > .k-tabstrip-items {
-                flex: 1 1 auto;
                 flex-wrap: nowrap;
                 white-space: nowrap;
                 overflow: hidden;
@@ -175,21 +176,12 @@
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
             border-bottom-width: $tabstrip-border-width;
-            margin-bottom: -$tabstrip-content-border-width;
-
-            > .k-tabstrip-items {
-                width: 100%;
-            }
 
             .k-item {
                 @include border-top-radius( $tabstrip-item-border-radius );
                 margin-bottom: -$tabstrip-border-width;
             }
 
-            .k-item + .k-item {
-                margin-left: $tabstrip-item-gap;
-            }
-
             .k-item.k-active {
                 border-bottom-color: transparent;
             }
@@ -198,27 +190,18 @@
         > .k-content,
         > .k-tabstrip-content {
             @include border-bottom-radius( $tabstrip-item-border-radius );
-            border-top-color: transparent !important; // sass-lint:disable-line no-important
+            border-top-width: 0 !important; // sass-lint:disable-line no-important
         }
     }
     .k-tabstrip-bottom {
         > .k-tabstrip-items-wrapper {
             border-top-width: $tabstrip-border-width;
-            margin-top: -$tabstrip-content-border-width;
-
-            > .k-tabstrip-items {
-                width: 100%;
-            }
 
             .k-item {
                 @include border-bottom-radius( $tabstrip-item-border-radius );
                 margin-top: -$tabstrip-border-width;
             }
 
-            .k-item + .k-item {
-                margin-left: $tabstrip-item-gap;
-            }
-
             .k-item.k-active {
                 border-top-color: transparent;
             }
@@ -227,7 +210,7 @@
         > .k-content,
         > .k-tabstrip-content {
             @include border-top-radius( $tabstrip-item-border-radius );
-            border-bottom-color: transparent !important; // sass-lint:disable-line no-important
+            border-bottom-width: 0 !important; // sass-lint:disable-line no-important
         }
     }
     .k-tabstrip-left {
@@ -235,11 +218,8 @@
 
         > .k-tabstrip-items-wrapper {
             border-right-width: $tabstrip-border-width;
-            margin-right: -$tabstrip-content-border-width;
 
             > .k-tabstrip-items {
-                height: 100%;
-                display: inline-flex;
                 flex-direction: column;
             }
 
@@ -248,10 +228,6 @@
                 margin-right: -$tabstrip-border-width;
             }
 
-            .k-item + .k-item {
-                margin-top: $tabstrip-item-gap;
-            }
-
             .k-item.k-active {
                 border-right-color: transparent;
             }
@@ -260,8 +236,7 @@
         > .k-content,
         > .k-tabstrip-content {
             @include border-right-radius( $tabstrip-item-border-radius );
-            margin: 0 !important; // sass-lint:disable-line no-important
-            border-left-color: transparent !important; // sass-lint:disable-line no-important
+            border-left-width: 0 !important; // sass-lint:disable-line no-important
         }
 
     }
@@ -270,11 +245,8 @@
 
         > .k-tabstrip-items-wrapper {
             border-left-width: $tabstrip-border-width;
-            margin-left: -$tabstrip-content-border-width;
 
             > .k-tabstrip-items {
-                height: 100%;
-                display: inline-flex;
                 flex-direction: column;
             }
 
@@ -283,10 +255,6 @@
                 margin-left: -$tabstrip-border-width;
             }
 
-            .k-item + .k-item {
-                margin-top: $tabstrip-item-gap;
-            }
-
             .k-item.k-active {
                 border-left-color: transparent;
             }
@@ -295,8 +263,7 @@
         > .k-content,
         > .k-tabstrip-content {
             @include border-left-radius( $tabstrip-item-border-radius );
-            margin: 0 !important; // sass-lint:disable-line no-important
-            border-right-color: transparent !important; // sass-lint:disable-line no-important
+            border-right-width: 0;
         }
     }
 
diff --git a/packages/fluent/scss/tabstrip/_layout.scss b/packages/fluent/scss/tabstrip/_layout.scss
index 36dfccdd3b9..2954a3e6669 100644
--- a/packages/fluent/scss/tabstrip/_layout.scss
+++ b/packages/fluent/scss/tabstrip/_layout.scss
@@ -47,7 +47,8 @@
         outline: 0;
         display: flex;
         flex-flow: row wrap;
-        flex: 0 0 auto;
+        flex: 1 1 auto;
+        gap: $kendo-tabstrip-item-gap;
 
         *,
         *::before,
@@ -67,16 +68,11 @@
             justify-items: stretch;
             outline: 0;
 
-            &::before {
-                content: "";
-                border-style: solid;
-                border-color: var( --kendo-tabstrip-item-ripple-border, #{$kendo-tabstrip-item-ripple-border} );
-                display: block;
-                position: absolute;
-                z-index: 2;
-                opacity: 0;
-                transition: opacity .3s, transform .3s;
-                pointer-events: none;
+            // Active state
+            &:active,
+            &.k-active,
+            &.k-selected {
+                font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
             }
         }
 
@@ -97,12 +93,10 @@
             align-items: center;
         }
     }
-    .k-ie11 .k-tabstrip-items {
-        white-space: nowrap;
-    }
 
     .k-tabstrip-content,
     .k-tabstrip > .k-content {
+        margin: 0 !important; // sass-lint:disable-line no-important
         padding-inline: var( --kendo-tabstrip-content-padding-x, #{$kendo-tabstrip-content-padding-x} ) ;
         padding-block: var( --kendo-tabstrip-content-padding-y, #{$kendo-tabstrip-content-padding-y} ) ;
         box-sizing: border-box;
@@ -149,7 +143,6 @@
         > .k-tabstrip-items-wrapper {
 
             > .k-tabstrip-items {
-                flex: 1 1 auto;
                 flex-wrap: nowrap;
                 white-space: nowrap;
                 overflow: hidden;
@@ -187,36 +180,9 @@
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
             border-bottom-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
-            margin-block-end: calc( var( --kendo-tabstrip-content-border-width, #{$kendo-tabstrip-content-border-width} ) * -1 );
-
-            > .k-tabstrip-items {
-                width: 100%;
-            }
 
             .k-item {
                 margin-block-end: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-
-                &::before {
-                    width: 100%;
-                    border-width: 0 0 var( --kendo-tabstrip-item-ripple-border-width, #{$kendo-tabstrip-item-ripple-border-width} ) 0;
-                    inset-block-end: 0;
-                    transform: scaleX(0);
-                }
-
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
-
-                    &::before {
-                        opacity: 1;
-                        transform: scaleX(1);
-                    }
-                }
-            }
-
-            .k-item + .k-item {
-                margin-inline-start: var( --kendo-tabstrip-item-gap, #{$kendo-tabstrip-item-gap} );
             }
 
         }
@@ -224,38 +190,9 @@
     .k-tabstrip-bottom {
         > .k-tabstrip-items-wrapper {
             border-top-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
-            margin-block-start: calc( var( --kendo-tabstrip-content-border-width, #{$kendo-tabstrip-content-border-width} ) * -1 );
-
-            > .k-tabstrip-items {
-                width: 100%;
-            }
 
             .k-item {
                 margin-block-start: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-
-                &::before {
-                    width: 100%;
-                    border-width: var( --kendo-tabstrip-item-ripple-border-width, #{$kendo-tabstrip-item-ripple-border-width} ) 0 0 0;
-                    inset-block-start: 0;
-                    transform: scaleX(0);
-                }
-
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
-
-                    &::before {
-                        opacity: 1;
-                        transform: scaleX(1);
-                    }
-
-                }
-
-            }
-
-            .k-item + .k-item {
-                margin-inline-start: var( --kendo-tabstrip-item-gap, #{$kendo-tabstrip-item-gap} );
             }
 
         }
@@ -265,102 +202,31 @@
 
         > .k-tabstrip-items-wrapper {
             border-right-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
-            margin-inline-end: calc( var( --kendo-tabstrip-content-border-width, #{$kendo-tabstrip-content-border-width} ) * -1 );
 
             > .k-tabstrip-items {
-                height: 100%;
-                display: inline-flex;
                 flex-direction: column;
             }
 
             .k-item {
                 margin-inline-end: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-
-                &::before {
-                    height: 100%;
-                    border-width: 0 var( --kendo-tabstrip-item-ripple-border-width, #{$kendo-tabstrip-item-ripple-border-width} ) 0 0;
-                    inset-inline-end: 0;
-                    transform: scaleY(0);
-                }
-
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
-
-                    &::before {
-                        opacity: 1;
-                        transform: scaleY(1);
-                    }
-
-                }
-
-            }
-
-            .k-item + .k-item {
-                margin-block-start: var( --kendo-tabstrip-item-gap, #{$kendo-tabstrip-item-gap} );
             }
         }
 
-        > .k-content,
-        > .k-tabstrip-content {
-            margin: 0 !important; // sass-lint:disable-line no-important
-        }
-
     }
     .k-tabstrip-right {
         flex-direction: row-reverse;
 
         > .k-tabstrip-items-wrapper {
             border-left-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
-            margin-inline-start: calc( var( --kendo-tabstrip-content-border-width, #{$kendo-tabstrip-content-border-width} ) * -1 );
 
             > .k-tabstrip-items {
-                height: 100%;
-                display: inline-flex;
                 flex-direction: column;
             }
 
             .k-item {
                 margin-inline-start: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-
-                &::before {
-                    height: 100%;
-                    border-width: 0 0 0 var( --kendo-tabstrip-item-ripple-border-width, #{$kendo-tabstrip-item-ripple-border-width} );
-                    inset-inline-start: 0;
-                    transform: scaleY(0);
-                }
-
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
-
-                    &::before {
-                        opacity: 1;
-                        transform: scaleY(1);
-                    }
-
-                }
-
-            }
-
-            .k-item + .k-item {
-                margin-block-start: var( --kendo-tabstrip-item-gap, #{$kendo-tabstrip-item-gap} );
             }
         }
-
-        > .k-content,
-        > .k-tabstrip-content {
-            margin: 0 !important; // sass-lint:disable-line no-important
-        }
-    }
-
-    // Hide tabstrip ripple when dragging
-    .k-tabstrip-items-wrapper .k-item.k-tabstrip-dragging {
-        &::before {
-            display: none !important; // sass-lint:disable-line no-important
-        }
     }
 
     // Selected indicator
@@ -372,13 +238,17 @@
                 content: "";
                 border-width: 0;
                 border-style: solid;
-                display: none;
+                display: block;
                 position: absolute;
                 z-index: 0;
                 top: 0;
                 right: 0;
                 bottom: 0;
                 left: 0;
+                opacity: 0;
+                transform: scaleY(0);
+                pointer-events: none;
+                transition: opacity .3s, transform .3s;
 
                 // Variants
                 .k-tabstrip-top > & {
@@ -394,8 +264,11 @@
                     border-left-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
                 }
             }
-            .k-item.k-active::after {
-                display: block;
+            .k-item:active::after,
+            .k-item.k-active::after,
+            .k-item.k-selected::after {
+                opacity: 1;
+                transform: scaleY(1);
             }
 
             .k-item > .k-link {
@@ -403,6 +276,13 @@
             }
         }
 
+        // Hide tabstrip indicator when dragging
+        .k-tabstrip-items-wrapper .k-item.k-tabstrip-dragging {
+            &::after {
+                display: none !important; // sass-lint:disable-line no-important
+            }
+        }
+
     }
 
     .k-rtl .k-tabstrip,
diff --git a/packages/fluent/scss/tabstrip/_variables.scss b/packages/fluent/scss/tabstrip/_variables.scss
index 241f433690d..d9ba8c67826 100644
--- a/packages/fluent/scss/tabstrip/_variables.scss
+++ b/packages/fluent/scss/tabstrip/_variables.scss
@@ -51,12 +51,6 @@ $kendo-tabstrip-item-padding-y: map-get( $kendo-spacing, 2 ) + map-get( $kendo-s
 /// The width of the border around the tabstrip item
 /// @group tabstrip
 $kendo-tabstrip-item-border-width: 0px !default;
-/// The border width of the tabstrip ripple
-/// @group tabstrip
-$kendo-tabstrip-item-ripple-border-width: map-get( $kendo-spacing, thin ) !default;
-/// The border color of the tabstrip ripple
-/// @group tabstrip
-$kendo-tabstrip-item-ripple-border: get-theme-color-var( primary-100 ) !default;
 /// The border radius of the tabstrip item
 /// @group tabstrip
 $kendo-tabstrip-item-border-radius: var( --kendo-border-radius-md, 0 ) !default;
@@ -111,8 +105,12 @@ $kendo-tabstrip-item-focused-shadow: $kendo-list-item-focus-shadow !default;
 $kendo-tabstrip-item-dragging-text: get-theme-color-var( primary-100 ) !default;
 
 // Indicator
-$kendo-tabstrip-indicator-size: null !default;
-$kendo-tabstrip-indicator-color: null !default;
+/// The border width of the tabstrip indicator
+/// @group tabstrip
+$kendo-tabstrip-indicator-size: map-get( $kendo-spacing, thin ) !default;
+/// The border color of the tabstrip ripple
+/// @group tabstrip
+$kendo-tabstrip-indicator-color: get-theme-color-var( primary-100 ) !default;
 
 /// The horizontal padding of tabstrip content
 /// @group tabstrip