@syncfusion/ej2-navigations 16.4.45 → 16.4.52-46585

package/styles/tab/_theme.scss

@@ -1,6 +1,7 @@
 @include export-module('tab-theme') {
+
   /*! tab theme */
-  #{&}.e-tab {
+  .e-tab {
     background: $tab-bg-color;
     border: $tab-border;
 
@@ -8,33 +9,26 @@
       background: inherit;
       border: 0;
       border-radius: 0;
+      box-shadow: none;
+      font-weight: $tab-header-font-weight;
+      border-bottom: $tab-header-border-bottom;
 
-      @if $skin-name == 'bootstrap' {
+      &::before {
+        border-color: $tab-header-before-border-color;
+        border-style: solid;
+      }
 
+      &:not(.e-vertical) {
         &::before {
-          border-color: $tab-hdr-bdr-color;
-          border-style: solid;
+          border-width: $tab-header-before-border-width;
         }
-
-        &:not(.e-vertical) {
-
-          &::before {
-            border-width: 0 0 1px;
-          }
-        }
-
-        &[style*= 'overflow: hidden'] {
-          border: 0;
-        }
-      }
-      @else {
-        border-bottom: $tab-hdr-border;
       }
 
       &:not(.e-vertical) {
 
         .e-toolbar-item.e-active {
-          border-bottom: $tab-active-item-hide-border;
+          border-bottom: $tab-item-active-border-bottom;
+          margin-bottom: 0;
         }
       }
 
@@ -50,23 +44,21 @@
         background: inherit;
         border: $tab-item-border;
 
+        &:hover {
+          background: $tab-item-hover-bg;
+        }
+
         .e-ripple-element {
           background: $tab-ripple-bg-color;
         }
 
         .e-tab-wrap {
-          border-radius: $tab-item-wrap-border-radius;
+          border-radius: $tab-active-item-border-radius;
           color: $tab-text-color;
-
-          @if $skin-name == 'fabric' {
-            border: 1px solid $tab-wrap-border-color;
-          }
-          @else if $skin-name == 'highcontrast' {
-            border: 2px solid $tab-wrap-border-color;
-          }
+          border: $tab-item-wrap-border;
 
           .e-tab-icon {
-            color: $tab-text-color;
+            color: $tab-wrap-comb-icon-color;
           }
 
           @media screen and (max-width: 480px) {
@@ -83,6 +75,8 @@
 
           &:hover {
             background: $tab-item-hover-bg-color;
+            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;
@@ -100,7 +94,7 @@
           border-radius: $tab-top-active-item-border-radius;
 
           .e-tab-wrap {
-
+            border: $tab-item-active-tabwrap-border;
             &:hover {
 
               .e-tab-text,
@@ -111,17 +105,15 @@
           }
 
           .e-text-wrap {
-            @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-              position: relative;
-
-              &::before {
-                border: 1px solid $tab-active-line-color;
-                content: '';
-                display: block;
-                position: absolute;
-                top: 95%;
-                width: 100%;
-              }
+            position: $tab-active-wrap-position;
+
+            &::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;
             }
           }
 
@@ -167,6 +159,10 @@
         }
       }
 
+      &.e-reorder-active-item:not(.e-vertical) .e-toolbar-pop .e-toolbar-item.e-active {
+        border: $tab-active-item-hide-border;
+      }
+
       .e-toolbar-pop {
         background: $tab-pop-bg-color;
         border: $tab-pop-border;
@@ -193,34 +189,44 @@
 
             &:hover {
               background: $tab-hover-bg-color;
+              border: $tab-pop-wrap-hover-border;
+              border-radius: $tab-pop-wrap-hover-border-radius;
 
-              @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-                border-color: $tab-wrap-hover-border-color;
+              .e-tab-text,
+              .e-tab-icon,
+              .e-close-icon {
+                color: $tab-hover-text-color;
               }
 
-              @if $skin-name == 'highcontrast' {
-                background: $tab-wrap-hover-bg-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;
 
               .e-tab-text,
               .e-tab-icon {
-                color: $tab-hover-text-color;
+                color: $tab-pop-wrap-active-icon-font;
               }
             }
+          }
 
-            &:active {
-              background: $tab-active-bg-color;
+          &.e-active .e-tab-wrap {
 
-              @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-                border-color: $tab-wrap-active-border-color;
-              }
-              @if $skin-name == 'highcontrast' {
+            .e-tab-text,
+            .e-tab-icon {
+              color: $tab-active-text-color;
+            }
+          }
 
-                .e-tab-text,
-                .e-tab-icon {
-                  color: $tab-wrap-active-color;
-                }
-              }
+          &.e-disable.e-overlay {
+            .e-tab-text,
+            .e-tab-icon {
+              color: $tab-disable-text-color;
             }
           }
         }
@@ -228,90 +234,61 @@
 
       .e-scroll-nav,
       .e-hscroll:not(.e-scroll-device) .e-scroll-nav {
-        background: inherit;
+        background: $tab-scroll-nav-bg;
         border: 0;
 
         .e-nav-arrow {
-          color: $tab-nav-icon-color;
-
-          @if $skin-name == 'fabric' {
-            border: 1px solid $tab-wrap-border-color;
-          }
-
-          @if $skin-name == '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 $skin-name == 'highcontrast' {
-              border: 2px solid $tab-wrap-hover-border-color;
-            }
+            border: $tab-scroll-arrow-hover-border;
           }
 
           &:active {
             box-shadow: none;
-
-            @if $skin-name == '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 $skin-name == 'fabric' {
-              border: 1px solid $tab-wrap-focus-border-color;
-            }
-
-            @if $skin-name == '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 $skin-name == 'highcontrast' {
-                border: 2px solid $tab-nav-focus-hover-border-color;
-              }
             }
 
             &:active {
-              @if $skin-name == '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;
             }
           }
         }
 
         &:active {
-
-          @if $skin-name == 'bootstrap' {
-            box-shadow: $tab-nav-active-box-shadow;
-          }
+          box-shadow: none;
+          background: $tab-scroll-nav-bg;
+          border: $tab-scroll-active-border;
         }
 
         &.e-overlay {
 
           .e-nav-arrow {
-            color: $tab-disable-nav-icon-color;
+            color: $tab-scroll-overlay-arrow-color;
 
             &:hover {
-              color: $tab-disable-nav-icon-color;
-
-              @if $skin-name == 'highcontrast' {
-                background: $tab-nav-disable-hover-bg-color;
-                border-color: $tab-nav-disable-hover-border-color;
-              }
+              color: $tab-scroll-overlay-arrow-hover-color;
+              background: $tab-scroll-overlay-arrow-hover-bg;
+              border-color: $tab-scroll-overlay-arrow-hover-border-color;
             }
           }
         }
