@syncfusion/ej2-navigations 16.4.47 → 16.4.52-46585

package/styles/tab/_layout.scss

@@ -1,8 +1,9 @@
 @include export-module('tab-layout') {
+
   /*! tab layout */
 
-  .e-bigger #{&}.e-tab,
-  #{&}.e-tab.e-bigger {
+  .e-bigger .e-tab,
+  .e-tab.e-bigger {
 
     .e-tab-header {
       height: $tab-big-height;
@@ -12,11 +13,6 @@
         height: auto;
         min-height: auto;
 
-        @if $skin-name == 'bootstrap' {
-          height: $tab-big-height;
-          min-height: $tab-big-height;
-        }
-
         &:not(.e-tbar-pos) .e-toolbar-item:first-child,
         &:not(.e-tbar-pos) .e-toolbar-item:last-child {
           margin: $tab-big-first-item-margin;
@@ -34,10 +30,8 @@
           }
         }
 
-        .e-indicator + .e-toolbar-item:nth-last-child(1).e-active {
-          @if $skin-name == 'bootstrap' {
-            margin: 1px 2px 0 0;
-          }
+        .e-indicator + .e-toolbar-item:last-child.e-active {
+          margin: $tab-bgr-active-last-margin;
         }
       }
 
@@ -56,7 +50,7 @@
         }
 
         .e-scroll-nav {
-          width: 50px;
+          width: $tab-bgr-hscroll-items-nav-width;
         }
       }
 
@@ -90,21 +84,17 @@
         }
 
         .e-text-wrap {
-          height: $tab-big-height;
-
-          @if $skin-name == 'fabric' {
-            height: $tab-big-height - 2;
-          }
-          @else if $skin-name == 'highcontrast' {
-            height: $tab-big-height - 4;
-          }
+          height: $tab-bgr-item-textwrap-height;
         }
 
         .e-tab-text {
           font-size: $tab-big-font-size;
-          @if $skin-name == 'fabric' or $skin-name == '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 {
@@ -115,43 +105,19 @@
             margin: $tab-mob-boot-item-margin;
           }
 
-          @if $skin-name == 'bootstrap' {
-            &.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 $skin-name == 'fabric' {
-              height: $tab-big-height - 2;
-            }
-            @else if $skin-name == '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 $skin-name == 'fabric' {
-              height: $tab-big-height - 2;
-            }
-            @else if $skin-name == 'highcontrast' {
-              height: $tab-big-height - 4;
-            }
-          }
-
-          &.e-ileft .e-text-wrap {
-            padding: $tab-big-ileft-active-text-wrap-padding;
-
-            @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-              padding: 0;
-            }
+            height: $tab-bgr-item-textwrap-height;
           }
         }
 
@@ -177,6 +143,7 @@
           height: $tab-big-icon-container-size;
           min-width: $tab-big-icon-container-size;
           width: $tab-big-icon-container-size;
+          line-height: $tab-bgr-icon-line-height;
         }
 
         .e-tab-icon,
@@ -191,6 +158,14 @@
           }
         }
 
+        .e-icon-right {
+          margin: 0 0 0 12px;
+
+          @media screen and (max-width: 480px) {
+            margin: $tab-bgr-mob-item-iconright-margin;
+          }
+        }
+
         .e-icon-left + .e-tab-text {
           margin: $tab-big-it-text-margin;
 
@@ -222,17 +197,6 @@
           .e-close-icon {
             right: $tab-big-close-icon-top-bottom-right;
           }
-
-          @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-
-            .e-text-wrap {
-              height: auto;
-            }
-
-            &.e-active .e-tab-wrap {
-              height: 72px;
-            }
-          }
         }
 
         &.e-itop .e-tab-text {
@@ -268,14 +232,7 @@
           }
 
           .e-text-wrap {
-            height: $tab-big-pop-item-height;
-
-            @if $skin-name == 'fabric' {
-              height:  $tab-big-pop-item-height - 2;
-            }
-            @else if $skin-name == 'highcontrast' {
-              height:  $tab-big-pop-item-height - 4;
-            }
+            height: $tab-bgr-pop-item-textwrap-height;
           }
 
           .e-tab-text + .e-close-icon[style = 'display:block'] {
@@ -374,12 +331,8 @@
           &::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 $skin-name == 'highcontrast' {
-              top: -2px;
-            }
           }
         }
       }
@@ -416,28 +369,14 @@
             @media screen and (max-width: 480px) {
               font-size: $tab-mob-nav-icon-size;
             }
-
-            @if $skin-name == 'highcontrast' {
-              top: -2px;
-            }
           }
 
           &:hover {
-            @if $skin-name == 'bootstrap' {
-              line-height: 42px;
-            }
+            line-height: $tab-bgr-hor-pop-lineheight;
 
             &::before {
-              top: $tab-big-hover-nav-pop-icon-top;
-
-              @if $skin-name == 'bootstrap' {
-                line-height: 42px;
-                top: .5px;
-              }
-
-              @if $skin-name == 'highcontrast' {
-                top: -2px;
-              }
+              line-height: $tab-bgr-hor-pop-lineheight;
+              top: 0;
             }
           }
         }
@@ -446,27 +385,16 @@
 
           .e-popup-up-icon,
           .e-popup-down-icon {
-            @if $skin-name == 'bootstrap' {
-              line-height: 42px;
-            }
+            line-height: $tab-bgr-hor-pop-lineheight;
 
             &::before {
-              top: $tab-big-hover-nav-pop-icon-top;
-
-              @if $skin-name == 'bootstrap' {
-                line-height: 42px;
-              }
-
-              @if $skin-name == 'highcontrast' {
-                top: -2px;
-              }
+              line-height: $tab-bgr-hor-pop-lineheight;
+              top: 0;
             }
 
             &:hover {
-              @if $skin-name == 'bootstrap' {
-                line-height: 42px;
-                top: -2px;
-              }
+              line-height: $tab-bgr-hor-pop-lineheight;
+              top: $tab-bgr-hor-focus-pop-hover-top;
             }
           }
         }
