@syncfusion/blazor-themes 20.3.60 → 20.4.38

package/SCSS-Themes/navigations/tab/material-dark.scss

@@ -123,7 +123,6 @@ $tab-ripple-bg-color: rgba($accent, .12) !default;
 $tab-fill-ripple-bg-color: rgba($grey-black, .05) !default;
 $tab-alt-ripple-bg-color: rgba($grey-black, .1) !default;
 $tab-item-border: none !default;
-$tab-alt-item-border: 0 !default;
 $tab-active-item-border: none !default;
 $tab-active-item-border-bottom: initial !default;
 $tab-active-item-border-color: inherit !default;
@@ -158,8 +157,6 @@ $tab-big-io-wrap-padding: 0 24px !default;
 $tab-nrml-io-wrap-padding: 0 18px !default;
 $tab-wrap-focus-margin-right: 0 !default;
 $tab-wrap-focus-margin-left: 0 !default;
-$tab-big-ileft-active-text-wrap-padding: 0 !default;
-$tab-nrml-ileft-active-text-wrap-padding: 0 !default;
 $tab-big-even-ileft-active-text-wrap-margin: 0 !default;
 $tab-nrml-even-ileft-active-text-wrap-margin: 0 !default;
 $tab-big-fill-tb-wrap-height: 50px !default;
@@ -207,14 +204,11 @@ $tab-rtl-nrml-text-container-margin-right: 0 !default;
 $tab-rtl-big-text-container-margin-left: 22px !default;
 $tab-rtl-nrml-text-container-margin-left: 20px !default;
 $tab-big-active-text-container-height: 48px !default;
-$tab-nrml-active-text-container-height: 36px !default;
 $tab-big-active-it-text-container-height: 48px !default;
-$tab-nrml-active-it-text-container-height: 36px !default;
 $tab-fill-big-active-it-text-container-height: 46px !default;
 $tab-fill-nrml-active-it-text-container-height: 36px !default;
 $tab-big-even-active-text-container-height: 48px !default;
 $tab-nrml-even-active-text-container-height: 36px !default;
-$tab-even-active-text-container-padding: 0 !default;
 $tab-even-active-text-container-margin: 0 !default;
 
 $tab-big-font-size: 14px !default;
@@ -278,8 +272,6 @@ $tab-big-nav-icon-top: 2px !default;
 $tab-nrml-nav-icon-top: 2px !default;
 $tab-big-nav-pop-icon-top: 5px !default;
 $tab-nrml-nav-pop-icon-top: 5px !default;
-$tab-big-hover-nav-pop-icon-top: 0 !default;
-$tab-nrml-hover-nav-pop-icon-top: 0 !default;
 $tab-big-safari-nav-icon-top: 4px !default;
 $tab-nrml-safari-nav-icon-top: 4px !default;
 $tab-big-safari-pop-icon-top: 6px !default;
@@ -319,7 +311,6 @@ $tab-rtl-nrml-close-icon-top-bottom-left: 18px !default;
 $tab-rtl-big-pop-close-icon-top-bottom-left: 18px !default;
 $tab-rtl-nrml-pop-close-icon-top-bottom-left: 18px !default;
 $tab-pop-close-icon-right: 16px !default;
-$tab-pop-close-icon-top: 0 !default;
 $tab-rtl-pop-close-icon-left: 16px !default;
 $tab-mob-close-icon-top-bottom-right: 12px !default;
 $tab-rtl-mob-close-icon-top-bottom-left: 12px !default;
@@ -383,6 +374,272 @@ $tab-pop-down-icon-transform: rotate(0deg) !default;
 $tab-alt-wrap-hover-close-icon-focus-or-active-color: $primary-font !default;
 $tab-content-font-color: rgba($grey-dark-font, .7) !default;
 
+$tab-bgr-active-last-margin: 0 !default;
+$tab-bgr-hscroll-items-nav-width: 50px !default;
+$tab-bgr-item-textwrap-height: $tab-big-height !default;
+$tab-bgr-active-icon-top: 0 !default;
+$tab-bgr-icon-line-height: 1 !default;
+$tab-bgr-mob-item-iconright-margin: 0 !default;
+$tab-bgr-pop-item-textwrap-height: $tab-big-pop-item-height !default;
+$tab-bgr-scroll-nav-arrow-before-top: 0 !default;
+$tab-bgr-hor-pop-lineheight: 24px !default;
+$tab-bgr-hor-pop-hover-top: 0 !default;
+$tab-bgr-hor-focus-pop-hover-top: 0 !default;
+$tab-bgr-bottom-active-close-top: 0 !default;
+$tab-bgr-bottom-active-itop-close-top: 0 !default;
+$tab-bgr-bottom-active-text-padding-top: 0 !default;
+$tab-bgr-bottom-active-last-close-top: 0 !default;
+$tab-bgr-vertical-icon-min-height: 38px !default;
+$tab-bgr-vertical-icon-min-width: auto !default;
+$tab-bgr-rtl-bottom-item-margin: 0 !default;
+$tab-bgr-rtl-bottom-active-margin: 0 !default;
+$tab-bgr-fill-first-last-padding: 0 !default;
+$tab-bgr-fill-item-textwrap-height: $tab-big-fill-height !default;
+$tab-bgr-fill-active-ileft-textwrap-height: 46px !default;
+$tab-bgr-fill-focused-wrap-height: $tab-focus-big-fill-height !default;
+$tab-bgr-rtl-icon-right-margin: 0 !default;
+$tab-bgr-background-active-padding: $tab-alt-big-active-item-padding !default;
+$tab-bgr-fill-active-item-padding: 0 !default;
+$tab-bgr-item-text-margin-bottom: 0 !default;
+
+$tab-nrml-hscroll-items-nav-width: 40px !default;
+$tab-nrml-hscroll-items-bdr-radius: 0 !default;
+$tab-nrml-item-text-wrap-height: $tab-nrml-height !default;
+$tab-nrml-item-tabicon-line-height: 1 !default;
+$tab-nrml-pop-item-textwrap-height: $tab-nrml-pop-item-height !default;
+$tab-nrml-scroll-nav-arrow-before-top: 0 !default;
+$tab-nrml-hor-pop-lineheight: 24px !default;
+$tab-nrml-mob-hor-pop-lineheight: 24px !default;
+$tab-nrml-hor-focus-pop-lineheight: 24px !default;
+$tab-nrml-hor-focus-pop-hover-top: 0 !default;
+$tab-nrml-vertical-icon-min-height: 36px !default;
+$tab-nrml-vertical-icon-min-width: 33px !default;
+$tab-nrml-vertical-tabicon-margin: 0 !default;
+$tab-nrml-vertical-rtl-active-margin: 0 !default;
+$tab-nrml-fill-item-textwrap-height: $tab-nrml-fill-height !default;
+$tab-nrml-fill-focused-wrap-height: $tab-focus-nrml-fill-height !default;
+$tab-nrml-rtl-icon-right-margin: 0 !default;
+$tab-nrml-hdr-before-display: unset !default;
+$tab-nrml-item-active-position: unset !default;
+$tab-nrml-item-active-hover-before-left: unset !default;
+$tab-nrml-item-active-hover-before-right: unset !default;
+$tab-nrml-item-active-before-bg-font: unset !default;
+$tab-nrml-item-active-before-bottom: unset !default;
+$tab-nrml-item-active-before-content: unset !default;
+$tab-nrml-item-active-before-height: unset !default;
+$tab-nrml-item-active-before-left: unset !default;
+$tab-nrml-item-active-before-position: unset !default;
+$tab-nrml-item-active-before-transition: unset !default;
+$tab-nrml-item-active-after-font: unset !default;
+$tab-nrml-item-active-after-content: unset !default;
+$tab-nrml-item-active-after-display: unset !default;
+$tab-nrml-item-active-after-font-weight: unset !default;
+$tab-nrml-item-active-after-height: unset !default;
+$tab-nrml-item-active-after-overflow: unset !default;
+$tab-nrml-hscroll-bar-padding: 0 !default;
+$tab-nrml-vertical-indicator-bdr-radius: 0 !default;
+$tab-nrml-indicator-transition: left .125s cubic-bezier(.35, 0, .25, 1), right .25s cubic-bezier(.35, 0, .25, 1) !default;
+$tab-nrml-active-item-tabicon-before-top: 0 !default;
+$tab-nrml-bottom-active-before-top: unset !default;
+$tab-nrml-vertical-indicator-transition: top .125s cubic-bezier(.35, 0, .25, 1), bottom .25s cubic-bezier(.35, 0, .25, 1) !default;
+$tab-nrml-vertical-hover-before-height: unset !default;
+$tab-nrml-vertical-before-bottom: unset !default;
+$tab-nrml-vertical-before-height: unset !default;
+$tab-nrml-vertical-before-left: unset !default;
+$tab-nrml-vertical-before-transition: unset !default;
+$tab-nrml-vertical-text-position: unset !default;
+$tab-nrml-vertical-wrap-before-content: unset !default;
+$tab-nrml-vertical-wrap-before-display: unset !default;
+$tab-nrml-vertical-wrap-before-position: unset !default;
+$tab-nrml-vertical-wrap-before-top: unset !default;
+$tab-nrml-vertical-wrap-before-width: unset !default;
+$tab-nrml-vertical-wrap-before-border: unset !default;
+$tab-nrml-vertical-indicator-width: 2px !default;
+$tab-nrml-bottom-wrap-before-top: unset !default;
+$tab-nrml-background-vertical-indicator-display: block !default;
+$tab-nrml-background-active-padding: $tab-alt-nrml-active-item-padding !default;
+$tab-nrml-item-text-margin-bottom: 0 !default;
+
+$tab-header-font-weight: normal !default;
+$tab-header-before-border-color: unset !default;
+$tab-header-before-border-width: 0 !default;
+$tab-header-border-bottom: $tab-hdr-border !default;
+$tab-item-hover-bg: inherit !default;
+$tab-item-wrap-border: 0 !default;
+$tab-clone-item-wrap-border: 0 !default;
+$tab-item-wrap-hover-border: 0 !default;
+$tab-item-wrap-hover-border-radius: 0 !default;
+$tab-item-active-wrap-border: 0 !default;
+$tab-active-wrap-position: unset !default;
+$tab-active-wrap-before-border: unset !default;
+$tab-active-wrap-before-content: unset !default;
+$tab-active-wrap-before-display: unset !default;
+$tab-active-wrap-before-position: unset !default;
+$tab-active-wrap-before-top: unset !default;
+$tab-active-wrap-before-width: unset !default;
+$tab-focused-wrap-focus-border: 0 !default;
+$tab-focused-wrap-focus-icon-color: $tab-focus-text-color !default;
+$tab-content-line-height: 18px !default;
+$tab-content-font-size: 12px !default;
+$tab-item-active-tabwrap-border: 0 !default;
+$tab-item-left-icon-before-top: 1px !default;
+$tab-item-icon-before-top: 1px !default;
+$tab-item-icon-before-left: 2px !default;
+$tab-item-active-border-bottom: initial !default;
+
+$tab-pop-wrap-hover-border: 0 !default;
+$tab-pop-wrap-hover-border-radius: 0 !default;
+$tab-pop-wrap-hover-close-color: $tab-hover-text-color !default;
+$tab-pop-wrap-active-border-color: unset !default;
+$tab-pop-wrap-active-icon-font: $tab-pop-text-color !default;
+$tab-pop-icon-border: 0 !default;
+$tab-pop-focus-icon-active-bg: $tab-pop-icon-hover-bg-color !default;
+$tab-pop-focus-icon-active-color: $tab-nav-focus-icon-color !default;
+$tab-pop-focus-bg: transparent !default;
+$tab-pop-hover-bg: transparent !default;
+$tab-pop-nav-active-bg: inherit !default;
+$tab-pop-nav-active-border: 0 !default;
+$tab-pop-nav-active-border-radius: 0 4px 4px 0 !default;
+$tab-pop-active-icons-color: $grey-dark-font !default;
+
+$tab-scroll-nav-bg: inherit !default;
+$tab-scroll-nav-arrow-font: $tab-nav-icon-color !default;
+$tab-scroll-arrow-hover-border: $tab-item-active-wrap-border !default;
+$tab-scroll-arrow-active-border: $tab-item-active-wrap-border !default;
+$tab-scroll-focus-arrow-border: $tab-item-active-wrap-border !default;
+$tab-scroll-focus-arrow-active-bg: $tab-nav-focus-bg-color !default;
+$tab-scroll-focus-arrow-active-border-color: unset !default;
+$tab-scroll-focus-arrow-active-color: $tab-nav-focus-icon-color !default;
+$tab-scroll-active-border: 0 !default;
+$tab-scroll-overlay-arrow-color: $tab-disable-nav-icon-color !default;
+$tab-scroll-overlay-arrow-hover-color: $tab-disable-nav-icon-color !default;
+$tab-scroll-overlay-arrow-hover-bg: $tab-hover-nav-bg-color !default;
+$tab-scroll-overlay-arrow-hover-border-color: unset !default;
+$tab-scroll-focused-nav-focus-icon-bg: $tab-nav-focus-bg-color !default;
+$tab-scroll-focused-nav-focus-icon-border: $tab-pop-up-icon-focus-border !default;
+
+$tab-bottom-border-color: unset !default;
+$tab-bottom-border-width: 0 !default;
+$tab-bottom-hidden-items-border-color: unset !default;
+$tab-bottom-hidden-items-border-width: 0 !default;
+$tab-bottom-active-border-color: $tab-active-item-border-color unset unset !default;
+$tab-bottom-active-border-width: 0 !default;
+$tab-bottom-active-margin-top: 0 !default;
+
+$tab-vertical-scroll-hover-border-color: $tab-vscroll-nav-border-color transparent transparent !default;
+$tab-vertical-scroll-hover-active-bg: $tab-v-nav-focus-bg-color !default;
+$tab-vertical-focus-active-arrow-color: none !default;
+$tab-vertical-pop-icon-hover-color: $tab-hover-nav-icon-color !default;
+$tab-vertical-pop-icon-active-color: $tab-nav-focus-icon-color !default;
+$tab-vertical-focused-nav-focus-border-color: $tab-vertical-scroll-hover-border-color !default;
+$tab-vertical-before-border-width: 0 !default;
+
+$tab-fill-wrap-hover-icon-color: $tab-hover-text-color !default;
+$tab-fill-active-tabwrap-border-color: unset !default;
+$tab-fill-active-text-before-border: unset !default;
+$tab-fill-active-close-hover-color: $tab-alt-active-hover-close-icon-color !default;
+$tab-fill-pop-active-icon-color: $tab-pop-text-color !default;
+$tab-fill-pop-wrap-hover-bg: $tab-hover-bg-color !default;
+$tab-fill-pop-wrap-hover-text-color: $tab-hover-text-color !default;
+$tab-fill-pop-wrap-hover-icon-color: $tab-hover-text-color !default;
+$tab-fill-pop-wrap-hover-close-color: $tab-hover-text-color !default;
+$tab-fill-focused-active-tabwrap-focus-border-color: unset !default;
+$tab-fill-focused-active-wrap-focus-text-color: $tab-alt-active-style-hover-icon-color !default;
+$tab-fill-focused-active-wrap-focus-close-color: $tab-hover-text-color !default;
+
+$tab-background-indicator-bottom: 0 !default;
+$tab-background-wrap-border-color: unset !default;
+$tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;
+$tab-background-pop-icon-hover-bg: $tab-bg-hover-nav-bg-color !default;
+$tab-background-pop-icon-hover-border-color: unset !default;
+$tab-background-focused-active-wrap-focus-bg: $tab-key-alt-active-focus-bg-color !default;
+$tab-background-focused-active-wrap-focus-border-color: unset !default;
+$tab-background-wrap-hover-text-color: $tab-alt-active-text-color !default;
+$tab-background-wrap-hover-icon-color: $tab-alt-active-text-color !default;
+$tab-background-wrap-hover-close-color: $tab-alt-text-color !default;
+$tab-background-close-hover-active-color: $tab-alt-wrap-hover-close-icon-focus-or-active-color !default;
+$tab-background-wrap-hover-bg-color: $tab-bg-item-wrap-hover-bg-color !default;
+$tab-background-wrap-hover-border-color: unset !default;
+$tab-background-active-bg: inherit !default;
+$tab-background-active-text-color: $tab-alt-active-text-color !default;
+$tab-background-active-icon-color: $tab-alt-active-text-color !default;
+$tab-background-active-close-color: $tab-alt-active-close-icon-color !default;
+$tab-background-active-wrap-bg: $tab-alt-active-bg-color !default;
+$tab-background-active-wrap-border-color: unset !default;
+$tab-background-active-wrap-border-radius: $tab-active-item-border-radius !default;
+$tab-background-active-wrap-border-width: 0 !default;
+$tab-background-active-hover-text-color: $tab-alt-active-text-color !default;
+$tab-background-active-hover-icon-color: $tab-alt-active-text-color !default;
+$tab-background-active-hover-close-color: $tab-alt-active-close-icon-color !default;
+$tab-background-active-hover-bg: $tab-background-active-wrap-bg !default;
+$tab-background-active-hover-border-color: $tab-background-active-wrap-border-color !default;
+$tab-background-active-close-hover-color: $tab-background-close-hover-active-color !default;
+$tab-background-activeitem-close-active-color: $tab-background-close-hover-active-color !default;
+$tab-background-active-wrap-focus-bg: $tab-alt-active-focus-bg-color !default;
+$tab-background-active-wrap-focus-text-color: $tab-alt-active-text-color !default;
+$tab-background-active-wrap-focus-icon: $tab-alt-active-text-color !default;
+$tab-background-active-wrap-focushover-text-color: $tab-background-active-wrap-focus-icon !default;
+$tab-background-active-wrap-focushover-close-color: $tab-alt-active-close-icon-color !default;
+$tab-background-active-text-icon-color: $tab-alt-active-text-color !default;
+$tab-background-active-close-icon-color: $tab-alt-active-close-icon-color !default;
+$tab-background-active-close-text-hover-color: $tab-alt-active-hover-close-icon-color !default;
+$tab-background-pop-text-color: $tab-alt-text-color !default;
+$tab-background-pop-wrap-hover-bg: $tab-alt-hover-bg-color !default;
+$tab-background-pop-wrap-hover-text-color: $tab-alt-active-text-color !default;
+$tab-background-pop-wrap-active-text-color: $tab-background-pop-text-color !default;
+$tab-background-pop-wrap-active-icon-color: $tab-background-pop-text-color !default;
+$tab-background-pop-wrap-active-close-color: $tab-background-pop-text-color !default;
+$tab-background-scroll-bg: inherit !default;
+$tab-background-scroll-arrow-border: 0 !default;
+$tab-background-scroll-arrow-hover-bg: $tab-bg-hover-nav-bg-color !default;
+$tab-background-scroll-arrow-hover-border-color: unset !default;
+$tab-background-scroll-arrow-active-bg: unset !default;
+$tab-background-scroll-arrow-active-color: $tab-alt-nav-icon-color !default;
+$tab-background-scroll-focus-arrow-border: 0 !default;
+$tab-background-scroll-focus-arrow-bg: $tab-nav-focus-bg-color !default;
+$tab-background-nav-focus-active-bg: $tab-nav-focus-bg-color !default;
+$tab-background-nav-focus-active-border-color: unset !default;
+$tab-background-nav-focus-active-color: $tab-bg-hover-nav-icon-color !default;
+$tab-background-hor-nav-bg: transparent !default;
+$tab-background-pop-icon-color: $tab-alt-nav-icon-color !default;
+$tab-background-pop-icon-border: 0 !default;
+$tab-background-pop-active-hover-bg: $tab-background-pop-icon-hover-bg !default;
+$tab-background-pop-active-hover-color: $tab-bg-hover-nav-icon-color !default;
+$tab-background-focus-pop-bg: $tab-nav-focus-bg-color !default;
+$tab-background-focus-pop-border: $tab-pop-up-icon-focus-border !default;
+$tab-background-focus-pop-hover-bg: $tab-background-pop-icon-hover-bg !default;
+$tab-background-focused-wrap-focus-bg: $tab-alt-hover-bg-color !default;
+$tab-background-focused-wrap-focus-border-color: unset !default;
+$tab-background-popicon-focus-active-bg: $tab-pop-focus-icon-active-bg !default;
+$tab-background-popicon-focus-active-border-color: unset !default;
+$tab-background-popicon-focus-active-color: $tab-bg-hover-nav-icon-color !default;
+$tab-background-bottom-active-wrap-border-color: unset !default;
+$tab-background-bottom-active-wrap-border-radius: 0 !default;
+$tab-background-bottom-active-wrap-border-width: 0 !default;
+$tab-background-vertical-left-active-border-color: unset !default;
+$tab-background-vertical-left-active-border-width: 0 !default;
+$tab-background-vertical-left-active-wrap-border-radius: 0 !default;
+$tab-background-vertical-left-active-wrap-border-width: 0 !default;
+$tab-background-vertical-right-active-border-width: 0 !default;
+$tab-background-vertical-right-active-wrap-border-radius: 0 !default;
+$tab-background-vertical-right-active-wrap-border-width: 0 !default;
+$tab-background-focused-active-wrap-hover-bg: $tab-background-active-wrap-bg !default;
+$tab-background-focused-active-wrap-hover-border: 0 !default;
+$tab-background-focused-active-wrap-hover-border-radius: $tab-background-active-wrap-border-radius !default;
+$tab-background-focused-active-wrap-focus-text-color: $tab-alt-active-hover-text-color !default;
+$tab-background-focused-active-wrap-focus-icon-color: $tab-alt-active-hover-text-color !default;
+$tab-background-focused-active-wrap-focus-close-color: $tab-alt-text-color !default;
+$tab-background-focused-active-wrap-hover-text-color: $tab-background-active-hover-text-color !default;
+$tab-background-focused-active-wrap-hover-icon-color: $tab-background-active-hover-icon-color !default;
+$tab-background-focused-active-wrap-hover-close-color: $tab-background-active-close-icon-color !default;
+$tab-background-focused-active-focus-hover-text-color: $tab-alt-active-hover-text-color !default;
+$tab-background-focused-active-focus-hover-close-color: $tab-alt-text-color !default;
+$tab-background-focused-wrap-focus-close-color: $tab-alt-text-color !default;
+$tab-background-focused-active-wrap-icon-color: $tab-alt-active-hover-text-color !default;
+$tab-background-accent-indicator-bg: $tab-border-color !default;
+$tab-background-active-text-font-weight: $tab-light-font-weight !default;
+$tab-background-text-color: $tab-alt-text-color !default;
+
 //enddefault
 //dimensions
 $hscroll-alt-ribble-animation-border-frame: rgba(0, 0, 0, .12) !default;