@@ -325,27 +302,12 @@
         .e-popup-up-icon,
         .e-popup-down-icon {
           color: $tab-pop-icon-color;
-
-          @if $skin-name == 'fabric' {
-            border: 1px solid $tab-wrap-border-color;
-          }
-
-          @if $skin-name == 'highcontrast' {
-            border: 2px solid $tab-wrap-border-color;
-          }
+          border: $tab-pop-icon-border;
 
           &:hover {
             background: $tab-pop-icon-hover-bg-color;
-            border: $tab-pop-icon-hover-border;
+            border: $tab-pop-up-icon-hover-border;
             border-radius: $tab-active-item-border-radius;
-
-            @if $skin-name == 'fabric' {
-              border: 1px solid $tab-wrap-hover-border-color;
-            }
-
-            @if $skin-name == 'highcontrast' {
-              border: 2px solid $tab-wrap-hover-border-color;
-            }
           }
         }
 
@@ -357,61 +319,33 @@
         }
 
         &:focus {
-
+          background: $tab-pop-focus-bg;
           .e-popup-up-icon,
           .e-popup-down-icon {
             background: $tab-nav-focus-bg-color;
-            border: $tab-pop-icon-focus-border;
+            border: $tab-pop-up-icon-focus-border;
             border-radius: $tab-active-item-border-radius;
             color: $tab-nav-focus-icon-color;
 
-            @if $skin-name == 'fabric' {
-              border: 1px solid $tab-nav-focus-border-color;
-            }
-
-            @if $skin-name == 'bootstrap' {
-              background: $tab-nav-focus-bg-color;
-            }
-
-            @if $skin-name == 'highcontrast' {
-              border: 2px solid $tab-wrap-focus-border-color;
-            }
-
             &:hover {
               background: $tab-pop-icon-hover-bg-color;
-              border: $tab-pop-icon-hover-border;
+              border: $tab-pop-up-down-icon-hover-border;
               border-radius: $tab-active-item-border-radius;
-
-              @if $skin-name == 'fabric' {
-                border: 1px solid $tab-nav-focus-hover-border-color;
-              }
-
-              @if $skin-name == 'highcontrast' {
-                border: 2px solid $tab-nav-focus-hover-border-color;
-              }
             }
 
             &:active {
-              background: $tab-pop-icon-hover-bg-color;
-              border: $tab-pop-icon-active-border;
+              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 $skin-name == 'fabric' {
-                border: 1px solid $tab-nav-focus-active-border-color;
-              }
-
-              @if $skin-name == 'highcontrast' {
-                background: $tab-nav-focus-active-bg-color;
-                border: 2px solid $tab-nav-focus-active-border-color;
-                color: $tab-nav-focus-active-color;
-              }
             }
           }
         }
 
         &:hover {
           border: 0;
+          background: $tab-pop-hover-bg;
 
           &:active {
             background: transparent;
@@ -419,66 +353,64 @@
         }
 
         &:active {
-
-          @if $skin-name == 'bootstrap' {
-            box-shadow: $tab-nav-active-box-shadow;
-          }
+          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 $skin-name == 'highcontrast' {
-            .e-icons {
-              color: $tab-nav-pop-arrow-active-color;
-            }
+          .e-icons {
+            color: $tab-pop-active-icons-color;
+          }
 
-            &:focus {
-              border: $tab-nav-pop-arrow-active-focus-border;
-            }
+          &:focus {
+            border: $tab-pop-nav-active-border;
           }
         }
       }
 
-      &:nth-child(even) {
-
-        @if $skin-name == 'bootstrap' {
+      &.e-horizontal-bottom {
+        border-color: $tab-bottom-border-color;
+        border-style: solid;
+        border-width: $tab-bottom-border-width;
 
-          &[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: 0;
+          .e-tab-wrap:hover {
             border-radius: $tab-bottom-active-item-border-radius;
-            border-top: $tab-active-item-hide-border;
-            border-top-color: $tab-active-item-border-color;
+          }
 
-            @if $skin-name == 'bootstrap' {
-              border-bottom: 1px solid $tab-even-active-item-bottom-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 {
+        border-bottom: 0;
 
         &::before {
-          border-width: 0 1px 0 0;
+          border-width: $tab-vertical-before-border-width;
         }
 
         .e-toolbar-item {
@@ -493,9 +425,13 @@
 
           .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;
             }
           }
         }
@@ -504,8 +440,12 @@
 
           .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;
             }
           }
@@ -537,13 +477,10 @@
 
           &:hover {
             background: $tab-v-nav-hover-bg-color;
+            border-color: $tab-vertical-scroll-hover-border-color;
 
-            @if $skin-name == 'highcontrast' {
-              border-color: $border-fg;
-
-              &:active:focus {
-                background: $selection-bg;
-              }
+            &:active:focus {
+              background: $tab-vertical-scroll-hover-active-bg;
             }
 
             .e-nav-arrow {
@@ -561,10 +498,7 @@
             &:hover:active {
 
               .e-nav-arrow {
-
-                @if $skin-name == 'highcontrast' {
-                  color: $selection-font;
-                }
+                color: $tab-vertical-focus-active-arrow-color;
               }
             }
 
@@ -588,6 +522,7 @@
             &:hover {
               background: inherit;
               border: 0;
+              color: $tab-vertical-pop-icon-hover-color;
             }
           }
 
@@ -607,10 +542,7 @@
               }
 
               &:active {
-
-                @if $skin-name == 'highcontrast' {
-                  color: $content-font;
-                }
+                color: $tab-vertical-pop-icon-active-color;
               }
             }
           }
@@ -626,25 +558,22 @@
       }
     }
 