@@ -486,7 +414,7 @@
         }
       }
 
-      &:nth-child(even) {
+      &.e-horizontal-bottom {
 
         .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child.e-active {
           margin: $tab-big-even-last-item-margin;
@@ -506,20 +434,13 @@
               padding-top: $tab-big-even-boot-active-item-padding-bottom;
             }
 
-            @if $skin-name == 'bootstrap' {
-              .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;
             }
           }
 
@@ -531,15 +452,12 @@
               margin: $tab-mob-even-last-item-margin;
             }
 
-            @if $skin-name == 'bootstrap' {
-
-              .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;
             }
           }
 
@@ -549,17 +467,6 @@
             padding-top: 0;
           }
 
-          &.e-itop.e-active .e-tab-wrap:focus,
-          &.e-ibottom.e-active .e-tab-wrap:focus {
-
-            @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-
-              .e-icon-close::before {
-                top: -1px;
-              }
-            }
-          }
-
           &.e-ileft.e-active .e-text-wrap {
             margin: $tab-big-even-ileft-active-text-wrap-margin;
           }
@@ -567,22 +474,6 @@
           &.e-active .e-text-wrap {
             height: $tab-big-even-active-text-container-height;
             padding: 0;
-
-            @if $skin-name == 'fabric' {
-              height: $tab-big-height - 2;
-            }
-            @else if $skin-name == '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 $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-              height: auto;
-            }
           }
 
           &.e-itop.e-active .e-text-wrap,
@@ -591,13 +482,7 @@
           }
 
           &.e-ileft.e-active {
-
-            @if $skin-name == 'fabric' {
-              height: $tab-big-height - 2;
-            }
-            @else if $skin-name == 'highcontrast' {
-              height: $tab-big-height - 4;
-            }
+            height: $tab-big-even-active-text-container-height;
           }
         }
       }
@@ -605,7 +490,7 @@
       &.e-vertical {
         max-width: 150px;
 
-        &[style*= 'overflow: hidden']::before {
+        &[style *= 'overflow: hidden']::before {
           bottom: $tab-big-vertical-scroll-nav-top-bottom;
           top: $tab-big-vertical-scroll-nav-top-bottom;
 
@@ -644,12 +529,9 @@
             }
           }
 
-          @if $skin-name == 'fabric' or $skin-name == '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;
           }
         }
 
@@ -694,26 +576,14 @@
 
     &.e-vertical-icon {
 
-      .e-tab-header {
+      > .e-tab-header {
         height: $tab-big-tb-icon-height;
         min-height: $tab-big-tb-icon-height;
 
-        .e-toolbar-items {
+        > .e-toolbar-items {
           height: $tab-big-tb-icon-height;
         }
 
-        .e-toolbar-item.e-active,
-        .e-toolbar-item:not(.e-separator):last-child.e-active {
-
-          @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-
-            .e-text-wrap::before {
-              bottom: -10px;
-              top: auto;
-            }
-          }
-        }
-
         .e-scroll-nav {
           height: $tab-big-icon-top-bottom-item-height;
         }
@@ -731,12 +601,6 @@
         }
       }
 
-      @if $skin-name == 'bootstrap' {
-        &.e-rtl .e-toolbar-item.e-active {
-          margin: 0 0 0 2px;
-        }
-      }
-
       &.e-vertical-tab {
 
         .e-tab-header.e-vertical {
@@ -763,14 +627,7 @@
           }
 
           .e-tab-wrap:focus .e-text-wrap {
-            height: $tab-big-height;
-
-            @if $skin-name == 'fabric' {
-              height: $tab-big-height - 2;
-            }
-            @else if $skin-name == 'highcontrast' {
-              height: $tab-big-height - 4;
-            }
+            height: $tab-bgr-item-textwrap-height;
           }
 
           &.e-itop,
@@ -798,14 +655,7 @@
               height: $tab-big-pop-item-height;
 
               .e-text-wrap {
-                height: $tab-big-pop-item-height;
-
-                @if $skin-name == 'fabric' {
-                  height:  $tab-big-pop-item-height - 2;
-                }
-                @else if $skin-name == 'highcontrast' {
-                  height:  $tab-big-pop-item-height - 4;
-                }
+                height: $tab-bgr-pop-item-textwrap-height;
               }
             }
 
@@ -816,32 +666,19 @@
           }
         }
 
-        &:nth-child(even) {
+        &.e-horizontal-bottom {
 
           .e-toolbar-item {
 
             &.e-active {
 
               .e-tab-wrap:focus .e-text-wrap {
-                height: $tab-big-height;
+                height: $tab-bgr-item-textwrap-height;
                 padding: 0;
-
-                @if $skin-name == 'fabric' {
-                  height: $tab-big-height - 2;
-                }
-                @else if $skin-name == 'highcontrast' {
-                  height: $tab-big-height - 4;
-                }
               }
 
               &.e-ileft {
-
-                @if $skin-name == 'fabric' {
-                  height: $tab-big-height - 2;
-                }
-                @else if $skin-name == 'highcontrast' {
-                  height: $tab-big-height - 4;
-                }
+                height: $tab-big-even-active-text-container-height;
               }
             }
           }
@@ -906,22 +743,15 @@
 
     &.e-rtl {
 
-      @if $skin-name == 'bootstrap' {
-
-        .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 {
 
-          &:nth-child(even) {
+        &.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;
             }
           }
         }
@@ -951,7 +781,7 @@
         .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;
+          padding: $tab-bgr-fill-active-item-padding;
         }
 
         .e-toolbar-item {
@@ -960,6 +790,7 @@
             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;
@@ -984,58 +815,35 @@
           }
 
           .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 $skin-name == 'fabric' {
-              height: $tab-big-fill-height - 2;
-            }
-
-            @if $skin-name == '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 $skin-name == 'fabric' {
-                height: $tab-big-fill-height - 2;
-              }
-
-              @if $skin-name == '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 $skin-name == 'fabric' {
-                height: $tab-big-fill-height - 2;
-              }
-              @else if $skin-name == 'highcontrast' {
-                height: $tab-big-fill-height - 4;
-              }
             }
           }
 