@@ -455,9 +712,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         }
 
         .e-indicator + .e-toolbar-item:last-child.e-active {
-          @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-            margin: 1px 2px 0 0;
-          }
+          margin: $tab-bgr-active-last-margin;
         }
       }
 
@@ -476,14 +731,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         }
 
         .e-scroll-nav {
-          width: 50px;
-          @if $tab-skin == 'FluentUI' {
-            width: 38px;
-          }
-          @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-            border-radius: 4px;
-            width: 38px;
-          }
+          width: $tab-bgr-hscroll-items-nav-width;
         }
       }
 
@@ -517,21 +765,17 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         }
 
         .e-text-wrap {
-          height: $tab-big-height;
-
-          @if $tab-skin == 'fabric' {
-            height: $tab-big-height - 2;
-          }
-          @else if $tab-skin == 'highcontrast' {
-            height: $tab-big-height - 4;
-          }
+          height: $tab-bgr-item-textwrap-height;
         }
 
         .e-tab-text {
           font-size: $tab-big-font-size;
-          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-            align-self: auto;
-          }
+          margin-bottom: $tab-bgr-item-text-margin-bottom;
+        }
+
+        &.e-ileft:not(.e-icon) .e-tab-icon::before {
+          position: relative;
+          top: $tab-item-left-icon-before-top;
         }
 
         &.e-active {
@@ -542,43 +786,19 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             margin: $tab-mob-boot-item-margin;
           }
 
-          @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-            &.e-ileft:not(.e-icon) .e-tab-icon::before {
-              position: relative;
-              top: -.5px;
-            }
+          &.e-ileft:not(.e-icon) .e-tab-icon::before {
+            position: relative;
+            top: $tab-item-left-icon-before-top;
           }
 
           .e-text-wrap {
-            height: $tab-big-active-text-container-height;
+            height: $tab-bgr-item-textwrap-height;
             margin-top: $tab-active-text-container-margin;
-
-            @if $tab-skin == 'fabric' {
-              height: $tab-big-height - 2;
-            }
-            @else if $tab-skin == 'highcontrast' {
-              height: $tab-big-height - 4;
-            }
           }
 
           &.e-ileft .e-text-wrap,
           &.e-iright .e-text-wrap {
-            height: $tab-big-active-it-text-container-height;
-
-            @if $tab-skin == 'fabric' {
-              height: $tab-big-height - 2;
-            }
-            @else if $tab-skin == 'highcontrast' {
-              height: $tab-big-height - 4;
-            }
-          }
-
-          &.e-ileft .e-text-wrap {
-            padding: $tab-big-ileft-active-text-wrap-padding;
-
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              padding: 0;
-            }
+            height: $tab-bgr-item-textwrap-height;
           }
         }
 
@@ -604,10 +824,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           height: $tab-big-icon-container-size;
           min-width: $tab-big-icon-container-size;
           width: $tab-big-icon-container-size;
-
-          @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-            line-height: $tab-big-icon-container-size;
-          }
+          line-height: $tab-bgr-icon-line-height;
         }
 
         .e-tab-icon,
@@ -622,13 +839,11 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
         }
 
-        @if $tab-skin == 'FluentUI' {
-          .e-icon-right {
-            margin: $tab-big-it-text-margin;
+        .e-icon-right {
+          margin: 0 0 0 12px;
 
-            @media screen and (max-width: 480px) {
-              margin: $tab-mob-it-text-margin;
-            }
+          @media screen and (max-width: 480px) {
+            margin: $tab-bgr-mob-item-iconright-margin;
           }
         }
 
@@ -663,17 +878,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           .e-close-icon {
             right: $tab-big-close-icon-top-bottom-right;
           }
-
-          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-
-            .e-text-wrap {
-              height: auto;
-            }
-
-            &.e-active .e-tab-wrap {
-              height: 72px;
-            }
-          }
         }
 
         &.e-itop .e-tab-text {
@@ -709,14 +913,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
 
           .e-text-wrap {
-            height: $tab-big-pop-item-height;
-
-            @if $tab-skin == 'fabric' {
-              height: $tab-big-pop-item-height - 2;
-            }
-            @else if $tab-skin == 'highcontrast' {
-              height: $tab-big-pop-item-height - 4;
-            }
+            height: $tab-bgr-pop-item-textwrap-height;
           }
 
           .e-tab-text + .e-close-icon[style = 'display:block'] {
@@ -815,12 +1012,8 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           &::before {
             font-size: $tab-big-nav-icon-size;
             line-height: $tab-big-nav-icon-container-size;
-            top: 0;
+            top: $tab-bgr-scroll-nav-arrow-before-top;
             vertical-align: initial;
-
-            @if $tab-skin == 'highcontrast' {
-              top: -2px;
-            }
           }
         }
       }
@@ -851,41 +1044,20 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           &::before {
             font-size: $tab-big-nav-icon-size;
             line-height: $tab-big-nav-icon-container-size;
-            top: 0;
+            top: $tab-bgr-scroll-nav-arrow-before-top;
             vertical-align: initial;
 
             @media screen and (max-width: 480px) {
               font-size: $tab-mob-nav-icon-size;
             }
-
-            @if $tab-skin == 'highcontrast' {
-              top: -2px;
-            }
           }
 
           &:hover {
-            @if $tab-skin == 'bootstrap' {
-              line-height: 42px;
-            }
-            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-              line-height: 38px;
-            }
+            line-height: $tab-bgr-hor-pop-lineheight;
 
             &::before {
-              top: $tab-big-hover-nav-pop-icon-top;
-
-              @if $tab-skin == 'bootstrap' {
-                line-height: 42px;
-                top: .5px;
-              }
-              @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-                line-height: 38px;
-                top: .5px;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                top: -2px;
-              }
+              line-height: $tab-bgr-hor-pop-lineheight;
+              top: $tab-bgr-hor-pop-hover-top;
             }
           }
         }
@@ -894,37 +1066,16 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           .e-popup-up-icon,
           .e-popup-down-icon {
-            @if $tab-skin == 'bootstrap' {
-              line-height: 42px;
-            }
-            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-              line-height: 38px;
-            }
+            line-height: $tab-bgr-hor-pop-lineheight;
 
             &::before {
-              top: $tab-big-hover-nav-pop-icon-top;
-
-              @if $tab-skin == 'bootstrap' {
-                line-height: 42px;
-              }
-              @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-                line-height: 38px;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                top: -2px;
-              }
+              line-height: $tab-bgr-hor-pop-lineheight;
+              top: $tab-bgr-scroll-nav-arrow-before-top;
             }
 
             &:hover {
-              @if $tab-skin == 'bootstrap' {
-                line-height: 42px;
-                top: -2px;
-              }
-              @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-                line-height: 38px;
-                top: -2px;
-              }
+              line-height: $tab-bgr-hor-pop-lineheight;
+              top: $tab-bgr-hor-focus-pop-hover-top;
             }
           }
         }
@@ -964,20 +1115,13 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
               padding-top: $tab-big-even-boot-active-item-padding-bottom;
             }
 
-            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-              .e-close-icon::before {
-                top: .5px;
-              }
-
-              &.e-itop .e-text-wrap,
-              &.e-ibottom .e-text-wrap {
-                height: initial;
-              }
+            .e-close-icon::before {
+              top: $tab-bgr-bottom-active-close-top;
+            }
 
-              &.e-itop .e-close-icon::before,
-              &.e-ibottom .e-close-icon::before {
-                top: 1.5px;
-              }
+            &.e-itop .e-close-icon::before,
+            &.e-ibottom .e-close-icon::before {
+              top: $tab-bgr-bottom-active-itop-close-top;
             }
           }
 
@@ -989,15 +1133,12 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
               margin: $tab-mob-even-last-item-margin;
             }
 
-            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4'or $tbar-skin == 'bootstrap5' {
-
-              .e-tab-text {
-                padding-top: .5px;
-              }
+            .e-tab-text {
+              padding-top: $tab-bgr-bottom-active-text-padding-top;
+            }
 
-              .e-close-icon::before {
-                top: 0;
-              }
+            .e-close-icon::before {
+              top: $tab-bgr-bottom-active-last-close-top;
             }
           }
 
@@ -1007,17 +1148,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             padding-top: 0;
           }
 
-          &.e-itop.e-active .e-tab-wrap:focus,
-          &.e-ibottom.e-active .e-tab-wrap:focus {
-
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-
-              .e-icon-close::before {
-                top: -1px;
-              }
-            }
-          }
-
           &.e-ileft.e-active .e-text-wrap {
             margin: $tab-big-even-ileft-active-text-wrap-margin;
           }
@@ -1025,22 +1155,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           &.e-active .e-text-wrap {
             height: $tab-big-even-active-text-container-height;
             padding: 0;
-
-            @if $tab-skin == 'fabric' {
-              height: $tab-big-height - 2;
-            }
-            @else if $tab-skin == 'highcontrast' {
-              height: $tab-big-height - 4;
-            }
-          }
-
-          &.e-active.e-itop .e-text-wrap,
-          &.e-active.e-ibottom .e-text-wrap {
-            height: $tab-big-height;
-
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              height: auto;
-            }
           }
 
           &.e-itop.e-active .e-text-wrap,