-    &.e-focused .e-tab-header {
+    &.e-focused > .e-tab-header {
 
       .e-toolbar-item {
 
         .e-tab-wrap:focus {
           background: $tab-focus-bg-color;
-
-          @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-            border-color: $tab-focused-wrap-focus-border-color;
-          }
-
-          @if $skin-name == 'highcontrast' {
-            border-style: solid;
-          }
+          border: $tab-focused-wrap-focus-border;
 
           .e-tab-icon,
           .e-tab-text {
             color: $tab-focus-text-color;
           }
+
+          .e-tab-icon {
+            color: $tab-focused-wrap-focus-icon-color;
+          }
         }
       }
 
@@ -654,11 +583,6 @@
 
           .e-nav-arrow {
             color: $tab-nav-focus-icon-color;
-
-            @if $skin-name == 'highcontrast' {
-              background: inherit;
-              border: 2px solid $tab-focused-nav-focus-border-color;
-            }
           }
         }
       }
@@ -670,11 +594,8 @@
           .e-popup-up-icon,
           .e-popup-down-icon {
             color: $tab-nav-focus-icon-color;
-
-            @if $skin-name == '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;
           }
         }
       }
@@ -684,14 +605,7 @@
         .e-scroll-nav {
 
           &:focus {
-
-            @if $skin-name == 'fabric' {
-              border-color: $neutral-secondary-alt;
-            }
-
-            @if $skin-name == 'highcontrast' {
-              border-color: $tab-focused-nav-focus-border-color;
-            }
+            border-color: $tab-vertical-focused-nav-focus-border-color;
 
             .e-nav-arrow {
               border: 0;
@@ -708,18 +622,6 @@
 
           &:focus {
             outline: $tab-v-pop-focus-outline;
-
-            .e-popup-up-icon,
-            .e-popup-down-icon {
-
-              @if $skin-name == 'fabric' {
-                border-color: $neutral-secondary-alt;
-              }
-
-              @if $skin-name == 'highcontrast' {
-                border-color: $tab-focused-nav-focus-border-color;
-              }
-            }
           }
         }
       }
@@ -760,14 +662,12 @@
       .e-tab-header {
         border-bottom: $tab-fill-hdr-border;
 
-        @if $skin-name == 'bootstrap' {
-          .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;
@@ -780,6 +680,10 @@
             &:hover .e-tab-icon {
               color: $tab-hover-text-color;
             }
+
+            &:hover .e-tab-icon {
+              color: $tab-fill-wrap-hover-icon-color;
+            }
           }
 
           .e-text-wrap {
@@ -792,10 +696,7 @@
             .e-tab-wrap {
               background: $tab-fill-active-bg-color;
               border-radius: $tab-active-item-border-radius;
-
-              @if $skin-name == 'fabric' or $skin-name == '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 {
@@ -808,9 +709,7 @@
             }
 
             .e-text-wrap::before {
-              @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-                border: 0;
-              }
+              border: $tab-fill-active-text-before-border;
             }
 
             .e-tab-text,
@@ -823,7 +722,7 @@
             }
 
             .e-close-icon:hover {
-              color: $tab-alt-active-hover-close-icon-color;
+              color: $tab-fill-active-close-hover-color;
             }
           }
         }