@@ -1066,18 +874,10 @@
           }
         }
 
-        &:nth-child(even) {
+        &.e-horizontal-bottom {
 
           .e-toolbar-item.e-active .e-text-wrap {
             height: $tab-fill-big-even-active-text-height;
-
-            @if $skin-name == 'fabric' {
-              height: $tab-big-fill-height - 2;
-            }
-
-            @if $skin-name == 'highcontrast' {
-              height: $tab-big-fill-height - 4;
-            }
           }
 
           .e-toolbar-item.e-itop .e-text-wrap,
@@ -1103,33 +903,13 @@
             }
 
             .e-tab-wrap:focus .e-text-wrap {
-              height: $tab-focus-big-fill-height;
-
-              @if $skin-name == 'fabric' {
-                height: $tab-big-fill-height - 2;
-              }
-
-              @if $skin-name == 'highcontrast' {
-                height: $tab-big-fill-height - 4;
-              }
+              height: $tab-bgr-fill-focused-wrap-height;
             }
 
             &.e-active .e-tab-wrap:focus {
 
               .e-text-wrap {
-                @if $skin-name == 'fabric' {
-                  height: $tab-big-fill-height - 2;
-                }
-                @else if $skin-name == 'highcontrast' {
-                  height: $tab-big-fill-height - 4;
-                }
-              }
-
-              .e-close-icon::before {
-
-                @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-                  top: 1px;
-                }
+                height: $tab-bgr-fill-focused-wrap-height;
               }
             }
 
@@ -1146,19 +926,6 @@
               }
             }
           }
-
-          &:nth-child(even) {
-
-            .e-tab-wrap:focus .e-text-wrap {
-              @if $skin-name == 'fabric' {
-                height: $tab-big-fill-height - 2;
-              }
-
-              @if $skin-name == 'highcontrast' {
-                height: $tab-big-fill-height - 4;
-              }
-            }
-          }
         }
       }
 
@@ -1171,7 +938,7 @@
 
       &.e-vertical-icon {
 
-        .e-tab-header {
+        > .e-tab-header {
           height: $tab-big-tb-icon-height - 2;
           min-height: $tab-big-tb-icon-height - 2;
         }
@@ -1185,13 +952,13 @@
         .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;
+          padding: $tab-bgr-background-active-padding;
         }
 
         .e-toolbar-item {
 
           &:not(.e-separator) {
-            margin: $tab-alt-item-margin;
+            padding: $tab-bgr-background-active-padding;
           }
 
           .e-tab-wrap {
@@ -1203,35 +970,11 @@
           }
 
           &.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 $skin-name == 'fabric' {
-                height: $tab-big-height - 2;
-              }
-
-              @if $skin-name == 'highcontrast' {
-                height: $tab-big-height - 4;
-              }
-            }
-          }
-
-          &:hover {
-            @if $skin-name == 'highcontrast' {
-              &.e-itop,
-              &.e-ibottom {
-
-                .e-text-wrap {
-                  height: auto;
-                }
-              }
-            }
           }
         }
 
@@ -1269,6 +1012,10 @@
         .e-toolbar-item:not(.e-separator) {
           margin: $tab-big-rtl-item-margin;
 
+          .e-icon-right {
+            margin: $tab-bgr-rtl-icon-right-margin;
+          }
+
           .e-icon-left + .e-tab-text {
             margin: $tab-rtl-big-it-text-margin;
 
@@ -1385,7 +1132,7 @@
     }
   }
 
-  #{&}.e-tab {
+  .e-tab {
     display: block;
     position: relative;
 
@@ -1393,10 +1140,16 @@
       display: none;
     }
 
+    &.e-fill-mode .e-content,
+    &.e-fill-mode .e-content .e-item,
+    &.e-fill-mode .e-content .e-item > div,
+    &.e-fill-mode .e-content .e-item > div > .e-blazor-template {
+      height: 100%;
+    }
+
     .e-tab-header {
       height: $tab-nrml-height;
       min-height: $tab-nrml-height;
-      user-select: text;
 
       @media screen and (max-width: 480px) {
         height: $tab-big-height;
@@ -1406,10 +1159,7 @@
       &::before {
         content: '';
         position: absolute;
-
-        @if $skin-name == 'bootstrap' {
-          display: block;
-        }
+        display: $tab-nrml-hdr-before-display;
       }
 
       &:not(.e-vertical) {
@@ -1427,11 +1177,6 @@
         min-height: $tab-nrml-height;
         position: relative;
 
-        @if $skin-name == 'bootstrap' {
-          height: $tab-nrml-height;
-          min-height: $tab-nrml-height;
-        }
-
         @media screen and (max-width: 480px) {
           min-height: $tab-big-height;
         }
@@ -1449,6 +1194,36 @@
             margin: $tab-mob-last-item-margin;
           }
         }
+
+        .e-toolbar-item.e-active {
+          position: $tab-nrml-item-active-position;
+
+          &:hover::before {
+            left: $tab-nrml-item-active-hover-before-left;
+            right: $tab-nrml-item-active-hover-before-right;
+          }
+
+          &::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;
+          }
+        }
       }
 
       .e-toolbar-items.e-hscroll {
@@ -1461,21 +1236,13 @@
           }
         }
 