@@ -1049,13 +1163,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
 
           &.e-ileft.e-active {
-
-            @if $tab-skin == 'fabric' {
-              height: $tab-big-height - 2;
-            }
-            @else if $tab-skin == 'highcontrast' {
-              height: $tab-big-height - 4;
-            }
+            height: $tab-big-even-active-text-container-height;
           }
         }
       }
@@ -1102,12 +1210,9 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             }
           }
 
-          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-
-            &.e-ileft.e-icon {
-              min-height: $tab-big-height;
-              min-width: $tab-big-height;
-            }
+          &.e-ileft.e-icon {
+            min-height: $tab-bgr-vertical-icon-min-height;
+            min-width: $tab-bgr-vertical-icon-min-width;
           }
         }
 
@@ -1160,18 +1265,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           height: $tab-big-tb-icon-height;
         }
 
-        .e-toolbar-item.e-active,
-        .e-toolbar-item:not(.e-separator):last-child.e-active {
-
-          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-
-            .e-text-wrap::before {
-              bottom: -10px;
-              top: auto;
-            }
-          }
-        }
-
         .e-scroll-nav {
           height: $tab-big-icon-top-bottom-item-height;
         }
@@ -1189,12 +1282,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         }
       }
 
-      @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-        &.e-rtl .e-toolbar-item.e-active {
-          margin: 0 0 0 2px;
-        }
-      }
-
       &.e-vertical-tab {
 
         .e-tab-header.e-vertical {
@@ -1221,14 +1308,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
 
           .e-tab-wrap:focus .e-text-wrap {
-            height: $tab-big-height;
-
-            @if $tab-skin == 'fabric' {
-              height: $tab-big-height - 2;
-            }
-            @else if $tab-skin == 'highcontrast' {
-              height: $tab-big-height - 4;
-            }
+            height: $tab-bgr-item-textwrap-height;
           }
 
           &.e-itop,
@@ -1256,14 +1336,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
               height: $tab-big-pop-item-height;
 
               .e-text-wrap {
-                height: $tab-big-pop-item-height;
-
-                @if $tab-skin == 'fabric' {
-                  height: $tab-big-pop-item-height - 2;
-                }
-                @else if $tab-skin == 'highcontrast' {
-                  height: $tab-big-pop-item-height - 4;
-                }
+                height: $tab-bgr-pop-item-textwrap-height;
               }
             }
 
@@ -1281,25 +1354,12 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             &.e-active {
 
               .e-tab-wrap:focus .e-text-wrap {
-                height: $tab-big-height;
+                height: $tab-bgr-item-textwrap-height;
                 padding: 0;
-
-                @if $tab-skin == 'fabric' {
-                  height: $tab-big-height - 2;
-                }
-                @else if $tab-skin == 'highcontrast' {
-                  height: $tab-big-height - 4;
-                }
               }
 
               &.e-ileft {
-
-                @if $tab-skin == 'fabric' {
-                  height: $tab-big-height - 2;
-                }
-                @else if $tab-skin == 'highcontrast' {
-                  height: $tab-big-height - 4;
-                }
+                height: $tab-big-even-active-text-container-height;
               }
             }
           }
@@ -1364,22 +1424,15 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
     &.e-rtl {
 
-      @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-
-        .e-tab-header {
-
-          .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child.e-active {
-            margin: $tab-big-rtl-item-margin;
-          }
+      .e-tab-header {
 
-          &.e-horizontal-bottom {
+        &.e-horizontal-bottom {
 
-            .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-separator) {
-              margin: 0 0 0 2px;
+          .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-separator) {
+            margin: $tab-bgr-rtl-bottom-item-margin;
 
-              &.e-active {
-                margin: 0 0 0 2px;
-              }
+            &.e-active {
+              margin: $tab-bgr-rtl-bottom-active-margin;
             }
           }
         }
@@ -1409,10 +1462,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
         .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
           margin: $tab-big-alt-first-item-margin;
-          padding: 0;
-          @if $tab-skin == 'tailwind' {
-            padding: 0 12px;
-          }
+          padding: $tab-bgr-fill-active-item-padding;
         }
 
         .e-toolbar-item {
@@ -1421,6 +1471,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             height: $tab-big-fill-height;
             margin: $tab-alt-item-margin;
             min-height: $tab-big-fill-height;
+            padding: $tab-bgr-fill-active-item-padding;
 
             @media screen and (max-width: 480px) {
               height: $tab-mob-fill-height;
@@ -1445,58 +1496,35 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
 
           .e-text-wrap {
-            height: $tab-big-fill-height;
+            height: $tab-bgr-fill-item-textwrap-height;
 
             @media screen and (max-width: 480px) {
               height: $tab-mob-fill-height;
             }
-
-            @if $tab-skin == 'fabric' {
-              height: $tab-big-fill-height - 2;
-            }
-
-            @if $tab-skin == 'highcontrast' {
-              height: $tab-big-fill-height - 4;
-            }
           }
 
           &.e-active {
-            padding: $tab-alt-big-active-item-padding;
+            padding: $tab-bgr-fill-active-item-padding;
 
             .e-tab-wrap {
               margin-bottom: $tab-fill-big-active-item-wrap-margin-bottom;
             }
 
             .e-text-wrap {
-              height: $tab-big-fill-height;
+              height: $tab-bgr-fill-item-textwrap-height;
 
               @media screen and (max-width: 480px) {
                 height: $tab-mob-fill-height;
               }
-
-              @if $tab-skin == 'fabric' {
-                height: $tab-big-fill-height - 2;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                height: $tab-big-fill-height - 4;
-              }
             }
 
             &.e-ileft .e-text-wrap,
             &.e-iright .e-text-wrap {
-              height: $tab-fill-big-active-it-text-container-height;
+              height: $tab-bgr-fill-active-ileft-textwrap-height;
 
               @media screen and (max-width: 480px) {
                 height: $tab-fill-big-active-it-text-container-height;
               }
-
-              @if $tab-skin == 'fabric' {
-                height: $tab-big-fill-height - 2;
-              }
-              @else if $tab-skin == 'highcontrast' {
-                height: $tab-big-fill-height - 4;
-              }
             }
           }
 
@@ -1531,14 +1559,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           .e-toolbar-item.e-active .e-text-wrap {
             height: $tab-fill-big-even-active-text-height;
-
-            @if $tab-skin == 'fabric' {
-              height: $tab-big-fill-height - 2;
-            }
-
-            @if $tab-skin == 'highcontrast' {
-              height: $tab-big-fill-height - 4;
-            }
           }
 
           .e-toolbar-item.e-itop .e-text-wrap,
@@ -1564,33 +1584,13 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             }
 
             .e-tab-wrap:focus .e-text-wrap {
-              height: $tab-focus-big-fill-height;
-
-              @if $tab-skin == 'fabric' {
-                height: $tab-big-fill-height - 2;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                height: $tab-big-fill-height - 4;
-              }
+              height: $tab-bgr-fill-focused-wrap-height;
             }
 
             &.e-active .e-tab-wrap:focus {
 
               .e-text-wrap {
-                @if $tab-skin == 'fabric' {
-                  height: $tab-big-fill-height - 2;
-                }
-                @else if $tab-skin == 'highcontrast' {
-                  height: $tab-big-fill-height - 4;
-                }
-              }
-
-              .e-close-icon::before {
-
-                @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-                  top: 1px;
-                }
+                height: $tab-bgr-fill-focused-wrap-height;
               }
             }
 
@@ -1607,19 +1607,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
               }
             }
           }
-
-          &.e-horizontal-bottom {
-
-            .e-tab-wrap:focus .e-text-wrap {
-              @if $tab-skin == 'fabric' {
-                height: $tab-big-fill-height - 2;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                height: $tab-big-fill-height - 4;
-              }
-            }
-          }
         }
       }
 
@@ -1646,18 +1633,13 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
         .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
           margin: $tab-big-alt-first-item-margin;
-          padding: 0;
-          @if $tab-skin == 'tailwind' {
-            padding: 0 12px;
-          }
+          padding: $tab-bgr-background-active-padding;
         }
 
         .e-toolbar-item {
 
           &:not(.e-separator) {
-            @if $tab-skin != 'bootstrap5' {
-              margin: $tab-alt-item-margin;
-            }
+            padding: $tab-bgr-background-active-padding;
           }
 
           .e-tab-wrap {
@@ -1669,35 +1651,11 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
 
           &.e-active {
-            padding: $tab-alt-big-active-item-padding;
+            padding: $tab-bgr-background-active-padding;
 
             .e-tab-wrap {
               margin-bottom: $tab-bg-big-active-item-wrap-margin-bottom;
             }
-
-            .e-text-wrap {
-              height: $tab-big-height;
-
-              @if $tab-skin == 'fabric' {
-                height: $tab-big-height - 2;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                height: $tab-big-height - 4;
-              }
-            }
-          }
-
-          &:hover {
-            @if $tab-skin == 'highcontrast' {
-              &.e-itop,
-              &.e-ibottom {
-
-                .e-text-wrap {
-                  height: auto;
-                }
-              }
-            }
           }
         }
 
@@ -1735,14 +1693,8 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         .e-toolbar-item:not(.e-separator) {
           margin: $tab-big-rtl-item-margin;
 
-          @if $tab-skin == 'FluentUI' {
-            .e-icon-right {
-              margin: $tab-rtl-big-it-text-margin;
-
-              @media screen and (max-width: 480px) {
-                margin: $tab-rtl-mob-it-text-margin;
-              }
-            }
+          .e-icon-right {
+            margin: $tab-bgr-rtl-icon-right-margin;
           }
 
           .e-icon-left + .e-tab-text {
@@ -1888,10 +1840,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
       &::before {
         content: '';
         position: absolute;
-
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-          display: block;
-        }
+        display: $tab-nrml-hdr-before-display;
       }
 
       &:not(.e-vertical) {
@@ -1926,35 +1875,34 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             margin: $tab-mob-last-item-margin;
           }
         }
-        @if $tab-skin == 'FluentUI' {
-          .e-toolbar-item.e-active {
-            position: relative;
 
-            &:hover::before {
-              left: 0;
-              right: 0;
-            }
+        .e-toolbar-item.e-active {
+          position: $tab-nrml-item-active-position;
 
-            &::before {
-              background-color: $tab-alt-hdr-bg-color;
-              bottom: 0;
-              content: '';
-              height: 2px;
-              left: 8px;
-              position: absolute;
-              right: 8px;
-              transition: left .267s cubic-bezier(.1, .25, .75, .9) 0s, right .267s cubic-bezier(.1, .25, .75, .9) 0s;
-            }
+          &:hover::before {
+            left: $tab-nrml-item-active-hover-before-left;
+            right: $tab-nrml-item-active-hover-before-right;
+          }
 
-            &::after {
-              color: transparent;
-              content: attr(data-content);
-              display: block;
-              font-weight: bold;
-              height: 1px;
-              overflow: hidden;
-              visibility: hidden;
-            }
+          &::before {
+            background-color: $tab-nrml-item-active-before-bg-font;
+            bottom: $tab-nrml-item-active-before-bottom;
+            content: $tab-nrml-item-active-before-content;
+            height: $tab-nrml-item-active-before-height;
+            left: $tab-nrml-item-active-before-left;
+            position: $tab-nrml-item-active-before-position;
+            right: $tab-nrml-item-active-before-left;
+            transition: $tab-nrml-item-active-before-transition;
+          }
+
+          &::after {
+            color: $tab-nrml-item-active-after-font;
+            content: $tab-nrml-item-active-after-content;
+            display: $tab-nrml-item-active-after-display;
+            font-weight: $tab-nrml-item-active-after-font-weight;
+            height: $tab-nrml-item-active-after-height;
+            overflow: $tab-nrml-item-active-after-overflow;
+            visibility: $tab-nrml-item-active-after-overflow;
           }
         }
       }
@@ -1969,32 +1917,13 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
         }
 
-        @if $tab-skin == 'bootstrap'or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-
-          &[style *= 'overflow: hidden'] .e-toolbar-item:not(.e-separator).e-active {
-            margin-bottom: 0;
-          }
-        }
-
-        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-          .e-hscroll-bar {
-            padding: 0 1px;
-          }
+        .e-hscroll-bar {
+          padding: $tab-nrml-hscroll-bar-padding;
         }
 
         .e-scroll-nav {
-          width: 40px;
-          @if $tab-skin == 'FluentUI' {
-            width: 32px;
-          }
-          @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-            border-radius: 4px;
-            width: 32px;
-          }
-
-          @if $tab-skin == 'tailwind' {
-            width: 24px;
-          }
+          width: $tab-nrml-hscroll-items-nav-width;
+          border-radius: $tab-nrml-hscroll-items-bdr-radius;
         }
 
         &:not(.e-tbar-pos) .e-toolbar-item:last-child {
@@ -2028,12 +1957,8 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         height: $tab-border-width;
         left: 0;
         right: 0;
-        transition: left .125s cubic-bezier(.35, 0, .25, 1), right .25s cubic-bezier(.35, 0, .25, 1);
-
-        @if $tab-skin == 'tailwind' {
-          border-radius: $tab-border-width;
-          transition: all .4s cubic-bezier(.25, .46, .45, .94);
-        }
+        border-radius: $tab-nrml-vertical-indicator-bdr-radius;
+        transition: $tab-nrml-indicator-transition;
       }
 
       .e-toolbar-item {
@@ -2070,18 +1995,11 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           align-content: center;
           align-items: center;
           display: inline-flex;
-          height: $tab-nrml-height;
+          height: $tab-nrml-item-text-wrap-height;
 
           @media screen and (max-width: 480px) {
             height: $tab-big-height;
           }
-
-          @if $tab-skin == 'fabric' {
-            height: $tab-nrml-height - 2;
-          }
-          @else if $tab-skin == 'highcontrast' {
-            height: $tab-nrml-height - 4;
-          }
         }
 
         .e-tab-text {
@@ -2090,18 +2008,14 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           font-size: $tab-nrml-font-size;
           font-weight: $tab-font-weight;
           text-transform: $tab-text-transform;
+          align-self: auto;
+          margin-bottom: $tab-nrml-item-text-margin-bottom;
 
           @media screen and (max-width: 480px) {
             font-size: $tab-big-font-size;
           }
         }
 
-        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-          .e-tab-text {
-            align-self: auto;
-          }
-        }
-
         &.e-active {
           margin: $tab-nrml-boot-item-margin;
           padding-bottom: $tab-nrml-even-boot-active-item-padding-bottom;
@@ -2111,79 +2025,45 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
 
           .e-text-wrap {
-            height: $tab-nrml-active-text-container-height;
+            height: $tab-nrml-item-text-wrap-height;
             margin-top: $tab-active-text-container-margin;
 
             @media screen and (max-width: 480px) {
               height: $tab-big-active-text-container-height;
             }
-
-            @if $tab-skin == 'fabric' {
-              height: $tab-nrml-height - 2;
-            }
-            @else if $tab-skin == 'highcontrast' {
-              height: $tab-nrml-height - 4;
-            }
           }
 
           .e-tab-wrap {
             margin-bottom: $tab-nrml-active-item-wrap-margin-bottom;
-
-            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-              &:hover {
-                border: 0;
-              }
-            }
           }
 
           .e-tab-text {
             font-weight: $tab-semi-font-weight;
           }
 
-          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-            .e-tab-text {
-              align-self: auto;
-            }
+          .e-tab-icon::before {
+            top: $tab-item-icon-before-top;
+            left: $tab-item-icon-before-left;
           }
 