@@ -831,17 +730,32 @@
         .e-toolbar-pop {
 
           .e-toolbar-item:active:hover {
+            .e-tab-text,
+            .e-tab-icon {
+              color: $tab-fill-pop-active-icon-color;
+            }
+          }
+
+          .e-tab-wrap {
+            &:hover {
+              background: $tab-fill-pop-wrap-hover-bg;
+
+              .e-tab-text {
+                color: $tab-fill-pop-wrap-hover-text-color;
+              }
 
-            @if $skin-name == 'highcontrast' {
-              .e-tab-text,
               .e-tab-icon {
-                color: $tab-fill-pop-item-active-hover-color;
+                color: $tab-fill-pop-wrap-hover-icon-color;
+              }
+
+              .e-close-icon {
+                color: $tab-fill-pop-wrap-hover-close-color;
               }
             }
           }
         }
 
-        &:nth-child(even) {
+        &.e-horizontal-bottom {
           border-bottom: 0;
           border-top: $tab-fill-hdr-border;
 
@@ -877,7 +791,7 @@
             }
           }
 
-          &:nth-child(even) {
+          &.e-horizontal-bottom {
 
             .e-toolbar-item.e-active .e-tab-wrap {
               border-radius: $tab-fill-even-active-wrap-corner;
@@ -914,7 +828,7 @@
             }
           }
 
-          &:nth-child(even) {
+          &.e-horizontal-bottom {
             border-bottom: 0;
             border-top: $tab-fill-disable-hdr-border;
           }
@@ -926,32 +840,26 @@
         .e-toolbar-item {
 
           .e-tab-wrap:focus .e-tab-icon,
-          .e-tab-wrap:focus .e-tab-text {
-            color: $tab-alt-hover-text-color;
+          .e-tab-wrap:focus .e-tab-text,
+          .e-tab-wrap:focus .e-close-icon {
+            color: $tab-hover-text-color;
           }
 
           &.e-active .e-tab-wrap:focus {
             background: $tab-fill-focus-bg-color;
+            border-color: $tab-fill-focused-active-tabwrap-focus-border-color;
 
-            @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-              border-color: $tab-fill-focused-active-wrap-focus-border-color;
-            }
-
-            @if $skin-name == 'bootstrap' {
-
-              .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 $skin-name == 'highcontrast' {
-              border-style: solid;
+            .e-close-icon {
+              color: $tab-fill-focused-active-wrap-focus-close-color;
             }
 
             .e-tab-text,
             .e-tab-icon {
-              color: $tab-alt-active-hover-text-color;
+              color: $tab-alt-active-style-hover-icon-color;
             }
           }
         }
@@ -968,18 +876,17 @@
           background: $tab-alt-item-bg-color;
         }
 
-        @if $skin-name == 'bootstrap' {
-          .e-toolbar-items.e-hscroll {
-            border: 0;
-          }
+        .e-toolbar-items.e-hscroll {
+          border: 0;
         }
 
         .e-indicator {
           background: $tab-alt-border-color;
+          bottom: $tab-background-indicator-bottom;
         }
 
         .e-toolbar-item {
-          border: $tab-alt-item-border;
+          border: 0;
 
           .e-ripple-element {
             background: $tab-alt-ripple-bg-color;
@@ -987,127 +894,98 @@
 
           .e-tab-wrap {
             background: $tab-alt-item-bg-color;
+            border-color: $tab-background-wrap-border-color;
 
-            @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-              border-color: $tab-alt-wrap-border-color;
+            .e-tab-icon,
+            .e-close-icon {
+              color: $tab-alt-text-color;
             }
 
-            &:hover {
-              background: $tab-item-hover-bg-color;
-
-              .e-tab-text,
-              .e-tab-icon {
-                color: $tab-alt-active-text-color;
+            .e-tab-text {
+              color: $tab-background-text-color;
+            }
 
-                @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-                  color: $tab-alt-wrap-hover-color;
-                }
-              }
+            .e-close-icon:hover {
+              color: $tab-background-close-hover-color;
+            }
 
-              @if $skin-name == 'material' {
-                .e-close-icon {
+            &: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;
 
-                  &:hover,
-                  &:active {
-                    color: $tab-alt-wrap-hover-close-icon-focus-or-active-color;
-                  }
-                }
+              .e-tab-text {
+                color: $tab-background-wrap-hover-text-color;
               }
 
-              @if $skin-name == 'bootstrap' {
-                .e-tab-text,
-                .e-close-icon {
-                  color: $tab-alt-wrap-hover-color;
-                }
+              .e-tab-icon {
+                color: $tab-background-wrap-hover-icon-color;
               }
 
-              @if $skin-name == '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;
                 }
               }
             }
           }
 
-          .e-tab-text,
-          .e-tab-icon,
-          .e-close-icon {
-            color: $tab-alt-text-color;
-          }
-
-          .e-close-icon {
-            color: $tab-alt-close-icon-color;
-          }
-
-          .e-close-icon:hover {
-            color: $tab-alt-hover-text-color;
-          }
-
           &.e-active {
             border: 0;
+            margin: 0;
+            background: $tab-background-active-bg;
 
             .e-tab-wrap {
-              background: $tab-alt-active-bg-color;
-              border-radius: $tab-active-item-border-radius;
+              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 $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-                border-color: $tab-alt-active-wrap-border-color;
+              .e-tab-text {
+                color: $tab-background-active-text-color;
               }
 
-              &:hover {
+              .e-tab-icon {
+                color: $tab-background-active-icon-color;
+              }
 
-                .e-tab-text,
-                .e-tab-icon {
-                  color: $tab-alt-active-text-color;
-                }
+              .e-close-icon {
+                color: $tab-background-active-close-color;
+              }
 
-                @if $skin-name == 'fabric' {
-                  background: $tab-alt-active-wrap-hover-bg-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;
                 }
 
-                @if $skin-name == 'bootstrap' {
-                  .e-close-icon {
-                    color: $tab-alt-active-wrap-hover-close-color;
-                  }
+                .e-tab-icon {
+                  color: $tab-background-active-hover-icon-color;
                 }
 
-                @if $skin-name == 'highcontrast' {
-                  background: $tab-alt-active-wrap-hover-bg-color;
-                  border-color: $tab-alt-active-wrap-hover-border-color;
+                .e-close-icon {
+                  color: $tab-background-active-hover-close-color;
 
-                  .e-tab-icon,
-                  .e-tab-text,
-                  .e-close-icon {
-                    color: $tab-alt-active-wrap-hover-color;
+                  &:hover {
+                    color: $tab-background-active-close-hover-color;
                   }
 
-                  .e-close-icon {
-
-                    &:hover,
-                    &:active {
-                      color: $tab-alt-active-wrap-hover-close-hover-or-active-color;
-                    }
+                  &:active {
+                    color: $tab-background-activeitem-close-active-color;
                   }
+                }
 
-                  &:focus {
-                    background: $tab-alt-active-wrap-hover-focus-bg-color;
+                &:focus {
+                  background: $tab-background-active-wrap-focus-bg;
 
-                    .e-tab-icon,
-                    .e-tab-text {
-                      color: $tab-alt-active-wrap-hover-focus-color;
-                    }
+                  .e-tab-icon,
+                  .e-tab-text {
+                    color: $tab-background-active-wrap-focus-text-color;
                   }
                 }
               }
@@ -1117,39 +995,38 @@
 
                 .e-tab-text,
                 .e-tab-icon {
-                  color: $tab-alt-active-text-color;
+                  color: $tab-background-active-wrap-focus-icon;
                 }
               }
 
               &:focus:hover {
 
-                @if $skin-name == 'bootstrap' {
+                .e-tab-text {
+                  color: $tab-background-active-wrap-focushover-text-color;
+                }
 
-                  .e-tab-text,
-                  .e-close-icon {
-                    color: $tab-alt-active-text-color;
-                  }
+                .e-close-icon {
+                  color: $tab-background-active-wrap-focushover-close-color;
                 }
               }
             }
 
-            @if $skin-name == 'fabric' or $skin-name == '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;
+              color: $tab-background-active-text-icon-color;
             }
 
             .e-close-icon {
-              color: $tab-alt-active-close-icon-color;
+              color: $tab-background-active-close-icon-color;
             }
 
-            .e-close-icon:hover {
-              color: $tab-alt-active-hover-close-icon-color;
+            .e-close-icon:hover,
+            .e-tab-text:hover {
+              color: $tab-background-active-close-text-hover-color;
             }
 
             &.e-itop .e-tab-wrap,
@@ -1175,72 +1052,55 @@
             .e-tab-wrap {
 
               .e-tab-text,
-              .e-tab-icon {
-                color: $tab-alt-text-color;
+              .e-tab-icon,
+              .e-close-icon {
+                color: $tab-background-pop-text-color;
               }
 
               &:hover {
-                background: $tab-alt-hover-bg-color;
+                background: $tab-background-pop-wrap-hover-bg;
 
                 .e-tab-text,
-                .e-tab-icon {
-                  color: $tab-alt-active-text-color;
-
-                  @if $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
-                    color: $tab-alt-pop-wrap-hover-color;
-                  }
+                .e-tab-icon,
+                .e-close-icon {
+                  color: $tab-background-pop-wrap-hover-text-color;
                 }
               }
 
               &:active {
-                @if $skin-name == '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;
+                }
+
+                .e-close-icon {
+                  color: $tab-background-pop-wrap-active-close-color;
                 }
               }
             }
           }
         }
 
+        .e-hscroll:not(.e-scroll-device) .e-scroll-nav,
         .e-scroll-nav {
+          background: $tab-background-scroll-bg;
 
           .e-nav-arrow {
             color: $tab-alt-nav-icon-color;
-
-            @if $skin-name == 'fabric' {
-              border: 1px solid $tab-alt-nav-border-color;
-            }
-
-            @if $skin-name == 'highcontrast' {
-              border: 2px solid $tab-alt-nav-border-color;
-            }
+            border: $tab-background-scroll-arrow-border;
 
             &:hover {
-              background: $tab-bg-hover-nav-bg-color;
+              background: $tab-background-scroll-arrow-hover-bg;
               color: $tab-bg-hover-nav-icon-color;
-
-              @if $skin-name == '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 $skin-name == 'highcontrast' {
-                background: $tab-alt-nav-active-bg-color;
-                color: $tab-alt-nav-active-color;
-              }
-
-              .e-icons {
-                @if $skin-name == 'highcontrast' {
-                  color: $tab-alt-nav-active-color;
-                }
-              }
+              background: $tab-background-scroll-arrow-active-bg;
+              color: $tab-background-scroll-arrow-active-color;
             }
           }
 
@@ -1248,32 +1108,18 @@
 
             .e-nav-arrow {
               color: $tab-bg-hover-nav-icon-color;
-
-              @if $skin-name == 'fabric' {
-                border: 1px solid $tab-nav-focus-border-color;
-              }
-
-              @if $skin-name == '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 $skin-name == 'highcontrast' {
-                  border: 2px solid $tab-nav-focus-hover-border-color;
-                  color: $tab-alt-nav-focus-hover-color;
-                }
               }
 
               &:active {
-                @if $skin-name == '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;
               }
             }
           }
@@ -1283,48 +1129,25 @@
           }
         }
 
+        .e-hor-nav:not(.e-expended-nav),
         .e-hor-nav {
+          background: $tab-background-hor-nav-bg;
 
           .e-popup-up-icon,
           .e-popup-down-icon {
-            color: $tab-alt-nav-icon-color;
-
-            @if $skin-name == 'fabric' {
-              border: 1px solid $tab-alt-nav-border-color;
-            }
-
-            @if $skin-name == '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 $skin-name == 'bootstrap' {
-                background: $tab-alt-nav-hover-bg-color;
-              }
-
-              @if $skin-name == 'highcontrast' {
-                border-color: $tab-alt-nav-hover-border-color;
-                color: $tab-alt-nav-hover-color;
-              }
             }
 
             &:active {
-
-              .e-icons {
-                @if $skin-name == 'highcontrast' {
-                  color: $tab-alt-nav-active-color;
-                }
-              }
-
               &:hover {
-
-                @if $skin-name == '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;
               }
             }
           }
@@ -1334,31 +1157,17 @@
             .e-popup-up-icon,
             .e-popup-down-icon {
               color: $tab-bg-hover-nav-icon-color;
-
-              @if $skin-name == 'fabric' {
-                border: 1px solid $tab-nav-focus-border-color;
-              }
-
-              @if $skin-name == '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 $skin-name == '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 $skin-name == '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;
               }
             }
           }
@@ -1368,15 +1177,60 @@
           }
 
           &.e-nav-active {
-
             .e-popup-up-icon {
               color: $tab-bg-hover-nav-icon-color;
             }
           }
         }
 