-        @if $skin-name == 'bootstrap' {
-
-          &[style*= 'overflow: hidden'] .e-toolbar-item:not(.e-separator).e-active {
-            margin-bottom: 0;
-          }
-        }
-
-        @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-          .e-hscroll-bar {
-            padding: 0 1px;
-          }
+        .e-hscroll-bar {
+          padding: $tab-nrml-hscroll-bar-padding;
         }
 
         .e-scroll-nav {
-          width: 40px;
+          width: $tab-nrml-hscroll-items-nav-width;
+          border-radius: $tab-nrml-hscroll-items-bdr-radius;
         }
 
         &:not(.e-tbar-pos) .e-toolbar-item:last-child {
@@ -1509,11 +1276,11 @@
         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);
+        border-radius: $tab-nrml-vertical-indicator-bdr-radius;
+        transition: $tab-nrml-indicator-transition;
       }
 
       .e-toolbar-item {
-        user-select: text;
 
         &.e-hidden {
           display: none;
@@ -1547,18 +1314,11 @@
           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 $skin-name == 'fabric' {
-            height: $tab-nrml-height - 2;
-          }
-          @else if $skin-name == 'highcontrast' {
-            height: $tab-nrml-height - 4;
-          }
         }
 
         .e-tab-text {
@@ -1567,18 +1327,14 @@
           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 $skin-name == 'fabric' or $skin-name == '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;
@@ -1588,19 +1344,12 @@
           }
 
           .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 $skin-name == 'fabric' {
-              height: $tab-nrml-height - 2;
-            }
-            @else if $skin-name == 'highcontrast' {
-              height: $tab-nrml-height - 4;
-            }
           }
 
           .e-tab-wrap {
@@ -1611,47 +1360,26 @@
             font-weight: $tab-semi-font-weight;
           }
 
-          @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-            .e-tab-text {
-              align-self: auto;
-            }
+          .e-tab-icon::before {
+            top: $tab-item-icon-before-top;
+            left: $tab-item-icon-before-left;
           }
 
-          @if $skin-name == 'bootstrap' {
-            .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 $skin-name == 'fabric' {
-                height: $tab-nrml-height - 2;
-                padding: 0;
-              }
-              @else if $skin-name == 'highcontrast' {
-                height: $tab-nrml-height - 4;
-                padding: 0;
-              }
-            }
-
-            @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-              .e-tab-wrap .e-tab-text {
-                align-self: auto;
-              }
-
-              .e-tab-wrap:focus .e-tab-text {
-                align-self: auto;
-              }
             }
           }
         }
@@ -1676,13 +1404,7 @@
         }
 
         .e-close-icon::before {
-          @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-            top: 1px;
-          }
-
-          @media screen\0 {
-            top: $tab-pop-close-icon-top;
-          }
+          top: 1px;
         }
 
         .e-icons.e-tab-icon {
@@ -1690,6 +1412,7 @@
           height: $tab-nrml-icon-container-size;
           min-width: $tab-nrml-icon-container-size;
           width: $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;
@@ -1706,6 +1429,17 @@
           }
         }
 
+        .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 {
@@ -1718,6 +1452,14 @@
           }
         }
 