-          @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-            .e-tab-icon::before {
-              top: -1px;
-            }
+          .e-icon-top.e-tab-icon::before,
+          .e-icon-bottom.e-tab-icon::before {
+            left: 0;
           }
 
           &.e-ileft,
           &.e-iright {
 
             .e-text-wrap {
-              height: $tab-nrml-active-it-text-container-height;
-              padding: $tab-nrml-ileft-active-text-wrap-padding;
+              height: $tab-nrml-item-text-wrap-height;
+              padding: 0;
 
               @media screen and (max-width: 480px) {
                 height: $tab-big-active-it-text-container-height;
               }
-
-              @if $tab-skin == 'fabric' {
-                height: $tab-nrml-height - 2;
-                padding: 0;
-              }
-              @else if $tab-skin == 'highcontrast' {
-                height: $tab-nrml-height - 4;
-                padding: 0;
-              }
-            }
-
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              .e-tab-wrap .e-tab-text {
-                align-self: auto;
-              }
-
-              .e-tab-wrap:focus .e-tab-text {
-                align-self: auto;
-              }
-            }
-          }
-        }
+            }
+          }
+        }
 
         .e-icons.e-close-icon {
           display: none;
@@ -2205,11 +2085,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         }
 
         .e-close-icon::before {
-          top: $tab-pop-close-icon-top;
-
-          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-            top: 1px;
-          }
+          top: 1px;
         }
 
         .e-icons.e-tab-icon {
@@ -2217,10 +2093,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           height: $tab-nrml-icon-container-size;
           min-width: $tab-nrml-icon-container-size;
           width: $tab-nrml-icon-container-size;
-
-          @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-            line-height: $tab-nrml-icon-container-size;
-          }
+          line-height: $tab-nrml-item-tabicon-line-height;
 
           @media screen and (max-width: 480px) {
             height: $tab-mob-icon-container-size;
@@ -2237,6 +2110,17 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
         }
 
+        .e-tab-icon::before {
+          position: relative;
+          top: $tab-item-icon-before-top;
+          left: $tab-item-icon-before-left;
+        }
+
+        .e-icon-top.e-tab-icon::before,
+        .e-icon-bottom.e-tab-icon::before {
+          left: 0;
+        }
+
         &.e-icon {
 
           .e-tab-wrap {
@@ -2249,13 +2133,11 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
         }
 
-        @if $tab-skin == 'FluentUI' {
-          .e-icon-right {
-            margin: $tab-nrml-it-text-margin;
+        .e-icon-right {
+          margin: 0 0 0 8px;
 
-            @media screen and (max-width: 480px) {
-              margin: $tab-mob-it-text-margin;
-            }
+          @media screen and (max-width: 480px) {
+            margin: $tab-bgr-mob-item-iconright-margin;
           }
         }
 
@@ -2301,9 +2183,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           &.e-active {
 
             .e-tab-wrap {
-              @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-                height: 62px;
-              }
 
               &:focus {
 
@@ -2371,9 +2250,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           &:not(.e-separator) {
             margin: $tab-pop-item-margin;
-            @if $tab-skin == 'tailwind' {
-              padding: 0;
-            }
+            padding: 0;
           }
 
           .e-tab-wrap {
@@ -2388,15 +2265,8 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
 
           .e-text-wrap {
-            height: $tab-nrml-pop-item-height;
+            height: $tab-nrml-pop-item-textwrap-height;
             width: 100%;
-
-            @if $tab-skin == 'fabric' {
-              height: $tab-nrml-pop-item-height - 2;
-            }
-            @else if $tab-skin == 'highcontrast' {
-              height: $tab-nrml-pop-item-height - 4;
-            }
           }
 
           .e-tab-text {
@@ -2537,16 +2407,8 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           font-size: $tab-nrml-nav-icon-size;
           line-height: $tab-nrml-nav-icon-container-size;
           position: relative;
-          top: 0;
+          top: $tab-nrml-scroll-nav-arrow-before-top;
           vertical-align: initial;
-
-          @if $tab-skin == 'fabric' {
-            top: -1px;
-          }
-
-          @if $tab-skin == 'highcontrast' {
-            top: -2px;
-          }
         }
 
         .e-nav-arrow {
@@ -2595,56 +2457,23 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             font-size: $tab-nrml-nav-icon-size;
             line-height: $tab-nrml-nav-icon-container-size;
             position: relative;
-            top: 0;
+            top: $tab-nrml-scroll-nav-arrow-before-top;
             vertical-align: initial;
 
-            @if $tab-skin == 'fabric' {
-              top: -1px;
-            }
-
-            @if $tab-skin == 'highcontrast' {
-              top: -2px;
-            }
-
             @media screen and (max-width: 480px) {
               font-size: $tab-mob-nav-icon-size;
             }
           }
 
           &:hover {
-            @if $tab-skin == 'bootstrap' {
-              line-height: 34px;
-            }
-            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-              line-height: 32px;
-            }
+            line-height: $tab-nrml-hor-pop-lineheight;
 
             &::before {
-              top: $tab-nrml-hover-nav-pop-icon-top;
+              line-height: $tab-nrml-hor-pop-lineheight;
+              top: $tab-nrml-scroll-nav-arrow-before-top;
 
-              @if $tab-skin == 'fabric' {
-                top: -1px;
-              }
-
-              @if $tab-skin == 'bootstrap' {
-                line-height: 34px;
-                top: 0;
-
-                @media screen and (max-width: 480px) {
-                  line-height: 43px;
-                }
-              }
-              @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-                line-height: 32px;
-                top: 0;
-
-                @media screen and (max-width: 480px) {
-                  line-height: 43px;
-                }
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                top: -2px;
+              @media screen and (max-width: 480px) {
+                line-height: $tab-nrml-mob-hor-pop-lineheight;
               }
             }
           }
@@ -2674,36 +2503,20 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           .e-popup-up-icon,
           .e-popup-down-icon {
-            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-              line-height: 32px;
-            }
+            line-height: $tab-nrml-hor-focus-pop-lineheight;
 
             &::before {
-              top: $tab-nrml-hover-nav-pop-icon-top;
-
-              @if $tab-skin == 'fabric' {
-                top: -1px;
-              }
-
-              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-                line-height: 32px;
-                top: 0;
-
-                @media screen and (max-width: 480px) {
-                  line-height: 43px;
-                }
-              }
+              line-height: $tab-nrml-hor-focus-pop-lineheight;
+              top: $tab-nrml-scroll-nav-arrow-before-top;
 
-              @if $tab-skin == 'highcontrast' {
-                top: -2px;
+              @media screen and (max-width: 480px) {
+                line-height: $tab-nrml-mob-hor-pop-lineheight;
               }
             }
 
             &:hover {
-              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-                line-height: 32px;
-                top: -.5px;
-              }
+              line-height: $tab-nrml-hor-focus-pop-lineheight;
+              top: $tab-nrml-hor-focus-pop-hover-top;
             }
           }
         }
@@ -2711,35 +2524,33 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
       &.e-horizontal-bottom {
 
-        @if $tab-skin == 'FluentUI' {
-          .e-toolbar-items .e-toolbar-item.e-active {
-            position: relative;
+        .e-toolbar-items .e-toolbar-item.e-active {
+          position: $tab-nrml-item-active-position;
 
-            &:hover::before {
-              left: 0;
-              right: 0;
-            }
+          &:hover::before {
+            left: $tab-nrml-item-active-hover-before-left;
+            right: $tab-nrml-item-active-hover-before-right;
+          }
 
-            &::before {
-              background-color: $tab-alt-hdr-bg-color;
-              content: '';
-              height: 2px;
-              left: 8px;
-              position: absolute;
-              right: 8px;
-              top: 0;
-              transition: left .267s cubic-bezier(.1, .25, .75, .9) 0s, right .267s cubic-bezier(.1, .25, .75, .9) 0s;
-            }
+          &::before {
+            background-color: $tab-nrml-item-active-before-bg-font;
+            content: $tab-nrml-item-active-before-content;
+            height: $tab-nrml-item-active-before-height;
+            left: $tab-nrml-item-active-before-left;
+            position: $tab-nrml-item-active-before-position;
+            right: $tab-nrml-item-active-before-left;
+            top: $tab-nrml-item-active-before-bottom;
+            transition: $tab-nrml-item-active-before-transition;
+          }
 
-            &::after {
-              color: transparent;
-              content: attr(data-content);
-              display: block;
-              font-weight: bold;
-              height: 1px;
-              overflow: hidden;
-              visibility: hidden;
-            }
+          &::after {
+            color: $tab-nrml-item-active-after-font;
+            content: $tab-nrml-item-active-after-content;
+            display: $tab-nrml-item-active-after-display;
+            font-weight: $tab-nrml-item-active-after-font-weight;
+            height: $tab-nrml-item-active-after-height;
+            overflow: $tab-nrml-item-active-after-overflow;
+            visibility: $tab-nrml-item-active-after-overflow;
           }
         }
 
@@ -2747,10 +2558,8 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           bottom: auto;
         }
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-          .e-hscroll-bar {
-            margin-top: -1px;
-          }
+        .e-hscroll-bar {
+          margin-top: $tab-nrml-active-item-tabicon-before-top;
         }
 
         .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
@@ -2780,49 +2589,18 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             }
 
             .e-text-wrap {
-              height: $tab-nrml-height;
-              padding: $tab-even-active-text-container-padding;
-
-              @if $tab-skin == 'fabric' {
-                height: $tab-nrml-height - 2;
-                padding: 0;
-              }
-              @else if $tab-skin == 'highcontrast' {
-                height: $tab-nrml-height - 4;
-                padding: 0;
-              }
+              height: $tab-nrml-item-text-wrap-height;
+              padding: 0;
             }
 
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              .e-text-wrap::before,
-              &:not(.e-separator):last-child .e-text-wrap::before {
-                top: 0;
-              }
-
-              &.e-itop {
-
-                @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-                  .e-tab-wrap:focus .e-close-icon::before {
-                    top: 0;
-                  }
-
-                  .e-text-wrap {
-                    height: auto;
-                  }
-                }
-              }
+            .e-text-wrap::before,
+            &:not(.e-separator):last-child .e-text-wrap::before {
+              top: $tab-nrml-bottom-active-before-top;
             }
 
-            &.e-ileft {
-
-              @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-                .e-tab-wrap .e-tab-text {
-                  align-self: auto;
-                }
-
-                .e-tab-wrap:focus .e-tab-text {
-                  align-self: auto;
-                }
+            &.e-itop {
+              .e-tab-wrap:focus .e-close-icon::before {
+                top: 0;
               }
             }
           }
@@ -2878,12 +2656,8 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
         .e-indicator {
           display: $tab-indicator-display;
-          transition: top .125s cubic-bezier(.35, 0, .25, 1), bottom .25s cubic-bezier(.35, 0, .25, 1);
+          transition: $tab-nrml-vertical-indicator-transition;
           width: 2px;
-
-          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-            transition: initial;
-          }
         }
 
         .e-toolbar-items {
@@ -2933,14 +2707,11 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
 
           &.e-ileft.e-icon {
+            min-height: $tab-nrml-vertical-icon-min-height;
+            min-width: $tab-nrml-vertical-icon-min-width;
 
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              min-height: $tab-nrml-height;
-              min-width: $tab-nrml-height;
-
-              .e-tab-icon {
-                margin: auto;
-              }
+            .e-tab-icon {
+              margin: $tab-nrml-vertical-tabicon-margin;
             }
           }
 
@@ -2969,36 +2740,33 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             right: 0;
           }
 
-          @if $tab-skin == 'FluentUI' {
-            .e-toolbar-items .e-toolbar-item.e-active {
-              position: relative;
+          .e-toolbar-items .e-toolbar-item.e-active {
 
-              &:hover::before {
-                bottom: 0;
-                height: 100%;
-              }
+            &:hover::before {
+              bottom: $tab-nrml-item-active-before-bottom;
+              height: $tab-nrml-vertical-hover-before-height;
+            }
 
-              &::before {
-                background-color: $tab-alt-hdr-bg-color;
-                bottom: 10px;
-                content: '';
-                height: 60%;
-                left: 99%;
-                position: absolute;
-                right: 0;
-                transition: bottom .267s cubic-bezier(.1, .25, .75, .9) 0s, height .267s cubic-bezier(.1, .25, .75, .9) 0s;
-                width: 2px;
-              }
+            &::before {
+              background-color: $tab-nrml-item-active-before-bg-font;
+              bottom: $tab-nrml-vertical-before-bottom;
+              content: $tab-nrml-item-active-before-content;
+              height: $tab-nrml-vertical-before-height;
+              left: $tab-nrml-vertical-before-left;
+              position: $tab-nrml-item-active-before-position;
+              right: $tab-nrml-item-active-before-bottom;
+              transition: $tab-nrml-vertical-before-transition;
+              width: $tab-nrml-item-active-before-height;
+            }
 
-              &::after {
-                color: transparent;
-                content: attr(data-content);
-                display: block;
-                font-weight: bold;
-                height: 1px;
-                overflow: hidden;
-                visibility: hidden;
-              }
+            &::after {
+              color: $tab-nrml-item-active-after-font;
+              content: $tab-nrml-item-active-after-content;
+              display: $tab-nrml-item-active-after-display;
+              font-weight: $tab-nrml-item-active-after-font-weight;
+              height: $tab-nrml-item-active-after-height;
+              overflow: $tab-nrml-item-active-after-overflow;
+              visibility: $tab-nrml-item-active-after-overflow;
             }
           }
         }
@@ -3026,36 +2794,33 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             }
           }
 
-          @if $tab-skin == 'FluentUI' {
-            .e-toolbar-items .e-toolbar-item.e-active {
-              position: relative;
+          .e-toolbar-items .e-toolbar-item.e-active {
 
-              &:hover::before {
-                bottom: 0;
-                height: 100%;
-              }
+            &:hover::before {
+              bottom: $tab-nrml-item-active-before-bottom;
+              height: $tab-nrml-vertical-hover-before-height;
+            }
 
-              &::before {
-                background-color: $tab-alt-hdr-bg-color;
-                bottom: 10px;
-                content: '';
-                height: 60%;
-                left: 0;
-                position: absolute;
-                right: 99%;
-                transition: bottom .267s cubic-bezier(.1, .25, .75, .9) 0s, height .267s cubic-bezier(.1, .25, .75, .9) 0s;
-                width: 2px;
-              }
+            &::before {
+              background-color: $tab-nrml-item-active-before-bg-font;
+              bottom: $tab-nrml-vertical-before-bottom;
+              content: $tab-nrml-item-active-before-content;
+              height: $tab-nrml-vertical-before-height;
+              left: $tab-nrml-item-active-before-bottom;
+              position: $tab-nrml-item-active-before-position;
+              right: $tab-nrml-vertical-before-left;
+              transition: $tab-nrml-vertical-before-transition;
+              width: $tab-nrml-item-active-before-height;
+            }
 
-              &::after {
-                color: transparent;
-                content: attr(data-content);
-                display: block;
-                font-weight: bold;
-                height: 1px;
-                overflow: hidden;
-                visibility: hidden;
-              }
+            &::after {
+              color: $tab-nrml-item-active-after-font;
+              content: $tab-nrml-item-active-after-content;
+              display: $tab-nrml-item-active-after-display;
+              font-weight: $tab-nrml-item-active-after-font-weight;
+              height: $tab-nrml-item-active-after-height;
+              overflow: $tab-nrml-item-active-after-overflow;
+              visibility: $tab-nrml-item-active-after-overflow;
             }
           }
         }
@@ -3237,29 +3002,26 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
         .e-toolbar-item.e-active,
         .e-toolbar-item:not(.e-separator):last-child.e-active {
-          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-            .e-text-wrap {
-              position: static;
-
-              &::before {
-                content: none;
-              }
-            }
+          .e-text-wrap {
+            position: $tab-nrml-vertical-text-position;
+          }
 
-            .e-tab-wrap::before {
-              content: '';
-              display: block;
-              position: absolute;
-              top: 96%;
-              width: calc(100% - 16px);
+          .e-text-wrap::before {
+            border: $tab-active-wrap-before-border;
+            content: $tab-active-wrap-before-content;
+            display: none;
+            position: $tab-active-wrap-before-position;
+            top: $tab-active-wrap-before-top;
+            width: $tab-active-wrap-before-width;
+          }
 
-              @if $tab-skin == 'fabric' {
-                border: 1px solid $theme-primary;
-              }
-              @else if $tab-skin == 'highcontrast' {
-                border: 1px solid $selection-bg;
-              }
-            }
+          .e-tab-wrap::before {
+            content: $tab-nrml-vertical-wrap-before-content;
+            display: $tab-nrml-vertical-wrap-before-display;
+            position: $tab-nrml-vertical-wrap-before-position;
+            top: $tab-nrml-vertical-wrap-before-top;
+            width: $tab-nrml-vertical-wrap-before-width;
+            border: $tab-nrml-vertical-wrap-before-border;
           }
         }
 
@@ -3282,10 +3044,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         &.e-vertical {
 
           .e-indicator {
-
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              width: 3px;
-            }
+            width: $tab-nrml-vertical-indicator-width;
           }
 
           .e-toolbar-item.e-active,
@@ -3309,19 +3068,15 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           .e-toolbar-item.e-active,
           .e-toolbar-item:not(.e-separator):last-child.e-active {
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              .e-tab-wrap::before {
-                top: 0;
-              }
+            .e-tab-wrap::before {
+              top: $tab-nrml-bottom-wrap-before-top;
             }
           }
         }
       }
 