+        &.e-horizontal-bottom {
+          .e-toolbar-item.e-active {
+            border: 0;
+            margin: 0;
+
+            .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 {
 
+          &.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-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-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-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;
+              }
+            }
+          }
+
           .e-scroll-nav {
 
             .e-nav-arrow {
@@ -1475,7 +1329,7 @@
       &.e-accent .e-tab-header {
 
         .e-indicator {
-          background: $tab-border-color;
+          background: $tab-background-accent-indicator-bg;
         }
 
         &.e-disable {
@@ -1491,73 +1345,68 @@
         .e-toolbar-item {
 
           .e-tab-wrap:focus {
-
-            @if $skin-name == 'material' or $skin-name == 'bootstrap' {
-              background: $tab-alt-hover-bg-color;
-            }
-
-            @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-              border-color: $tab-wrap-focus-border-color;
-            }
-
-            @if $skin-name == 'highcontrast' {
-              border-style: solid;
-            }
+            background: $tab-background-focused-wrap-focus-bg;
+            border-color: $tab-background-focused-wrap-focus-border-color;
 
             .e-tab-icon,
-            .e-tab-text {
-              color: $tab-alt-text-color;
+            .e-tab-text,
+            .e-close-icon {
+              color: $tab-background-focused-wrap-focus-close-color;
             }
           }
 
           &.e-active {
 
             .e-tab-wrap:focus {
-
-              @if $skin-name == 'material' or $skin-name == 'bootstrap' {
-                background: $tab-key-alt-active-focus-bg-color;
-              }
-
-              @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-                border-color: $tab-alt-focused-active-wrap-focus-border-color;
-              }
-
-              @if $skin-name == '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;
+              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;
+            }
+
+            .e-tab-wrap:focus {
+              .e-tab-text {
+                color: $tab-background-focused-active-wrap-focus-text-color;
+              }
+
+              .e-tab-icon {
+                color: $tab-background-focused-active-wrap-focus-icon-color;
+              }
 
-              @if $skin-name == 'fabric' {
-                background: $tab-alt-focused-active-wrap-hover-bg-color;
+              .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 $skin-name == 'bootstrap' {
-                .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;
+              }
+
+              .e-close-icon {
+                color: $tab-background-focused-active-wrap-hover-close-color;
               }
             }
 
             .e-tab-wrap:focus:hover {
-
-              @if $skin-name == 'bootstrap' {
-
-                .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;
               }
             }
 
@@ -1614,6 +1463,22 @@
       .e-item {
         background: inherit;
         color: $tab-content-font-color;
+        font-size: $tab-content-font-size;
+      }
+    }
+  }
+
+  .e-tab-clone-element {
+    background: $tab-clone-item-bg-color;
+    color: $tab-clone-text-color;
+
+    .e-tab-wrap {
+      border-radius: $tab-active-item-border-radius;
+      color: $tab-clone-text-color;
+      border: $tab-clone-item-wrap-border;
+
+      .e-tab-icon {
+        color: $tab-clone-text-color;
       }
     }
   }