+        .e-icon-right {
+          margin: 0 0 0 8px;
+
+          @media screen and (max-width: 480px) {
+            margin: $tab-bgr-mob-item-iconright-margin;
+          }
+        }
+
         .e-icon-left + .e-tab-text {
           margin: $tab-nrml-it-text-margin;
 
@@ -1760,9 +1502,6 @@
           &.e-active {
 
             .e-tab-wrap {
-              @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-                height: 62px;
-              }
 
               &:focus {
 
@@ -1830,6 +1569,7 @@
 
           &:not(.e-separator) {
             margin: $tab-pop-item-margin;
+            padding: 0;
           }
 
           .e-tab-wrap {
@@ -1844,15 +1584,8 @@
           }
 
           .e-text-wrap {
-            height: $tab-nrml-pop-item-height;
+            height: $tab-nrml-pop-item-textwrap-height;
             width: 100%;
-
-            @if $skin-name == 'fabric' {
-              height:  $tab-nrml-pop-item-height - 2;
-            }
-            @else if $skin-name == 'highcontrast' {
-              height:  $tab-nrml-pop-item-height - 4;
-            }
           }
 
           .e-tab-text {
@@ -1868,7 +1601,7 @@
             top: $tab-nrml-pop-close-top;
           }
 
-          .e-tab-text + .e-close-icon[style= 'display:block'] {
+          .e-tab-text + .e-close-icon[style = 'display:block'] {
             padding-right: $tab-nrml-pop-text-padding-right;
 
             @media screen and (max-width: 480px) {
@@ -1993,16 +1726,8 @@
           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 $skin-name == 'fabric' {
-            top: -1px;
-          }
-
-          @if $skin-name == 'highcontrast' {
-            top: -2px;
-          }
         }
 
         .e-nav-arrow {
@@ -2054,42 +1779,20 @@
             top: 0;
             vertical-align: initial;
 
-            @if $skin-name == 'fabric' {
-              top: -1px;
-            }
-
-            @if $skin-name == 'highcontrast' {
-              top: -2px;
-            }
-
             @media screen and (max-width: 480px) {
               font-size: $tab-mob-nav-icon-size;
             }
           }
 
           &:hover {
-            @if $skin-name == 'bootstrap' {
-              line-height: 34px;
-            }
+            line-height: $tab-nrml-hor-pop-lineheight;
 
             &::before {
-              top: $tab-nrml-hover-nav-pop-icon-top;
-
-              @if $skin-name == 'fabric' {
-                top: -1px;
-              }
-
-              @if $skin-name == 'bootstrap' {
-                line-height: 34px;
-                top: 0;
-
-                @media screen and (max-width: 480px) {
-                  line-height: 43px;
-                }
-              }
+              line-height: $tab-nrml-hor-pop-lineheight;
+              top: 0;
 
-              @if $skin-name == 'highcontrast' {
-                top: -2px;
+              @media screen and (max-width: 480px) {
+                line-height: $tab-nrml-mob-hor-pop-lineheight;
               }
             }
           }
@@ -2119,51 +1822,63 @@
 
           .e-popup-up-icon,
           .e-popup-down-icon {
-            @if $skin-name == 'bootstrap' {
-              line-height: 32px;
-            }
+            line-height: $tab-nrml-hor-focus-pop-lineheight;
 
             &::before {
-              top: $tab-nrml-hover-nav-pop-icon-top;
-
-              @if $skin-name == 'fabric' {
-                top: -1px;
-              }
+              line-height: $tab-nrml-hor-focus-pop-lineheight;
+              top: 0;
 
-              @if $skin-name == 'bootstrap' {
-                line-height: 32px;
-                top: 0;
-
-                @media screen and (max-width: 480px) {
-                  line-height: 43px;
-                }
-              }
-
-              @if $skin-name == 'highcontrast' {
-                top: -2px;
+              @media screen and (max-width: 480px) {
+                line-height: $tab-nrml-mob-hor-pop-lineheight;
               }
             }
 
             &:hover {
-              @if $skin-name == 'bootstrap' {
-                line-height: 32px;
-                top: -.5px;
-              }
+              line-height: $tab-nrml-hor-focus-pop-lineheight;
+              top: $tab-nrml-hor-focus-pop-hover-top;
             }
           }
         }
       }
 
-      &:nth-child(even) {
+      &.e-horizontal-bottom {
+
+        .e-toolbar-items .e-toolbar-item.e-active {
+          position: $tab-nrml-item-active-position;
+
+          &:hover::before {
+            left: $tab-nrml-item-active-hover-before-left;
+            right: $tab-nrml-item-active-hover-before-right;
+          }
+
+          &::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: $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;
+          }
+        }
 
         &::before {
           bottom: auto;
         }
 
-        @if $skin-name == 'bootstrap' {
-          .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 {
@@ -2193,49 +1908,18 @@
             }
 
             .e-text-wrap {
-              height: $tab-nrml-height;
-              padding: $tab-even-active-text-container-padding;
-
-              @if $skin-name == 'fabric' {
-                height: $tab-nrml-height - 2;
-                padding: 0;
-              }
-              @else if $skin-name == 'highcontrast' {
-                height: $tab-nrml-height - 4;
-                padding: 0;
-              }
+              height: $tab-nrml-item-text-wrap-height;
+              padding: 0;
             }
 
-            @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-              .e-text-wrap::before,
-              &:not(.e-separator):last-child .e-text-wrap::before {
-                top: 0;
-              }
-
-              &.e-itop {
-
-                @if $skin-name == 'fabric' or $skin-name == '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 $skin-name == 'fabric' or $skin-name == '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;
               }
             }
           }
@@ -2263,6 +1947,10 @@
         }
       }
 
+      &.e-reorder-active-item .e-toolbar-pop .e-toolbar-item.e-active .e-text-wrap::before {
+        display: none;
+      }
+
       &.e-vertical {
         max-width: 150px;
         z-index: 1;
@@ -2274,7 +1962,7 @@
           top: 0;
         }
 
-        &[style*= 'overflow: hidden']::before {
+        &[style *= 'overflow: hidden']::before {
           bottom: $tab-nrml-vertical-scroll-nav-top-bottom;
           height: auto;
           top: $tab-nrml-vertical-scroll-nav-top-bottom;
@@ -2287,16 +1975,14 @@
 
         .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 $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-            transition: initial;
-          }
         }
 
         .e-toolbar-items {
           height: inherit;
+          flex-direction: column;
+          align-items: normal;
 
           &.e-vscroll:not(.e-scroll-device) {
             padding: $tab-vscroll-nrml-padding;
@@ -2342,14 +2028,11 @@
           }
 
           &.e-ileft.e-icon {
+            min-height: $tab-nrml-vertical-icon-min-height;
+            min-width: $tab-nrml-vertical-icon-min-width;
 
-            @if $skin-name == 'fabric' or $skin-name == '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;
             }
           }
 
@@ -2363,7 +2046,7 @@
         }
 
         .e-toolbar-pop {
-          top: initial !important; // sass-lint:disable-line no-important
+          top: initial !important; /* stylelint-disable-line declaration-no-important */
         }
 
         &.e-vertical-left {
@@ -2377,6 +2060,36 @@
             left: auto;
             right: 0;
           }
+
+          .e-toolbar-items .e-toolbar-item.e-active {
+
+            &:hover::before {
+              bottom: $tab-nrml-item-active-before-bottom;
+              height: $tab-nrml-vertical-hover-before-height;
+            }
+
+            &::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: $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;
+            }
+          }
         }
 
         &.e-vertical-right {
@@ -2401,6 +2114,36 @@
               width: auto;
             }
           }
+
+          .e-toolbar-items .e-toolbar-item.e-active {
+
+            &:hover::before {
+              bottom: $tab-nrml-item-active-before-bottom;
+              height: $tab-nrml-vertical-hover-before-height;
+            }
+
+            &::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: $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;
+            }
+          }
         }
 
         .e-scroll-nav {
@@ -2539,7 +2282,7 @@
       }
 
       &.e-progress {
-        overflow-x: hidden;
+        overflow: hidden;
       }
     }
 