-      @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-        &.e-rtl .e-tab-header .e-toolbar-item.e-active {
-          margin: 0 0 0 2px;
-        }
+      &.e-rtl .e-tab-header .e-toolbar-item.e-active {
+        margin: $tab-nrml-vertical-rtl-active-margin;
       }
 
       &.e-vertical-tab {
@@ -3340,14 +3095,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           height: $tab-nrml-height;
 
           .e-text-wrap {
-            height: $tab-nrml-height;
-
-            @if $tab-skin == 'fabric' {
-              height: $tab-nrml-height - 2;
-            }
-            @else if $tab-skin == 'highcontrast' {
-              height: $tab-nrml-height - 4;
-            }
+            height: $tab-nrml-item-text-wrap-height;
           }
         }
 
@@ -3376,14 +3124,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             height: $tab-nrml-pop-item-height;
 
             .e-text-wrap {
-              height: $tab-nrml-pop-item-height;
-
-              @if $tab-skin == 'fabric' {
-                height: $tab-nrml-pop-item-height - 2;
-              }
-              @else if $tab-skin == 'highcontrast' {
-                height: $tab-nrml-pop-item-height - 4;
-              }
+              height: $tab-nrml-pop-item-textwrap-height;
             }
           }
 
@@ -3401,24 +3142,8 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           &.e-active {
 
             .e-tab-wrap:focus .e-text-wrap {
-              height: $tab-nrml-height;
+              height: $tab-nrml-item-text-wrap-height;
               padding: 0;
-
-              @if $tab-skin == 'fabric' {
-                height: $tab-nrml-height - 2;
-              }
-              @else if $tab-skin == 'highcontrast' {
-                height: $tab-nrml-height - 4;
-              }
-            }
-
-            &.e-ileft {
-
-              @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-                .e-tab-wrap:focus .e-tab-text {
-                  align-self: auto;
-                }
-              }
             }
           }
 
@@ -3598,12 +3323,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           min-height: $tab-mob-fill-height;
         }
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-          &::before {
-            display: none;
-          }
-        }
-
         .e-indicator {
           display: none;
         }
@@ -3619,10 +3338,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           &:not(.e-tbar-pos) .e-toolbar-item:first-child,
           &:not(.e-tbar-pos) .e-toolbar-item:last-child {
             margin: $tab-nrml-alt-first-item-margin;
-            padding: 0;
-            @if $tab-skin == 'tailwind' {
-              padding: 0 8px;
-            }
+            padding: $tab-nrml-background-active-padding;
           }
         }
 
@@ -3632,6 +3348,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             height: $tab-nrml-fill-height;
             margin: $tab-alt-item-margin;
             min-height: $tab-nrml-fill-height;
+            padding: $tab-nrml-background-active-padding;
 
             @media screen and (max-width: 480px) {
               height: $tab-mob-fill-height;
@@ -3656,42 +3373,26 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
 
           .e-text-wrap {
-            height: $tab-nrml-fill-height;
+            height: $tab-nrml-fill-item-textwrap-height;
 
             @media screen and (max-width: 480px) {
               height: $tab-mob-fill-height;
             }
-
-            @if $tab-skin == 'fabric' {
-              height: $tab-nrml-fill-height - 2;
-            }
-
-            @if $tab-skin == 'highcontrast' {
-              height: $tab-nrml-fill-height - 4;
-            }
           }
 
           &.e-active {
-            padding: $tab-alt-nrml-active-item-padding;
+            padding: $tab-nrml-background-active-padding;
 
             .e-tab-wrap {
               margin-bottom: $tab-fill-nrml-active-item-wrap-margin-bottom;
             }
 
             .e-text-wrap {
-              height: $tab-nrml-fill-height;
+              height: $tab-nrml-fill-item-textwrap-height;
 
               @media screen and (max-width: 480px) {
                 height: $tab-mob-fill-height;
               }
-
-              @if $tab-skin == 'fabric' {
-                height: $tab-nrml-fill-height - 2;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                height: $tab-nrml-fill-height - 4;
-              }
             }
 
             .e-tab-text {
@@ -3705,13 +3406,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
               @media screen and (max-width: 480px) {
                 height: $tab-fill-big-active-it-text-container-height;
               }
-
-              @if $tab-skin == 'fabric' {
-                height: $tab-nrml-fill-height - 2;
-              }
-              @else if $tab-skin == 'highcontrast' {
-                height: $tab-nrml-fill-height - 4;
-              }
             }
           }
 
@@ -3760,19 +3454,11 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
               padding: 0;
 
               .e-text-wrap {
-                height: $tab-nrml-fill-height;
+                height: $tab-nrml-fill-item-textwrap-height;
 
                 @media screen and (max-width: 480px) {
                   height: $tab-mob-fill-height;
                 }
-
-                @if $tab-skin == 'fabric' {
-                  height: $tab-nrml-fill-height - 2;
-                }
-
-                @if $tab-skin == 'highcontrast' {
-                  height: $tab-nrml-fill-height - 4;
-                }
               }
             }
 
@@ -3813,33 +3499,14 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             height: $tab-focus-nrml-fill-height;
 
             .e-text-wrap {
-              height: $tab-focus-nrml-fill-height;
-
-              @if $tab-skin == 'fabric' {
-                height: $tab-nrml-fill-height - 2;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                height: $tab-nrml-fill-height - 4;
-              }
+              height: $tab-nrml-fill-focused-wrap-height;
             }
           }
 
           &.e-active .e-tab-wrap:focus {
 
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              .e-text-wrap {
-                @if $tab-skin == 'fabric' {
-                  height: $tab-nrml-fill-height - 2;
-                }
-                @else if $tab-skin == 'highcontrast' {
-                  height: $tab-nrml-fill-height - 4;
-                }
-              }
-
-              .e-close-icon::before {
-                top: 1px;
-              }
+            .e-text-wrap {
+              height: $tab-nrml-fill-focused-wrap-height;
             }
           }
 
@@ -3878,34 +3545,17 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
       .e-tab-header {
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-          &::before {
-            display: none;
-          }
-        }
-
         .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
         .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
           margin: $tab-nrml-alt-first-item-margin;
-          padding: 0;
-          @if $tab-skin == 'tailwind' {
-            padding: 0 8px;
-          }
+          padding: $tab-nrml-background-active-padding;
         }
 
         .e-toolbar-item {
 
           &:not(.e-separator) {
-            margin: $tab-alt-item-margin;
-          }
-
-          &:hover {
-            @if $tab-skin == 'highcontrast' {
-              &.e-itop .e-text-wrap,
-              &.e-ibottom .e-text-wrap {
-                height: auto;
-              }
-            }
+            margin: 0;
+            padding: $tab-nrml-background-active-padding;
           }
 
           .e-tab-wrap {
@@ -3917,37 +3567,22 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
 
           &.e-active {
-            padding: $tab-alt-nrml-active-item-padding;
+            padding: $tab-nrml-background-active-padding;
 
             .e-tab-wrap {
               margin-bottom: $tab-bg-nrml-active-item-wrap-margin-bottom;
             }
 
-            .e-text-wrap {
-              height: $tab-nrml-height;
-
-              @if $tab-skin == 'fabric' {
-                height: $tab-nrml-height - 2;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                height: $tab-nrml-height - 4;
-              }
-            }
-
             .e-tab-text {
-              font-weight: $tab-light-font-weight;
+              font-weight: $tab-background-active-text-font-weight;
             }
           }
         }
 
         &.e-vertical {
 
-          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-
-            .e-indicator {
-              display: none;
-            }
+          .e-indicator {
+            display: $tab-nrml-background-vertical-indicator-display;
           }
 
           .e-toolbar-items {
@@ -3981,14 +3616,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             &.e-active {
 
               .e-text-wrap {
-                height: $tab-nrml-pop-item-height;
-
-                @if $tab-skin == 'fabric' {
-                  height: $tab-nrml-pop-item-height - 2;
-                }
-                @else if $tab-skin == 'highcontrast' {
-                  height: $tab-nrml-pop-item-height - 4;
-                }
+                height: $tab-nrml-pop-item-textwrap-height;
               }
             }
           }
@@ -4015,19 +3643,11 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           margin: $tab-nrml-rtl-item-margin;
         }
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-          .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child.e-active {
-            margin: $tab-nrml-rtl-item-margin;
-          }
-        }
-
         .e-toolbar-item:not(.e-separator) {
           margin: $tab-nrml-rtl-item-margin;
 
-          @if $tab-skin == 'FluentUI' {
-            .e-icon-right {
-              margin: $tab-rtl-nrml-it-text-margin;
-            }
+          .e-icon-right {
+            margin: $tab-nrml-rtl-icon-right-margin;
           }
 
           .e-icon-left + .e-tab-text {
@@ -4054,20 +3674,10 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
         }
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-          &.e-horizontal-bottom {
-
-            .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-separator) {
-              margin: 0 0 0 2px;
-
-              &.e-active {
-                margin: 0 0 0 2px;
+        &.e-horizontal-bottom {
 
-                .e-tab-text {
-                  margin-bottom: 0;
-                }
-              }
-            }
+          .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-separator) {
+            margin: $tab-nrml-vertical-rtl-active-margin;
           }
         }
 
@@ -4178,18 +3788,11 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
       align-content: center;
       align-items: center;
       display: inline-flex;
-      height: $tab-nrml-height;
+      height: $tab-nrml-item-text-wrap-height;
 
       @media screen and (max-width: 480px) {
         height: $tab-big-height;
       }
-
-      @if $tab-skin == 'fabric' {
-        height: $tab-nrml-height - 2;
-      }
-      @else if $tab-skin == 'highcontrast' {
-        height: $tab-nrml-height - 4;
-      }
     }
 
     .e-tab-text {
@@ -4198,18 +3801,13 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
       font-size: $tab-nrml-font-size;
       font-weight: $tab-font-weight;
       text-transform: $tab-text-transform;
+      align-self: auto;
 
       @media screen and (max-width: 480px) {
         font-size: $tab-big-font-size;
       }
     }
 
-    @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-      .e-tab-text {
-        align-self: auto;
-      }
-    }
-
     .e-icons.e-close-icon {
       display: none;
     }
@@ -4224,11 +3822,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
     }
 
     .e-close-icon::before {
-      top: $tab-pop-close-icon-top;
-
-      @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-        top: 1px;
-      }
+      top: 1px;
     }
 
     .e-icons.e-tab-icon {
@@ -4236,10 +3830,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
       height: $tab-nrml-icon-container-size;
       min-width: $tab-nrml-icon-container-size;
       width: $tab-nrml-icon-container-size;
-
-      @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-        line-height: $tab-nrml-icon-container-size;
-      }
+      line-height: $tab-nrml-item-tabicon-line-height;
 
       @media screen and (max-width: 480px) {
         height: $tab-mob-icon-container-size;
@@ -4268,13 +3859,11 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
       }
     }
 
-    @if $tab-skin == 'FluentUI' {
-      .e-icon-right {
-        margin: $tab-nrml-it-text-margin;
+    .e-icon-right {
+      margin: 0 0 0 8px;
 
-        @media screen and (max-width: 480px) {
-          margin: $tab-mob-it-text-margin;
-        }
+      @media screen and (max-width: 480px) {
+        margin: $tab-bgr-mob-item-iconright-margin;
       }
     }
 
@@ -4402,21 +3991,12 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
     }
 
     .e-text-wrap {
-      height: $tab-big-height;
-
-      @if $tab-skin == 'fabric' {
-        height: $tab-big-height - 2;
-      }
-      @else if $tab-skin == 'highcontrast' {
-        height: $tab-big-height - 4;
-      }
+      height: $tab-bgr-item-textwrap-height;
     }
 
     .e-tab-text {
       font-size: $tab-big-font-size;
-      @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-        align-self: auto;
-      }
+      align-self: auto;
     }
 
     .e-icons.e-close-icon {
@@ -4441,10 +4021,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
       height: $tab-big-icon-container-size;
       min-width: $tab-big-icon-container-size;
       width: $tab-big-icon-container-size;
-
-      @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-        line-height: $tab-big-icon-container-size;
-      }
+      line-height: $tab-bgr-icon-line-height;
     }
 
     .e-tab-icon,
@@ -4459,13 +4036,11 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
       }
     }
 
-    @if $tab-skin == 'FluentUI' {
-      .e-icon-right {
-        margin: $tab-big-it-text-margin;
+    .e-icon-right {
+      margin: 0 0 0 12px;
 
-        @media screen and (max-width: 480px) {
-          margin: $tab-mob-it-text-margin;
-        }
+      @media screen and (max-width: 480px) {
+        margin: $tab-bgr-mob-item-iconright-margin;
       }
     }
 
@@ -4500,17 +4075,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
       .e-close-icon {
         right: $tab-big-close-icon-top-bottom-right;
       }
-
-      @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-
-        .e-text-wrap {
-          height: auto;
-        }
-
-        &.e-active .e-tab-wrap {
-          height: 72px;
-        }
-      }
     }
 
     &.e-itop .e-tab-text {
@@ -4535,44 +4099,26 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
       background: inherit;
       border: 0;
       border-radius: 0;
+      box-shadow: none;
+      font-weight: $tab-header-font-weight;
+      border-bottom: $tab-header-border-bottom;
 
-      @if $tab-skin == 'FluentUI' {
-        box-shadow: none;
-      }
-
-      @if $tab-skin == 'tailwind' {
-        font-weight: $tab-font-weight;
+      &::before {
+        border-color: $tab-header-before-border-color;
+        border-style: solid;
       }
 
-      @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-
+      &:not(.e-vertical) {
         &::before {
-          border-color: $tab-hdr-bdr-color;
-          border-style: solid;
-        }
-
-        &:not(.e-vertical) {
-
-          &::before {
-            border-width: 0 0 1px;
-          }
-        }
-
-        &[style *= 'overflow: hidden'] {
-          border: 0;
+          border-width: $tab-header-before-border-width;
         }
       }
-      @else {
-        border-bottom: $tab-hdr-border;
-      }
 
       &:not(.e-vertical) {
 
         .e-toolbar-item.e-active {
-          border-bottom: $tab-active-item-hide-border;
-          @if $tab-skin == 'FluentUI' {
-            margin-bottom: $tab-item-wrap-border-radius;
-          }
+          border-bottom: $tab-item-active-border-bottom;
+          margin-bottom: 0;
         }
       }
 
@@ -4588,10 +4134,8 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         background: inherit;
         border: $tab-item-border;
 
-        @if $tab-skin == 'FluentUI' {
-          &:hover {
-            background: $tab-alt-hover-bg-color;
-          }
+        &:hover {
+          background: $tab-item-hover-bg;
         }
 
         .e-ripple-element {
@@ -4601,17 +4145,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         .e-tab-wrap {
           border-radius: $tab-active-item-border-radius;
           color: $tab-text-color;
-
-          @if $tab-skin == 'fabric' {
-            border: 1px solid $tab-wrap-border-color;
-          }
-          @else if $tab-skin == 'highcontrast' {
-            border: 2px solid $tab-wrap-border-color;
-          }
-
-          @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-            border: $tab-vscroll-nav-border;
-          }
+          border: $tab-item-wrap-border;
 
           .e-tab-icon {
             color: $tab-wrap-comb-icon-color;
@@ -4631,11 +4165,8 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           &:hover {
             background: $tab-item-hover-bg-color;
-
-            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-              border: 1px solid $tab-hover-border-color;
-              border-radius: $tab-top-active-item-border-radius;
-            }
+            border: $tab-item-wrap-hover-border;
+            border-radius: $tab-item-wrap-hover-border-radius;
 
             @media screen and (max-width: 480px) {
               background: $tab-mob-item-hover-bg-color;
@@ -4653,7 +4184,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           border-radius: $tab-top-active-item-border-radius;
 
           .e-tab-wrap {
-
+            border: $tab-item-active-tabwrap-border;
             &:hover {
 
               .e-tab-text,
@@ -4661,24 +4192,18 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
                 color: $tab-active-text-color;
               }
             }
-
-            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-              border: 0;
-            }
           }
 
           .e-text-wrap {
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              position: relative;
+            position: $tab-active-wrap-position;
 
-              &::before {
-                border: 1px solid $tab-active-line-color;
-                content: '';
-                display: block;
-                position: absolute;
-                top: 95%;
-                width: 100%;
-              }
+            &::before {
+              border: $tab-active-wrap-before-border;
+              content: $tab-active-wrap-before-content;
+              display: $tab-active-wrap-before-display;
+              position: $tab-active-wrap-before-position;
+              top: $tab-active-wrap-before-top;
+              width: $tab-active-wrap-before-width;
             }
           }
 
@@ -4754,48 +4279,28 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
             &:hover {
               background: $tab-hover-bg-color;
-
-              @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-                border-color: $tab-wrap-hover-border-color;
-              }
-
-              @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-                border: $tab-vscroll-nav-border;
-                border-radius: 0;
-              }
+              border: $tab-pop-wrap-hover-border;
+              border-radius: $tab-pop-wrap-hover-border-radius;
 
               .e-tab-text,
               .e-tab-icon,
               .e-close-icon {
                 color: $tab-hover-text-color;
               }
-              @if $tab-skin == 'FluentUI' {
-                .e-tab-icon,
-                .e-close-icon {
-                  color: $tab-comb-icon-color;
-                }
+
+              .e-tab-icon,
+              .e-close-icon {
+                color: $tab-pop-wrap-hover-close-color;
               }
             }
 
             &:active {
               background: $tab-active-bg-color;
+              border-color: $tab-pop-wrap-active-border-color;
 
-              @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-                border-color: $tab-wrap-active-border-color;
-              }
-              @if $tab-skin == 'highcontrast' {
-
-                .e-tab-text,
-                .e-tab-icon {
-                  color: $tab-wrap-active-color;
-                }
-              }
-              @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-
-                .e-tab-text,
-                .e-tab-icon {
-                  color: $tab-alt-active-text-color;
-                }
+              .e-tab-text,
+              .e-tab-icon {
+                color: $tab-pop-wrap-active-icon-font;
               }
             }
           }
@@ -4819,114 +4324,61 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
       .e-scroll-nav,
       .e-hscroll:not(.e-scroll-device) .e-scroll-nav {
-        @if $tab-skin != 'tailwind' {
-          background: inherit;
-        }
+        background: $tab-scroll-nav-bg;
         border: 0;
 
         .e-nav-arrow {
-          @if $tab-skin != 'FluentUI' {
-            color: $tab-nav-icon-color;
-          }
-
-          @if $tab-skin == 'fabric' {
-            border: 1px solid $tab-wrap-border-color;
-          }
-
-          @if $tab-skin == 'highcontrast' {
-            border: 2px solid $tab-wrap-border-color;
-          }
+          color: $tab-scroll-nav-arrow-font;
+          border: $tab-item-active-wrap-border;
 
           &:hover {
             background: $tab-hover-nav-bg-color;
             color: $tab-hover-nav-icon-color;
-
-            @if $tab-skin == 'highcontrast' {
-              border: 2px solid $tab-wrap-hover-border-color;
-            }
+            border: $tab-scroll-arrow-hover-border;
           }
 
           &:active {
             box-shadow: none;
-
-            @if $tab-skin == 'fabric' {
-              border: 1px solid $tab-wrap-active-border-color;
-            }
+            border: $tab-scroll-arrow-active-border;
           }
         }
 
         &:focus {
+          background: $tab-scroll-nav-bg;
 
           .e-nav-arrow {
             background: $tab-nav-focus-bg-color;
             color: $tab-nav-focus-icon-color;
-
-            @if $tab-skin == 'fabric' {
-              border: 1px solid $tab-wrap-focus-border-color;
-            }
-
-            @if $tab-skin == 'highcontrast' {
-              border: 2px solid $tab-wrap-focus-border-color;
-            }
+            border: $tab-scroll-focus-arrow-border;
 
             &:hover {
               background: $tab-hover-nav-bg-color;
               color: $tab-hover-nav-icon-color;
-
-              @if $tab-skin == 'highcontrast' {
-                border: 2px solid $tab-nav-focus-hover-border-color;
-              }
             }
 
             &:active {
-              @if $tab-skin == 'highcontrast' {
-                background: $tab-nav-focus-active-bg-color;
-                border-color: $tab-nav-focus-active-border-color;
-                color: $tab-nav-focus-active-color;
-              }
+              background: $tab-scroll-focus-arrow-active-bg;
+              border-color: $tab-scroll-focus-arrow-active-border-color;
+              color: $tab-scroll-focus-arrow-active-color;
             }
           }
-
-          @if $tab-skin == 'tailwind' {
-            background: $tab-nav-focus-bg-color;
-          }
         }
 
         &:active {
-
-          @if $tab-skin == 'bootstrap'  {
-            box-shadow: $tab-nav-active-box-shadow;
-          }
-
-          @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-            border: $tab-nav-pop-press-active-border;
-          }
-
-          @if $tab-skin == 'tailwind' {
-            background: $tab-active-bg-color;
-          }
+          box-shadow: none;
+          background: $tab-scroll-nav-bg;
+          border: $tab-scroll-active-border;
         }
 
         &.e-overlay {
 
           .e-nav-arrow {
-            @if $tab-skin != 'FluentUI' {
-              color: $tab-disable-nav-icon-color;
-            }
+            color: $tab-scroll-overlay-arrow-color;
 
             &:hover {
-              @if $tab-skin != 'FluentUI' {
-                color: $tab-disable-nav-icon-color;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                background: $tab-nav-disable-hover-bg-color;
-                border-color: $tab-nav-disable-hover-border-color;
-              }
-
-              @if $tab-skin == 'tailwind' {
-                background: $tab-pop-icon-hover-bg-color;
-              }
+              color: $tab-scroll-overlay-arrow-hover-color;
+              background: $tab-scroll-overlay-arrow-hover-bg;
+              border-color: $tab-scroll-overlay-arrow-hover-border-color;
             }
           }
         }
@@ -4940,18 +4392,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         .e-popup-up-icon,
         .e-popup-down-icon {
           color: $tab-pop-icon-color;
-
-          @if $tab-skin == 'fabric' {
-            border: 1px solid $tab-wrap-border-color;
-          }
-
-          @if $tab-skin == 'highcontrast' {
-            border: 2px solid $tab-wrap-border-color;
-          }
-
-          @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
-            border: $tab-active-text-item-border;
-          }
+          border: $tab-pop-icon-border;
 
           &:hover {
             background: $tab-pop-icon-hover-bg-color;
@@ -4964,15 +4405,11 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           &:hover {
             color: $tab-hover-nav-icon-color;
-
-            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-              border: $tab-active-text-item-border;
-            }
           }
         }
 
         &:focus {
-
+          background: $tab-pop-focus-bg;
           .e-popup-up-icon,
           .e-popup-down-icon {
             background: $tab-nav-focus-bg-color;
@@ -4987,112 +4424,83 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             }
 
             &:active {
-              background: $tab-pop-icon-hover-bg-color;
+              background: $tab-pop-focus-icon-active-bg;
+              color: $tab-pop-focus-icon-active-color;
               border: $tab-pop-up-icon-active-border;
               border-radius: $tab-active-item-border-radius;
               box-shadow: $tab-pop-border-box-shadow;
-
-              @if $tab-skin == 'highcontrast' {
-                background: $tab-nav-focus-active-bg-color;
-                color: $tab-nav-focus-active-color;
-              }
             }
           }
-
-          @if $tab-skin == 'tailwind' {
-            background: $tab-nav-focus-bg-color;
-          }
         }
 
         &:hover {
           border: 0;
+          background: $tab-pop-hover-bg;
 
           &:active {
             background: transparent;
           }
-
-          @if $tab-skin == 'tailwind' {
-            background: $tab-pop-icon-hover-bg-color;
-          }
         }
 
         &:active {
-
-          @if $tab-skin == 'bootstrap' {
-            box-shadow: $tab-nav-active-box-shadow;
-          }
-
-          @if $tab-skin == 'tailwind' {
-            background: $tab-active-bg-color;
-          }
+          box-shadow: none;
+          background: $tab-pop-focus-bg;
         }
 
         &.e-nav-active {
-          background: inherit;
-          border: 0;
+          background: $tab-pop-nav-active-bg;
+          border: $tab-pop-nav-active-border;
           box-shadow: none;
+          border-radius: $tab-pop-nav-active-border-radius;
 
-          @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-            background: $tab-nav-focus-bg-color;
-            border: $tab-nav-pop-press-active-border;
-            border-radius: $tab-active-item-border-radius;
+          .e-icons {
+            color: $tab-pop-active-icons-color;
           }
 
-          @if $tab-skin == 'highcontrast' {
-            .e-icons {
-              color: $tab-nav-pop-arrow-active-color;
-            }
-
-            &:focus {
-              border: $tab-nav-pop-arrow-active-focus-border;
-            }
+          &:focus {
+            border: $tab-pop-nav-active-border;
           }
         }
       }
 
       &.e-horizontal-bottom {
+        border-color: $tab-bottom-border-color;
+        border-style: solid;
+        border-width: $tab-bottom-border-width;
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-
-          &[style *= 'overflow: hidden'] {
-            border: 0;
-          }
-
-          &[style *= 'overflow: hidden'] .e-toolbar-items {
-            border-bottom: 0;
-            border-top: $tab-items-border;
-          }
+        &[style *= 'overflow: hidden'] {
+          border-color: $tab-bottom-border-color;
+          border-style: solid;
+          border-width: $tab-bottom-border-width;
         }
-        @else {
-          border-bottom: 0;
-          border-top: $tab-hdr-border;
+
+        &[style *= 'overflow: hidden'] .e-toolbar-items {
+          border-color: $tab-bottom-hidden-items-border-color;
+          border-style: solid;
+          border-width: $tab-bottom-hidden-items-border-width;
         }
 
         .e-toolbar-item {
 
-          &.e-active {
-            border-bottom: $tab-even-active-item-bottom-border-color;
+          .e-tab-wrap:hover {
+            border-radius: $tab-bottom-active-item-border-radius;
+          }
 
-            @if $tab-skin == 'FluentUI' {
-              margin-top: $tab-item-wrap-border-radius;
-            }
-            @else {
-              border-radius: $tab-bottom-active-item-border-radius;
-              border-top: $tab-active-item-hide-border;
-              border-top-color: $tab-active-item-border-color;
-            }
+          &.e-active {
+            border-color: $tab-bottom-active-border-color;
+            border-style: solid;
+            border-width: $tab-bottom-active-border-width;
+            margin-top: $tab-bottom-active-margin-top;
+            border-radius: $tab-bottom-active-item-border-radius;
           }
         }
       }
 
       &.e-vertical {
-
-        @if $tab-skin == 'tailwind' {
-          border-bottom: 0;
-        }
+        border-bottom: 0;
 
         &::before {
-          border-width: 0 1px 0 0;
+          border-width: $tab-vertical-before-border-width;
         }
 
         .e-toolbar-item {
@@ -5107,9 +4515,13 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           .e-toolbar-item {
 
+            .e-tab-wrap:hover {
+              border-radius: $tab-left-active-item-border-radius;
+            }
+
             &.e-active {
               border-radius: $tab-left-active-item-border-radius;
-              border-right: $tab-active-item-hide-border;
+              border-right: $tab-item-active-border-bottom;
             }
           }
         }
@@ -5118,8 +4530,12 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           .e-toolbar-item {
 
+            .e-tab-wrap:hover {
+              border-radius: $tab-right-active-item-border-radius;
+            }
+
             &.e-active {
-              border-left: $tab-active-item-hide-border;
+              border-left: $tab-item-active-border-bottom;
               border-radius: $tab-right-active-item-border-radius;
             }
           }
@@ -5151,13 +4567,10 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           &:hover {
             background: $tab-v-nav-hover-bg-color;
+            border-color: $tab-vertical-scroll-hover-border-color;
 
-            @if $tab-skin == 'highcontrast' {
-              border-color: $border-fg;
-
-              &:active:focus {
-                background: $selection-bg;
-              }
+            &:active:focus {
+              background: $tab-vertical-scroll-hover-active-bg;
             }
 
             .e-nav-arrow {
@@ -5175,10 +4588,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             &:hover:active {
 
               .e-nav-arrow {
-
-                @if $tab-skin == 'highcontrast' {
-                  color: $selection-font;
-                }
+                color: $tab-vertical-focus-active-arrow-color;
               }
             }
 
@@ -5202,9 +4612,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             &:hover {
               background: inherit;
               border: 0;
-              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                color: $gray-900;
-              }
+              color: $tab-vertical-pop-icon-hover-color;
             }
           }
 
@@ -5224,10 +4632,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
               }
 
               &:active {
-
-                @if $tab-skin == 'highcontrast' {
-                  color: $content-font;
-                }
+                color: $tab-vertical-pop-icon-active-color;
               }
             }
           }
@@ -5249,27 +4654,15 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
         .e-tab-wrap:focus {
           background: $tab-focus-bg-color;
-
-          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-            border-color: $tab-focused-wrap-focus-border-color;
-          }
-
-          @if $tab-skin == 'bootstrap5' {
-            border: 1px solid $tab-focused-wrap-focus-border-color;
-          }
-
-          @if $tab-skin == 'highcontrast' {
-            border-style: solid;
-          }
+          border: $tab-focused-wrap-focus-border;
 
           .e-tab-icon,
           .e-tab-text {
             color: $tab-focus-text-color;
           }
-          @if $tbar-skin == 'bootstrap5' or $tab-skin == 'FluentUI' {
-            .e-tab-icon {
-              color: $tab-comb-icon-color;
-            }
+
+          .e-tab-icon {
+            color: $tab-focused-wrap-focus-icon-color;
           }
         }
       }
@@ -5280,11 +4673,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           .e-nav-arrow {
             color: $tab-nav-focus-icon-color;
-
-            @if $tab-skin == 'highcontrast' {
-              background: inherit;
-              border: 2px solid $tab-focused-nav-focus-border-color;
-            }
           }
         }
       }
@@ -5296,11 +4684,8 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           .e-popup-up-icon,
           .e-popup-down-icon {
             color: $tab-nav-focus-icon-color;
-
-            @if $tab-skin == 'highcontrast' {
-              background: inherit;
-              border: 2px solid $tab-focused-nav-focus-border-color;
-            }
+            background: $tab-scroll-focused-nav-focus-icon-bg;
+            border: $tab-scroll-focused-nav-focus-icon-border;
           }
         }
       }