@@ -2550,54 +2293,65 @@
 
         .e-item.e-active {
           display: flex;
+          flex: none;
+        }
+
+        .e-item,
+        .e-item > :first-child {
+          width: 100%;
         }
       }
     }
 
     &.e-vertical-icon {
 
-      .e-tab-header {
+      > .e-tab-header {
         height: $tab-nrml-tb-icon-height;
         min-height: $tab-nrml-tb-icon-height;
 
-        .e-toolbar-items {
+        &.e-reorder-active-item .e-toolbar-pop {
+
+          .e-toolbar-item.e-active .e-tab-wrap::before,
+          .e-toolbar-item:not(.e-separator):last-child.e-active .e-tab-wrap::before {
+            display: none;
+          }
+        }
+
+        > .e-toolbar-items {
           height: $tab-nrml-tb-icon-height;
         }
 
         .e-toolbar-item.e-active,
         .e-toolbar-item:not(.e-separator):last-child.e-active {
-          @if $skin-name == 'fabric' or $skin-name == '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 $skin-name == 'fabric' {
-                border: 1px solid $theme-primary;
-              }
-              @else if $skin-name == '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;
           }
         }
 
         .e-scroll-nav {
-          height:  $tab-nrml-icon-top-bottom-item-height;
+          height: $tab-nrml-icon-top-bottom-item-height;
         }
 
         .e-hor-nav {
-          height:  $tab-nrml-icon-top-bottom-item-height;
+          height: $tab-nrml-icon-top-bottom-item-height;
 
           .e-popup-up-icon::before,
           .e-popup-down-icon::before {
@@ -2611,10 +2365,7 @@
         &.e-vertical {
 
           .e-indicator {
-
-            @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-              width: 3px;
-            }
+            width: $tab-nrml-vertical-indicator-width;
           }
 
           .e-toolbar-item.e-active,
@@ -2634,23 +2385,19 @@
           }
         }
 
-        &:nth-child(even) {
+        &.e-horizontal-bottom {
 
           .e-toolbar-item.e-active,
           .e-toolbar-item:not(.e-separator):last-child.e-active {
-            @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-              .e-tab-wrap::before {
-                top: 0;
-              }
+            .e-tab-wrap::before {
+              top: $tab-nrml-bottom-wrap-before-top;
             }
           }
         }
       }
 
-      @if $skin-name == 'bootstrap' {
-        &.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 {
@@ -2669,14 +2416,7 @@
           height: $tab-nrml-height;
 
           .e-text-wrap {
-            height: $tab-nrml-height;
-
-            @if $skin-name == 'fabric' {
-              height: $tab-nrml-height - 2;
-            }
-            @else if $skin-name == 'highcontrast' {
-              height: $tab-nrml-height - 4;
-            }
+            height: $tab-nrml-item-text-wrap-height;
           }
         }
 
@@ -2705,14 +2445,7 @@
             height: $tab-nrml-pop-item-height;
 
             .e-text-wrap {
-              height: $tab-nrml-pop-item-height;
-
-              @if $skin-name == 'fabric' {
-                height:  $tab-nrml-pop-item-height - 2;
-              }
-              @else if $skin-name == 'highcontrast' {
-                height:  $tab-nrml-pop-item-height - 4;
-              }
+              height: $tab-nrml-pop-item-textwrap-height;
             }
           }
 
@@ -2723,31 +2456,15 @@
         }
       }
 
-      .e-tab-header:nth-child(even) {
+      .e-tab-header .e-horizontal-bottom {
 
         .e-toolbar-item {
 
           &.e-active {
 
             .e-tab-wrap:focus .e-text-wrap {
-              height: $tab-nrml-height;
+              height: $tab-nrml-item-text-wrap-height;
               padding: 0;
-
-              @if $skin-name == 'fabric' {
-                height: $tab-nrml-height - 2;
-              }
-              @else if $skin-name == 'highcontrast' {
-                height: $tab-nrml-height - 4;
-              }
-            }
-
-            &.e-ileft {
-
-              @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-                .e-tab-wrap:focus .e-tab-text {
-                  align-self: auto;
-                }
-              }
             }
           }
 
@@ -2927,12 +2644,6 @@
           min-height: $tab-mob-fill-height;
         }
 
-        @if $skin-name == 'bootstrap' {
-          &::before {
-            display: none;
-          }
-        }
-
         .e-indicator {
           display: none;
         }
@@ -2948,7 +2659,7 @@
           &: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;
+            padding: $tab-nrml-background-active-padding;
           }
         }
 
@@ -2958,6 +2669,7 @@
             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;
@@ -2982,42 +2694,26 @@
           }
 
           .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 $skin-name == 'fabric' {
-              height: $tab-nrml-fill-height - 2;
-            }
-
-            @if $skin-name == '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 $skin-name == 'fabric' {
-                height: $tab-nrml-fill-height - 2;
-              }
-
-              @if $skin-name == 'highcontrast' {
-                height: $tab-nrml-fill-height - 4;
-              }
             }
 
             .e-tab-text {
@@ -3031,13 +2727,6 @@
               @media screen and (max-width: 480px) {
                 height: $tab-fill-big-active-it-text-container-height;
               }
-
-              @if $skin-name == 'fabric' {
-                height: $tab-nrml-fill-height - 2;
-              }
-              @else if $skin-name == 'highcontrast' {
-                height: $tab-nrml-fill-height - 4;
-              }
             }
           }
 
@@ -3060,7 +2749,7 @@
           }
         }
 