@@ -5310,14 +4695,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         .e-scroll-nav {
 
           &:focus {
-
-            @if $tab-skin == 'fabric' {
-              border-color: $neutral-secondary-alt;
-            }
-
-            @if $tab-skin == 'highcontrast' {
-              border-color: $tab-focused-nav-focus-border-color;
-            }
+            border-color: $tab-vertical-focused-nav-focus-border-color;
 
             .e-nav-arrow {
               border: 0;
@@ -5334,18 +4712,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           &:focus {
             outline: $tab-v-pop-focus-outline;
-
-            .e-popup-up-icon,
-            .e-popup-down-icon {
-
-              @if $tab-skin == 'fabric' {
-                border-color: $neutral-secondary-alt;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                border-color: $tab-focused-nav-focus-border-color;
-              }
-            }
           }
         }
       }
@@ -5386,14 +4752,12 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
       .e-tab-header {
         border-bottom: $tab-fill-hdr-border;
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-          .e-toolbar-items.e-hscroll {
-            border: 0;
-          }
+        .e-toolbar-items.e-hscroll {
+          border: 0;
         }
 
         .e-toolbar-item {
-          border: $tab-alt-item-border;
+          border: 0;
 
           .e-ripple-element {
             background: $tab-fill-ripple-bg-color;
@@ -5406,10 +4770,9 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             &:hover .e-tab-icon {
               color: $tab-hover-text-color;
             }
-            @if $tab-skin == 'FluentUI' {
-              &:hover .e-tab-icon {
-                color: $tab-comb-icon-color;
-              }
+
+            &:hover .e-tab-icon {
+              color: $tab-fill-wrap-hover-icon-color;
             }
           }
 
@@ -5423,10 +4786,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             .e-tab-wrap {
               background: $tab-fill-active-bg-color;
               border-radius: $tab-active-item-border-radius;
-
-              @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-                border-color: $tab-fill-active-wrap-border-color;
-              }
+              border-color: $tab-fill-active-tabwrap-border-color;
 
               &:hover .e-tab-text,
               &:hover .e-tab-icon {
@@ -5439,9 +4799,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             }
 
             .e-text-wrap::before {
-              @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-                border: 0;
-              }
+              border: $tab-fill-active-text-before-border;
             }
 
             .e-tab-text,
@@ -5454,12 +4812,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             }
 
             .e-close-icon:hover {
-              @if $tab-skin != 'tailwind' {
-                color: $tab-alt-active-hover-close-icon-color;
-              }
-              @if $tab-skin == 'bootstrap5' {
-                color: $tab-alt-active-close-icon-color;
-              }
+              color: $tab-fill-active-close-hover-color;
             }
           }
         }