-        &:nth-child(even) {
+        &.e-horizontal-bottom {
 
           .e-toolbar-items:not(.e-tbar-pos) {
 
@@ -3086,19 +2775,11 @@
               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 $skin-name == 'fabric' {
-                  height: $tab-nrml-fill-height - 2;
-                }
-
-                @if $skin-name == 'highcontrast' {
-                  height: $tab-nrml-fill-height - 4;
-                }
               }
             }
 
@@ -3139,39 +2820,20 @@
             height: $tab-focus-nrml-fill-height;
 
             .e-text-wrap {
-              height: $tab-focus-nrml-fill-height;
-
-              @if $skin-name == 'fabric' {
-                height: $tab-nrml-fill-height - 2;
-              }
-
-              @if $skin-name == 'highcontrast' {
-                height: $tab-nrml-fill-height - 4;
-              }
+              height: $tab-nrml-fill-focused-wrap-height;
             }
           }
 
           &.e-active .e-tab-wrap:focus {
 
-            @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-              .e-text-wrap {
-                @if $skin-name == 'fabric' {
-                  height: $tab-nrml-fill-height - 2;
-                }
-                @else if $skin-name == 'highcontrast' {
-                  height: $tab-nrml-fill-height - 4;
-                }
-              }
-
-              .e-close-icon::before {
-                top: 1px;
-              }
+            .e-text-wrap {
+              height: $tab-nrml-fill-focused-wrap-height;
             }
           }
 
           &.e-itop .e-tab-wrap:focus,
           &.e-ibottom .e-tab-wrap:focus {
-            height:  $tab-nrml-focus-fill-icon-top-bottom-item-height;
+            height: $tab-nrml-focus-fill-icon-top-bottom-item-height;
 
             .e-text-wrap {
               height: auto;
@@ -3193,7 +2855,7 @@
 
       &.e-vertical-icon {
 
-        .e-tab-header {
+        > .e-tab-header {
           height: $tab-nrml-tb-icon-height - 2;
           min-height: $tab-nrml-tb-icon-height - 2;
         }
@@ -3204,31 +2866,17 @@
 
       .e-tab-header {
 
-        @if $skin-name == 'bootstrap' {
-          &::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;
+          padding: $tab-nrml-background-active-padding;
         }
 
         .e-toolbar-item {
 
           &:not(.e-separator) {
-            margin: $tab-alt-item-margin;
-          }
-
-          &:hover {
-            @if $skin-name == 'highcontrast' {
-              &.e-itop .e-text-wrap,
-              &.e-ibottom .e-text-wrap {
-                height: auto;
-              }
-            }
+            margin: 0;
+            padding: $tab-nrml-background-active-padding;
           }
 
           .e-tab-wrap {
@@ -3240,37 +2888,22 @@
           }
 
           &.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 $skin-name == 'fabric' {
-                height: $tab-nrml-height - 2;
-              }
-
-              @if $skin-name == '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 $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-
-            .e-indicator {
-              display: none;
-            }
+          .e-indicator {
+            display: $tab-nrml-background-vertical-indicator-display;
           }
 
           .e-toolbar-items {
@@ -3284,7 +2917,7 @@
           }
         }
 
-        &:nth-child(even) {
+        &.e-horizontal-bottom {
 
           .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child.e-active,
           .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child.e-active {
@@ -3304,14 +2937,7 @@
             &.e-active {
 
               .e-text-wrap {
-                height: $tab-nrml-pop-item-height;
-
-                @if $skin-name == 'fabric' {
-                  height:  $tab-nrml-pop-item-height - 2;
-                }
-                @else if $skin-name == 'highcontrast' {
-                  height:  $tab-nrml-pop-item-height - 4;
-                }
+                height: $tab-nrml-pop-item-textwrap-height;
               }
             }
           }
@@ -3338,15 +2964,13 @@
           margin: $tab-nrml-rtl-item-margin;
         }
 
-        @if $skin-name == 'bootstrap' {
-          .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;
 
+          .e-icon-right {
+            margin: $tab-nrml-rtl-icon-right-margin;
+          }
+
           .e-icon-left + .e-tab-text {
             margin: $tab-rtl-nrml-it-text-margin;
           }
@@ -3371,20 +2995,10 @@
           }
         }
 
-        @if $skin-name == 'bootstrap' {
-          &:nth-child(even) {
-
-            .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-separator) {
-              margin: 0 0 0 2px;
+        &.e-horizontal-bottom {
 
-              &.e-active {
-                margin: 0 0 0 2px;
-
-                .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;
           }
         }
 
@@ -3462,4 +3076,334 @@
       }
     }
   }
+
+  .e-tab-clone-element {
+    overflow: visible;
+    z-index: 10000;
+
+    &:not(.e-separator) {
+      height: $tab-nrml-height;
+      margin: $tab-nrml-item-margin;
+      min-height: $tab-nrml-height;
+      min-width: auto;
+      padding: $tab-nrml-item-padding;
+
+      @media screen and (max-width: 480px) {
+        height: $tab-big-height;
+        min-height: $tab-big-height;
+      }
+    }
+
+    .e-tab-wrap {
+      height: $tab-nrml-height;
+      padding: $tab-nrml-wrap-padding;
+      width: 100%;
+
+      @media screen and (max-width: 480px) {
+        height: $tab-big-height;
+        padding: $tab-mob-wrap-padding;
+      }
+    }
+
+    .e-text-wrap {
+      align-content: center;
+      align-items: center;
+      display: inline-flex;
+      height: $tab-nrml-item-text-wrap-height;
+
+      @media screen and (max-width: 480px) {
+        height: $tab-big-height;
+      }
+    }
+
+    .e-tab-text {
+      display: inherit;
+      font-family: $tab-font-family;
+      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;
+      }
+    }
+
+    .e-icons.e-close-icon {
+      display: none;
+    }
+
+    .e-close-icon,
+    .e-close-icon::before {
+      font-size: $tab-nrml-close-icon-size;
+
+      @media screen and (max-width: 480px) {
+        font-size: $tab-mob-close-icon-size;
+      }
+    }
+
+    .e-close-icon::before {
+      top: 1px;
+    }
+
+    .e-icons.e-tab-icon {
+      display: inline-flex;
+      height: $tab-nrml-icon-container-size;
+      min-width: $tab-nrml-icon-container-size;
+      width: $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;
+        width: $tab-mob-icon-container-size;
+      }
+    }
+
+    .e-tab-icon,
+    .e-tab-icon::before {
+      font-size: $tab-nrml-icon-size;
+
+      @media screen and (max-width: 480px) {
+        font-size: $tab-mob-icon-size;
+      }
+    }
+
+    &.e-icon {
+
+      .e-tab-wrap {
+        justify-content: center;
+        padding: $tab-nrml-io-wrap-padding;
+
+        @media screen and (max-width: 480px) {
+          padding: $tab-big-wrap-padding;
+        }
+      }
+    }
+
+    .e-icon-right {
+      margin: 0 0 0 8px;
+
+      @media screen and (max-width: 480px) {
+        margin: $tab-bgr-mob-item-iconright-margin;
+      }
+    }
+
+    .e-icon-left + .e-tab-text {
+      margin: $tab-nrml-it-text-margin;
+
+      @media screen and (max-width: 480px) {
+        margin: $tab-mob-it-text-margin;
+      }
+    }
+
+    &.e-itop,
+    &.e-ibottom {
+      height: $tab-nrml-icon-top-bottom-item-height;
+
+      @media screen and (max-width: 480px) {
+        height: $tab-big-icon-top-bottom-item-height;
+      }
+
+      .e-tab-wrap {
+        align-items: center;
+        display: flex;
+        height: $tab-nrml-icon-top-bottom-item-height;
+        position: relative;
+
+        @media screen and (max-width: 480px) {
+          height: $tab-big-icon-top-bottom-item-height;
+        }
+
+        &:focus {
+
+          .e-text-wrap {
+            height: auto;
+          }
+        }
+      }
+
+      .e-text-wrap {
+        display: block;
+        height: auto;
+      }
+
+      .e-close-icon {
+        position: absolute;
+        right: $tab-nrml-close-icon-top-bottom-right;
+        top: calc(50% - 6px);
+
+        @media screen and (max-width: 480px) {
+          right: $tab-mob-close-icon-top-bottom-right;
+        }
+      }
+    }
+
+    &.e-itop .e-tab-text {
+      margin: $tab-nrml-icon-top-margin;
+
+      @media screen and (max-width: 480px) {
+        margin: $tab-big-icon-top-margin;
+      }
+    }
+
+    &.e-ibottom .e-tab-text {
+      margin: $tab-nrml-icon-bottom-margin;
+
+      @media screen and (max-width: 480px) {
+        margin: $tab-big-icon-bottom-margin;
+      }
+    }
+
+    .e-tab-icon.e-icon-top,
+    .e-tab-icon.e-icon-bottom {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin: auto;
+    }
+
+    &.e-close-show {
+
+      .e-icons.e-close-icon {
+        align-items: center;
+        align-self: center;
+        display: inline-flex;
+
+        @media screen and (max-width: 480px) {
+          display: none;
+        }
+      }
+
+      .e-toolbar-item.e-itop .e-text-wrap,
+      .e-toolbar-item.e-ibottom .e-text-wrap {
+        margin-right: $tab-nrml-text-container-margin-right;
+      }
+    }
+  }
+
+  .e-bigger .e-tab-clone-element {
+
+    &:not(.e-separator) {
+      height: $tab-big-height;
+      margin: $tab-big-item-margin;
+      min-height: $tab-big-height;
+      min-width: auto;
+      padding: $tab-big-item-padding;
+
+      @media screen and (max-width: 480px) {
+        margin: $tab-nrml-item-margin;
+      }
+    }
+
+    &:not(.e-separator).e-itop,
+    &:not(.e-separator).e-ibottom {
+      height: $tab-big-icon-top-bottom-item-height;
+      min-height: $tab-big-icon-top-bottom-item-height;
+    }
+
+    .e-tab-wrap {
+      height: $tab-big-height;
+      padding: $tab-big-wrap-padding;
+
+      @media screen and (max-width: 480px) {
+        padding: $tab-mob-wrap-padding;
+      }
+    }
+
+    .e-text-wrap {
+      height: $tab-bgr-item-textwrap-height;
+    }
+
+    .e-tab-text {
+      font-size: $tab-big-font-size;
+      align-self: auto;
+    }
+
+    .e-icons.e-close-icon {
+      cursor: pointer;
+      margin: $tab-big-close-icon-margin;
+
+      @media screen and (max-width: 480px) {
+        margin: $tab-mob-close-icon-margin;
+      }
+    }
+
+    .e-icons.e-close-icon,
+    .e-close-icon::before {
+      font-size: $tab-big-close-icon-size;
+
+      @media screen and (max-width: 480px) {
+        font-size: $tab-mob-close-icon-size;
+      }
+    }
+
+    .e-icons.e-tab-icon {
+      height: $tab-big-icon-container-size;
+      min-width: $tab-big-icon-container-size;
+      width: $tab-big-icon-container-size;
+      line-height: $tab-bgr-icon-line-height;
+    }
+
+    .e-tab-icon,
+    .e-tab-icon::before {
+      font-size: $tab-big-icon-size;
+    }
+
+    &.e-icon {
+
+      .e-tab-wrap {
+        padding: $tab-big-io-wrap-padding;
+      }
+    }
+
+    .e-icon-right {
+      margin: 0 0 0 12px;
+
+      @media screen and (max-width: 480px) {
+        margin: $tab-bgr-mob-item-iconright-margin;
+      }
+    }
+
+    .e-icon-left + .e-tab-text {
+      margin: $tab-big-it-text-margin;
+
+      @media screen and (max-width: 480px) {
+        margin: $tab-mob-it-text-margin;
+      }
+    }
+
+    &.e-itop,
+    &.e-ibottom {
+      height: $tab-big-icon-top-bottom-item-height;
+
+      .e-tab-wrap {
+        height: $tab-big-icon-top-bottom-item-height;
+
+        &:focus .e-text-wrap {
+          height: auto;
+        }
+      }
+
+      &.e-active .e-tab-wrap {
+        height: $tab-big-icon-top-bottom-item-height;
+
+        &:focus .e-text-wrap {
+          height: auto;
+        }
+      }
+
+      .e-close-icon {
+        right: $tab-big-close-icon-top-bottom-right;
+      }
+    }
+
+    &.e-itop .e-tab-text {
+      margin: $tab-big-icon-top-margin;
+    }
+
+    &.e-ibottom .e-tab-text {
+      margin: $tab-big-icon-bottom-margin;
+    }
+  }
 }