@@ -5467,25 +4820,26 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         .e-toolbar-pop {
 
           .e-toolbar-item:active:hover {
-
-            @if $tab-skin == 'highcontrast' {
-              .e-tab-text,
-              .e-tab-icon {
-                color: $tab-fill-pop-item-active-hover-color;
-              }
+            .e-tab-text,
+            .e-tab-icon {
+              color: $tab-fill-pop-active-icon-color;
             }
           }
 
           .e-tab-wrap {
             &:hover {
-              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                background: $tab-active-bg-color;
+              background: $tab-fill-pop-wrap-hover-bg;
 
-                .e-tab-text,
-                .e-tab-icon,
-                .e-close-icon {
-                  color: $tab-alt-active-close-icon-color;
-                }
+              .e-tab-text {
+                color: $tab-fill-pop-wrap-hover-text-color;
+              }
+
+              .e-tab-icon {
+                color: $tab-fill-pop-wrap-hover-icon-color;
+              }
+
+              .e-close-icon {
+                color: $tab-fill-pop-wrap-hover-close-color;
               }
             }
           }
@@ -5583,21 +4937,14 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           &.e-active .e-tab-wrap:focus {
             background: $tab-fill-focus-bg-color;
+            border-color: $tab-fill-focused-active-tabwrap-focus-border-color;
 
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              border-color: $tab-fill-focused-active-wrap-focus-border-color;
-            }
-
-            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-
-              .e-tab-text,
-              .e-close-icon {
-                color: $tab-fill-focused-active-wrap-focus-color;
-              }
+            .e-tab-text {
+              color: $tab-fill-focused-active-wrap-focus-text-color;
             }
 
-            @if $tab-skin == 'highcontrast' {
-              border-style: solid;
+            .e-close-icon {
+              color: $tab-fill-focused-active-wrap-focus-close-color;
             }
 
             .e-tab-text,
@@ -5619,26 +4966,17 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           background: $tab-alt-item-bg-color;
         }
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-          .e-toolbar-items.e-hscroll {
-            border: 0;
-          }
+        .e-toolbar-items.e-hscroll {
+          border: 0;
         }
 
         .e-indicator {
           background: $tab-alt-border-color;
-
-          @if $tab-skin == 'tailwind' {
-            bottom: 1px;
-          }
+          bottom: $tab-background-indicator-bottom;
         }
 
         .e-toolbar-item {
-          border: $tab-alt-item-border;
-
-          @if $tab-skin == 'bootstrap5' {
-            margin: 0;
-          }
+          border: 0;
 
           .e-ripple-element {
             background: $tab-alt-ripple-bg-color;
@@ -5646,90 +4984,40 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
           .e-tab-wrap {
             background: $tab-alt-item-bg-color;
+            border-color: $tab-background-wrap-border-color;
 
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              border-color: $tab-alt-wrap-border-color;
-            }
-
-            .e-tab-text,
             .e-tab-icon,
             .e-close-icon {
               color: $tab-alt-text-color;
             }
 
-            @if $tab-skin != 'tailwind' {
-              .e-close-icon:hover {
-                color: $tab-alt-active-wrap-close-icon-color;
-              }
+            .e-tab-text {
+              color: $tab-background-text-color;
+            }
+
+            .e-close-icon:hover {
+              color: $tab-background-close-hover-color;
             }
 
             &:hover {
               background: $tab-bg-item-wrap-hover-bg-color;
+              background-color: $tab-background-wrap-hover-bg-color;
+              border-color: $tab-background-wrap-hover-border-color;
 
-              .e-tab-text,
-              .e-tab-icon {
-                color: $tab-alt-active-text-color;
-
-                @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-                  color: $tab-alt-wrap-hover-color;
-                }
-              }
-
-              @if $tab-skin == 'FluentUI' {
-                .e-tab-text,
-                .e-tab-icon,
-                .e-close-icon {
-                  color: $tab-alt-border-color;
-                }
-              }
-
-              @if $tab-skin == 'material' {
-                .e-close-icon {
-
-                  &:hover,
-                  &:active {
-                    color: $tab-alt-wrap-hover-close-icon-focus-or-active-color;
-                  }
-                }
-              }
-
-              @if $tab-skin == 'bootstrap' {
-                .e-tab-text,
-                .e-close-icon {
-                  color: $tab-alt-wrap-hover-color;
-                }
+              .e-tab-text {
+                color: $tab-background-wrap-hover-text-color;
               }
-              @if $tab-skin == 'bootstrap4' {
-                .e-tab-text {
-                  color: $tab-alt-wrap-hover-color;
-                }
 
-                .e-close-icon {
-                  color: $tab-close-icon-color;
-                }
-              }
-              @if $tab-skin == 'bootstrap5' {
-                .e-tab-text,
-                .e-close-icon {
-                  color: $tab-alt-active-text-color;
-                }
+              .e-tab-icon {
+                color: $tab-background-wrap-hover-icon-color;
               }
 
-              @if $tab-skin == 'highcontrast' {
-                background-color: $tab-alt-wrap-hover-bg-color;
-                border-color: $tab-alt-wrap-hover-border-color;
-
-                .e-tab-text,
-                .e-close-icon {
-                  color: $tab-alt-wrap-hover-color;
-                }
-
-                .e-close-icon {
+              .e-close-icon {
+                color: $tab-background-wrap-hover-close-color;
 
-                  &:hover,
-                  &:active {
-                    color: $tab-alt-wrap-hover-close-active-or-hover-color;
-                  }
+                &:hover,
+                &:active {
+                  color: $tab-background-close-hover-active-color;
                 }
               }
             }
@@ -5738,91 +5026,56 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           &.e-active {
             border: 0;
             margin: 0;
-            @if $tab-skin == 'FluentUI' {
-              background: $tab-alt-active-text-color;
-            }
+            background: $tab-background-active-bg;
 
             .e-tab-wrap {
+              background: $tab-background-active-wrap-bg;
+              border-color: $tab-background-active-wrap-border-color;
+              border-radius: $tab-background-active-wrap-border-radius;
+              border-style: solid;
+              border-width: $tab-background-active-wrap-border-width;
 
-              @if $tab-skin == 'FluentUI' {
-                .e-tab-text,
-                .e-tab-icon,
-                .e-close-icon {
-                  color: $tab-fill-active-bg-color;
-                }
+              .e-tab-text {
+                color: $tab-background-active-text-color;
               }
 
-              @if $tab-skin == 'bootstrap5' {
-                background: $tab-active-item-border-color;
-                border-color: $tab-alt-active-bg-color;
-                border-radius: $tab-top-active-item-border-radius;
-                border-style: solid;
-                border-width: 2px 2px 0;
-              }
-              @else {
-                background: $tab-alt-active-bg-color;
-                border-radius: $tab-active-item-border-radius;
+              .e-tab-icon {
+                color: $tab-background-active-icon-color;
               }
 
-              @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-                border-color: $tab-alt-active-wrap-border-color;
+              .e-close-icon {
+                color: $tab-background-active-close-color;
               }
 
               &:hover {
+                background: $tab-background-active-hover-bg;
+                border-color: $tab-background-active-hover-border-color;
+                .e-tab-text {
+                  color: $tab-background-active-hover-text-color;
+                }
 
-                .e-tab-text,
                 .e-tab-icon {
-                  color: $tab-alt-active-text-color;
-                  @if $tab-skin == 'FluentUI' {
-                    color: $tab-fill-active-bg-color;
-                  }
+                  color: $tab-background-active-hover-icon-color;
                 }
 
-                @if $tab-skin == 'bootstrap5' {
-                  .e-tab-text,
-                  .e-close-icon {
-                    color: $tab-active-text-color;
-                  }
-                }
+                .e-close-icon {
+                  color: $tab-background-active-hover-close-color;
 
-                @if $tab-skin == 'fabric' {
-                  background: $tab-alt-active-wrap-hover-bg-color;
-                }
+                  &:hover {
+                    color: $tab-background-active-close-hover-color;
+                  }
 
-                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
-                  .e-close-icon {
-                    color: $tab-alt-active-wrap-hover-close-color;
+                  &:active {
+                    color: $tab-background-activeitem-close-active-color;
                   }
                 }
 
-                @if $tab-skin == 'highcontrast' {
-                  background: $tab-alt-active-wrap-hover-bg-color;
-                  border-color: $tab-alt-active-wrap-hover-border-color;
+                &:focus {
+                  background: $tab-background-active-wrap-focus-bg;
 
                   .e-tab-icon,
-                  .e-tab-text,
-                  .e-close-icon {
-                    color: $tab-alt-active-wrap-hover-color;
-                  }
-
-                  .e-close-icon {
-
-                    &:hover,
-                    &:active {
-                      color: $tab-alt-active-wrap-hover-close-hover-or-active-color;
-                    }
-                  }
-
-                  &:focus {
-                    background: $tab-alt-active-wrap-hover-focus-bg-color;
-
-                    .e-tab-icon,
-                    .e-tab-text {
-                      color: $tab-alt-active-wrap-hover-focus-color;
-                      @if $tab-skin == 'FluentUI' {
-                        color: $tab-fill-active-bg-color;
-                      }
-                    }
+                  .e-tab-text {
+                    color: $tab-background-active-wrap-focus-text-color;
                   }
                 }
               }
@@ -5830,78 +5083,40 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
               &:focus {
                 background: $tab-alt-active-focus-bg-color;
 
-                @if $tab-skin == 'bootstrap5' {
-                  background-color: $tab-active-item-border-color;
-                }
-
                 .e-tab-text,
                 .e-tab-icon {
-                  color: $tab-alt-active-text-color;
-                  @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                    color: $tab-alt-active-hover-text-color;
-                  }
-                  @if $tab-skin == 'FluentUI' {
-                    color: $tab-fill-active-bg-color;
-                  }
+                  color: $tab-background-active-wrap-focus-icon;
                 }
               }
 
               &:focus:hover {
 
-                @if $tab-skin == 'bootstrap5' {
-                  .e-tab-text,
-                  .e-close-icon {
-                    color: $tab-active-text-color;
-                  }
+                .e-tab-text {
+                  color: $tab-background-active-wrap-focushover-text-color;
                 }
 
-                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
-
-                  .e-tab-text,
-                  .e-close-icon {
-                    color: $tab-alt-active-text-color;
-                  }
+                .e-close-icon {
+                  color: $tab-background-active-wrap-focushover-close-color;
                 }
               }
             }
 
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              .e-text-wrap::before {
-                border: 0;
-              }
+            .e-text-wrap::before {
+              border: $tab-nrml-bottom-wrap-before-top;
             }
 
             .e-tab-text,
             .e-tab-icon {
-              color: $tab-alt-active-text-color;
-              @if $tab-skin == 'FluentUI' {
-                color: $tab-fill-active-bg-color;
-              }
+              color: $tab-background-active-text-icon-color;
             }
 
             .e-close-icon {
-              color: $tab-alt-active-close-icon-color;
-              @if $tab-skin == 'FluentUI' {
-                color: $tab-fill-active-bg-color;
-              }
-            }
-
-            .e-close-icon:hover {
-              @if $tab-skin != 'tailwind' {
-                color: $tab-alt-active-hover-close-icon-color;
-                @if $tab-skin == 'FluentUI' {
-                  color: $tab-fill-active-bg-color;
-                }
-              }
+              color: $tab-background-active-close-icon-color;
             }
 
-            @if $tab-skin == 'bootstrap5' {
-              .e-close-icon:hover,
-              .e-tab-text:hover,
-              .e-close-icon,
-              .e-tab-text {
-                color: $tab-active-text-color;
-              }
+            .e-close-icon:hover,
+            .e-tab-text:hover {
+              color: $tab-background-active-close-text-hover-color;
             }
 
             &.e-itop .e-tab-wrap,
@@ -5927,53 +5142,32 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             .e-tab-wrap {
 
               .e-tab-text,
-              .e-tab-icon {
-                color: $tab-alt-text-color;
-              }
-
-              @if $tab-skin == 'FluentUI' {
-                .e-tab-text,
-                .e-tab-icon,
-                .e-close-icon {
-                  color: $tab-bg-nav-focus-icon-color;
-                }
+              .e-tab-icon,
+              .e-close-icon {
+                color: $tab-background-pop-text-color;
               }
 
               &:hover {
-                background: $tab-alt-hover-bg-color;
-
-                @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                  background: $tab-active-bg-color;
-                }
+                background: $tab-background-pop-wrap-hover-bg;
 
                 .e-tab-text,
                 .e-tab-icon,
                 .e-close-icon {
-                  color: $tab-alt-active-text-color;
-
-                  @if $tab-skin == 'fabric' or $tab-skin == 'bootstrap' or $tab-skin == 'highcontrast' {
-                    color: $tab-alt-pop-wrap-hover-color;
-                  }
-                  @if $tab-skin == 'FluentUI' {
-                    color: $tab-alt-active-style-hover-text-color;
-                  }
+                  color: $tab-background-pop-wrap-hover-text-color;
                 }
               }
 
               &:active {
-                @if $tab-skin == 'highcontrast' {
-                  background: $tab-alt-pop-wrap-active-bg-color;
+                .e-tab-text {
+                  color: $tab-background-pop-wrap-active-text-color;
+                }
 
-                  .e-tab-text,
-                  .e-close-icon {
-                    color: $tab-alt-pop-wrap-active-color;
-                  }
+                .e-tab-icon {
+                  color: $tab-background-pop-wrap-active-icon-color;
                 }
-                @if $tab-skin == 'bootstrap4' {
-                  .e-tab-text,
-                  .e-tab-icon {
-                    color: $primary-font;
-                  }
+
+                .e-close-icon {
+                  color: $tab-background-pop-wrap-active-close-color;
                 }
               }
             }
@@ -5982,46 +5176,21 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
         .e-hscroll:not(.e-scroll-device) .e-scroll-nav,
         .e-scroll-nav {
-          @if $tab-skin == 'FluentUI' {
-            background: $tab-alt-active-wrap-hover-close-color;
-          }
+          background: $tab-background-scroll-bg;
 
           .e-nav-arrow {
             color: $tab-alt-nav-icon-color;
-
-            @if $tab-skin == 'fabric' {
-              border: 1px solid $tab-alt-nav-border-color;
-            }
-
-            @if $tab-skin == 'highcontrast' {
-              border: 2px solid $tab-alt-nav-border-color;
-            }
+            border: $tab-background-scroll-arrow-border;
 
             &:hover {
-              background: $tab-bg-hover-nav-bg-color;
-              @if $tab-skin == 'FluentUI' {
-                background: $tab-item-wrap-hover-bg-color;
-              }
+              background: $tab-background-scroll-arrow-hover-bg;
               color: $tab-bg-hover-nav-icon-color;
-
-              @if $tab-skin == 'highcontrast' {
-                border-color: $tab-alt-nav-hover-border-color;
-                color: $tab-alt-nav-hover-color;
-              }
+              border-color: $tab-background-scroll-arrow-hover-border-color;
             }
 
             &:active {
-
-              @if $tab-skin == 'highcontrast' {
-                background: $tab-alt-nav-active-bg-color;
-                color: $tab-alt-nav-active-color;
-              }
-
-              .e-icons {
-                @if $tab-skin == 'highcontrast' {
-                  color: $tab-alt-nav-active-color;
-                }
-              }
+              background: $tab-background-scroll-arrow-active-bg;
+              color: $tab-background-scroll-arrow-active-color;
             }
           }
 
@@ -6029,32 +5198,18 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
             .e-nav-arrow {
               color: $tab-bg-hover-nav-icon-color;
-
-              @if $tab-skin == 'fabric' {
-                border: 1px solid $tab-nav-focus-border-color;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                background: transparent;
-                border: 2px solid $tab-alt-nav-focus-border-color;
-              }
+              border: $tab-background-scroll-focus-arrow-border;
+              background: $tab-background-scroll-focus-arrow-bg;
 
               &:hover {
                 background: $tab-bg-hover-nav-bg-color;
                 color: $tab-bg-hover-nav-icon-color;
-
-                @if $tab-skin == 'highcontrast' {
-                  border: 2px solid $tab-nav-focus-hover-border-color;
-                  color: $tab-alt-nav-focus-hover-color;
-                }
               }
 
               &:active {
-                @if $tab-skin == 'highcontrast' {
-                  background: $tab-nav-focus-active-bg-color;
-                  border-color: $tab-nav-focus-active-border-color;
-                  color: $tab-nav-focus-active-color;
-                }
+                background: $tab-background-nav-focus-active-bg;
+                border-color: $tab-background-nav-focus-active-border-color;
+                color: $tab-background-nav-focus-active-color;
               }
             }
           }
@@ -6062,69 +5217,27 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           &:active::after {
             @include hscroll-alt-btn-animation-after;
           }
-
-          &.e-overlay {
-            @if $tab-skin == 'FluentUI' {
-              .e-nav-arrow {
-                color: $tab-alt-nav-icon-color;
-              }
-            }
-          }
         }
 
         .e-hor-nav:not(.e-expended-nav),
         .e-hor-nav {
-          @if $tab-skin == 'FluentUI' {
-            background: $tab-border-color;
-          }
+          background: $tab-background-hor-nav-bg;
 
           .e-popup-up-icon,
           .e-popup-down-icon {
-            color: $tab-alt-nav-icon-color;
-            @if $tab-skin == 'FluentUI' {
-              color: $tab-alt-border-color;
-            }
-
-            @if $tab-skin == 'fabric' {
-              border: 1px solid $tab-alt-nav-border-color;
-            }
-
-            @if $tab-skin == 'highcontrast' {
-              border: 2px solid $tab-alt-nav-border-color;
-            }
+            color: $tab-background-pop-icon-color;
+            border: $tab-background-pop-icon-border;
 
             &:hover {
-              background: $tab-bg-hover-nav-bg-color;
+              background: $tab-background-pop-icon-hover-bg;
+              border-color: $tab-background-pop-icon-hover-border-color;
               color: $tab-bg-hover-nav-icon-color;
-
-              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                background: $tab-alt-nav-hover-bg-color;
-              }
-
-              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                background: $tab-pop-icon-hover-bg-color;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                border-color: $tab-alt-nav-hover-border-color;
-                color: $tab-alt-nav-hover-color;
-              }
             }
 
             &:active {
-
-              .e-icons {
-                @if $tab-skin == 'highcontrast' {
-                  color: $tab-alt-nav-active-color;
-                }
-              }
-
               &:hover {
-
-                @if $tab-skin == 'highcontrast' {
-                  background: $tab-alt-nav-active-bg-color;
-                  color: $tab-alt-nav-active-color;
-                }
+                background: $tab-background-pop-active-hover-bg;
+                color: $tab-background-pop-active-hover-color;
               }
             }
           }
@@ -6134,34 +5247,17 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
             .e-popup-up-icon,
             .e-popup-down-icon {
               color: $tab-bg-hover-nav-icon-color;
-              @if $tab-skin == 'FluentUI' {
-                background: $tab-item-wrap-hover-bg-color;
-              }
-
-              @if $tab-skin == 'fabric' {
-                border: 1px solid $tab-nav-focus-border-color;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                background: $tab-alt-nav-focus-bg-color;
-                border: 2px solid $tab-alt-nav-focus-border-color;
-              }
+              background: $tab-background-focus-pop-bg;
+              border: $tab-background-focus-pop-border;
 
               &:hover {
-
-                @if $tab-skin == 'highcontrast' {
-                  background: $tab-alt-nav-focus-hover-bg-color;
-                  border: 2px solid $tab-nav-focus-hover-border-color;
-                  color: $tab-alt-nav-focus-hover-color;
-                }
+                background: $tab-background-focus-pop-hover-bg;
               }
 
               &:active {
-                @if $tab-skin == 'highcontrast' {
-                  background: $tab-nav-focus-active-bg-color;
-                  border-color: $tab-nav-focus-active-border-color;
-                  color: $tab-nav-focus-active-color;
-                }
+                background: $tab-background-popicon-focus-active-bg;
+                border-color: $tab-background-popicon-focus-active-border-color;
+                color: $tab-background-popicon-focus-active-color;
               }
             }
           }
@@ -6171,67 +5267,56 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
           }
 
           &.e-nav-active {
-            @if $tab-skin == 'FluentUI' {
-              background: $tab-fill-active-bg-color;
-            }
-
             .e-popup-up-icon {
               color: $tab-bg-hover-nav-icon-color;
             }
-
-            @if $tab-skin == 'FluentUI' {
-              .e-popup-up-icon,
-              .e-popup-down-icon {
-                color: $tab-alt-active-text-color;
-              }
-            }
           }
         }
 
-        @if $tab-skin == 'bootstrap5' {
-          &.e-horizontal-bottom {
-            .e-toolbar-item.e-active {
-              border: 0;
-              margin: 0;
+        &.e-horizontal-bottom {
+          .e-toolbar-item.e-active {
+            border: 0;
+            margin: 0;
 
-              .e-tab-wrap {
-                border-color: $tab-alt-active-bg-color;
-                border-radius: 0 0 4px 4px;
-                border-style: solid;
-                border-width: 0 2px 2px;
-              }
+            .e-tab-wrap {
+              border-color: $tab-background-bottom-active-wrap-border-color;
+              border-radius: $tab-background-bottom-active-wrap-border-radius;
+              border-style: solid;
+              border-width: $tab-background-bottom-active-wrap-border-width;
             }
           }
         }
 
         &.e-vertical {
 
-          @if $tab-skin == 'bootstrap5' {
-            &.e-vertical-left {
-              .e-toolbar-item.e-active {
-                border: 0;
-                margin: 0;
+          &.e-vertical-left {
+            .e-toolbar-item.e-active {
+              border-color: $tab-background-vertical-left-active-border-color;
+              border-style: solid;
+              border-width: $tab-background-vertical-left-active-border-width;
+              margin: 0;
 
-                .e-tab-wrap {
-                  border-color: $tab-alt-active-bg-color;
-                  border-radius: 4px 0 0 4px;
-                  border-style: solid;
-                  border-width: 2px 0 2px 2px;
-                }
+              .e-tab-wrap {
+                border-color: $tab-background-bottom-active-wrap-border-color;
+                border-radius: $tab-background-vertical-left-active-wrap-border-radius;
+                border-style: solid;
+                border-width: $tab-background-vertical-left-active-wrap-border-width;
               }
             }
+          }
 
-            &.e-vertical-right {
-              .e-toolbar-item.e-active {
-                border: 0;
-                margin: 0;
+          &.e-vertical-right {
+            .e-toolbar-item.e-active {
+              border-color: $tab-background-vertical-left-active-border-color;
+              border-style: solid;
+              border-width: $tab-background-vertical-right-active-border-width;
+              margin: 0;
 
-                .e-tab-wrap {
-                  border-color: $tab-alt-active-bg-color;
-                  border-radius: 0 4px 4px 0;
-                  border-style: solid;
-                  border-width: 2px 2px 2px 0;
-                }
+              .e-tab-wrap {
+                border-color: $tab-background-bottom-active-wrap-border-color;
+                border-radius: $tab-background-vertical-right-active-wrap-border-radius;
+                border-style: solid;
+                border-width: $tab-background-vertical-right-active-wrap-border-width;
               }
             }
           }
@@ -6334,12 +5419,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
       &.e-accent .e-tab-header {
 
         .e-indicator {
-          background: $tab-border-color;
-
-          @if $tab-skin == 'tailwind' {
-            background: $tab-alt-border-color;
-            bottom: 1px;
-          }
+          background: $tab-background-accent-indicator-bg;
         }
 
         &.e-disable {
@@ -6355,109 +5435,68 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
         .e-toolbar-item {
 
           .e-tab-wrap:focus {
-
-            @if $tab-skin == 'material' or $tab-skin == 'bootstrap' {
-              background: $tab-alt-hover-bg-color;
-            }
-
-            @if $tab-skin == 'FluentUI' {
-              background: $tab-item-wrap-hover-bg-color;
-            }
-
-            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-              border-color: $tab-wrap-focus-border-color;
-            }
-
-            @if $tab-skin == 'highcontrast' {
-              border-style: solid;
-            }
-
-            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-              background: $tab-active-bg-color;
-            }
+            background: $tab-background-focused-wrap-focus-bg;
+            border-color: $tab-background-focused-wrap-focus-border-color;
 
             .e-tab-icon,
             .e-tab-text,
             .e-close-icon {
-              color: $tab-alt-text-color;
-              @if $tab-skin == 'FluentUI' {
-                color: $tab-alt-border-color;
-              }
+              color: $tab-background-focused-wrap-focus-close-color;
             }
           }
 
           &.e-active {
 
             .e-tab-wrap:focus {
-
-              @if $tab-skin == 'material' or $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                background: $tab-key-alt-active-focus-bg-color;
-              }
-
-              @if $tab-skin == 'FluentUI' {
-                background: $tab-alt-active-text-color;
-              }
-
-              @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
-                border-color: $tab-alt-focused-active-wrap-focus-border-color;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                border-style: solid;
-              }
+              background: $tab-background-focused-active-wrap-focus-bg;
+              border-color: $tab-background-focused-active-wrap-focus-border-color;
             }
 
             .e-tab-wrap:focus .e-tab-text,
             .e-tab-wrap:focus .e-tab-icon {
-              color: $tab-alt-active-hover-text-color;
-              @if $tab-skin == 'FluentUI' {
-                color: $tab-fill-active-bg-color;
-              }
+              color: $tab-background-focused-active-wrap-icon-color;
             }
 
             .e-tab-wrap:hover {
+              background: $tab-background-focused-active-wrap-hover-bg;
+              border: $tab-background-focused-active-wrap-hover-border;
+              border-radius: $tab-background-focused-active-wrap-hover-border-radius;
+            }
 
-              @if $tab-skin == 'fabric' {
-                background: $tab-alt-focused-active-wrap-hover-bg-color;
+            .e-tab-wrap:focus {
+              .e-tab-text {
+                color: $tab-background-focused-active-wrap-focus-text-color;
               }
 
-              @if $tab-skin == 'FluentUI' {
-                background: $tab-alt-active-text-color;
+              .e-tab-icon {
+                color: $tab-background-focused-active-wrap-focus-icon-color;
               }
 
-              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                border: 1px solid $tab-hover-border-color;
-                border-radius: $tab-top-active-item-border-radius;
+              .e-close-icon {
+                color: $tab-background-focused-active-wrap-focus-close-color;
               }
             }
 
-            .e-tab-wrap:focus,
             .e-tab-wrap:hover {
+              .e-tab-text {
+                color: $tab-background-focused-active-wrap-hover-text-color;
+              }
 
-              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                .e-tab-text,
-                .e-close-icon {
-                  color: $tab-alt-focused-active-wrap-focus-or-hover-color;
-                }
+              .e-tab-icon {
+                color: $tab-background-focused-active-wrap-hover-icon-color;
               }
 
-              @if $tab-skin == 'FluentUI' {
-                .e-tab-text,
-                .e-tab-icon,
-                .e-close-icon {
-                  color: $tab-fill-active-bg-color;
-                }
+              .e-close-icon {
+                color: $tab-background-focused-active-wrap-hover-close-color;
               }
             }
 
             .e-tab-wrap:focus:hover {
-
-              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-
-                .e-tab-text,
-                .e-close-icon {
-                  color: $tab-alt-focused-active-wrap-focus-and-hover-color;
-                }
+              .e-tab-text {
+                color: $tab-background-focused-active-focus-hover-text-color;
+              }
+              .e-close-icon {
+                color: $tab-background-focused-active-focus-hover-close-color;
               }
             }
 
@@ -6514,11 +5553,8 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
       .e-item {
         background: inherit;
         color: $tab-content-font-color;
-
-        @if $tab-skin == 'tailwind' {
-          font-size: $tab-nrml-font-size;
-          line-height: $tab-nrml-text-wrap-height;
-        }
+        font-size: $tab-content-font-size;
+        line-height: $tab-content-line-height;
       }
     }
   }
@@ -6530,17 +5566,7 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
     .e-tab-wrap {
       border-radius: $tab-active-item-border-radius;
       color: $tab-clone-text-color;
-
-      @if $tab-skin == 'fabric' {
-        border: 1px $tab-wrap-border-color;
-      }
-      @else if $tab-skin == 'highcontrast' {
-        border: 2px $tab-wrap-border-color;
-      }
-
-      @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-        border: $tab-vscroll-nav-border;
-      }
+      border: $tab-clone-item-wrap-border;
 
       .e-tab-icon {
         color: $tab-clone-text-color;
@@ -6557,44 +5583,18 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
     .e-tab-header {
 
-      .e-toolbar-items.e-hscroll.e-rtl {
-
-        .e-nav-left-arrow::before {
-          content: '\e913';
-        }
-
-        .e-nav-right-arrow::before {
-          content: '\e904';
-        }
-      }
-
-      .e-scroll-nav {
-
-        .e-nav-left-arrow::before {
-          content: '\e904';
-        }
-
-        .e-nav-right-arrow::before {
-          content: '\e913';
-        }
-      }
-
       .e-close-icon::before {
         content: '\e7fc';
         position: relative;
       }
 
       .e-popup-up-icon::before {
-        content: '\e916';
-
         @media screen and (max-width: 480px) {
           content: '\e984';
         }
       }
 
       .e-popup-down-icon::before {
-        content: '\e916';
-
         @media screen and (max-width: 480px) {
           content: '\e984';
         }
@@ -6619,17 +5619,6 @@ $tbar-alt-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(0, 0, 0, .12) !def
 
       .e-tab-header {
 
-        .e-scroll-nav {
-
-          .e-nav-up-arrow::before {
-            content: '\e910';
-          }
-
-          .e-nav-down-arrow::before {
-            content: '\e916';
-          }
-        }
-
         .e-popup-up-icon {
 
           &::before {