@syncfusion/ej2-angular-navigations 20.1.60 → 20.2.36

package/styles/tab/_layout.scss

@@ -0,0 +1,4115 @@
+@include export-module('tab-layout') {
+  /*! tab layout */
+
+  .e-bigger .e-tab,
+  .e-tab.e-bigger {
+
+    .e-tab-header {
+      height: $tab-big-height;
+      min-height: $tab-big-height;
+
+      .e-toolbar-items {
+        height: auto;
+        min-height: auto;
+
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' or $tbar-skin == 'FluentUI' {
+          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;
+
+          @media screen and (max-width: 480px) {
+            margin: $tab-nrml-first-item-margin;
+          }
+        }
+
+        &:not(.e-tbar-pos) .e-toolbar-item:last-child {
+          padding-bottom: $tab-big-boot-active-item-padding-bottom;
+
+          @media screen and (max-width: 480px) {
+            margin: $tab-mob-last-item-margin;
+          }
+        }
+
+        .e-indicator + .e-toolbar-item:last-child.e-active {
+          @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+            margin: 1px 2px 0 0;
+          }
+        }
+      }
+
+      .e-toolbar-items.e-hscroll {
+
+        &:not(.e-tbar-pos) .e-toolbar-item:last-child {
+          margin: $tab-big-scroll-last-item-margin;
+
+          @media screen and (max-width: 480px) {
+            margin: $tab-mob-last-item-margin;
+          }
+
+          &.e-active {
+            margin: $tab-big-active-last-item-margin;
+          }
+        }
+
+        .e-scroll-nav {
+          width: 50px;
+          @if $tab-skin == 'FluentUI' {
+            width: 38px;
+          }
+          @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+            border-radius: 4px;
+            width: 38px;
+          }
+        }
+      }
+
+      .e-toolbar-item {
+
+        &: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-big-height;
+
+          @if $tab-skin == 'fabric' {
+            height: $tab-big-height - 2;
+          }
+          @else if $tab-skin == 'highcontrast' {
+            height: $tab-big-height - 4;
+          }
+
+        }
+
+        .e-tab-text {
+          font-size: $tab-big-font-size;
+          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+            align-self: auto;
+          }
+        }
+
+        &.e-active {
+          margin: $tab-big-boot-item-margin;
+          padding-bottom: $tab-big-boot-active-item-padding-bottom;
+
+          @media screen and (max-width: 480px) {
+            margin: $tab-mob-boot-item-margin;
+          }
+
+          @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+            &.e-ileft:not(.e-icon) .e-tab-icon::before {
+              position: relative;
+              top: -.5px;
+            }
+          }
+
+          .e-text-wrap {
+            height: $tab-big-active-text-container-height;
+            margin-top: $tab-active-text-container-margin;
+
+            @if $tab-skin == 'fabric' {
+              height: $tab-big-height - 2;
+            }
+            @else if $tab-skin == 'highcontrast' {
+              height: $tab-big-height - 4;
+            }
+          }
+
+          &.e-ileft .e-text-wrap,
+          &.e-iright .e-text-wrap {
+            height: $tab-big-active-it-text-container-height;
+
+            @if $tab-skin == 'fabric' {
+              height: $tab-big-height - 2;
+            }
+            @else if $tab-skin == 'highcontrast' {
+              height: $tab-big-height - 4;
+            }
+          }
+
+          &.e-ileft .e-text-wrap {
+            padding: $tab-big-ileft-active-text-wrap-padding;
+
+            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+              padding: 0;
+            }
+          }
+        }
+
+        .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;
+
+          @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+            line-height: $tab-big-icon-container-size;
+          }
+        }
+
+        .e-tab-icon,
+        .e-tab-icon::before {
+          font-size: $tab-big-icon-size;
+        }
+
+        &.e-icon {
+
+          .e-tab-wrap {
+            padding: $tab-big-io-wrap-padding;
+          }
+        }
+
+        @if $tab-skin == 'FluentUI' {
+          .e-icon-right {
+            margin: $tab-big-it-text-margin;
+
+            @media screen and (max-width: 480px) {
+              margin: $tab-mob-it-text-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;
+          }
+
+          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+
+            .e-text-wrap {
+              height: auto;
+            }
+
+            &.e-active .e-tab-wrap {
+              height: 72px;
+            }
+          }
+        }
+
+        &.e-itop .e-tab-text {
+          margin: $tab-big-icon-top-margin;
+        }
+
+        &.e-ibottom .e-tab-text {
+          margin: $tab-big-icon-bottom-margin;
+        }
+      }
+
+      &.e-close-show {
+
+        .e-toolbar-item.e-itop .e-text-wrap,
+        .e-toolbar-item.e-ibottom .e-text-wrap {
+          margin-right: $tab-big-text-container-margin-right;
+        }
+      }
+
+      .e-toolbar-pop {
+
+        .e-toolbar-item {
+          height: $tab-big-pop-item-height;
+          min-height: $tab-big-pop-item-height;
+
+          .e-tab-wrap {
+            height: $tab-big-pop-item-height;
+            padding: $tab-big-pop-item-wrap-padding;
+
+            @media screen and (max-width: 480px) {
+              padding: $tab-mob-pop-item-wrap-padding;
+            }
+          }
+
+          .e-text-wrap {
+            height: $tab-big-pop-item-height;
+
+            @if $tab-skin == 'fabric' {
+              height:  $tab-big-pop-item-height - 2;
+            }
+            @else if $tab-skin == 'highcontrast' {
+              height:  $tab-big-pop-item-height - 4;
+            }
+          }
+
+          .e-tab-text + .e-close-icon[style = 'display:block'] {
+            padding-right: $tab-big-pop-text-padding-right;
+
+            @media screen and (max-width: 480px) {
+              padding-right: 0;
+            }
+          }
+
+          .e-close-icon {
+            margin: 0;
+          }
+
+          .e-close-icon::before {
+            top: $tab-big-pop-close-top;
+          }
+
+          &.e-itop,
+          &.e-ibottom {
+
+            .e-close-icon {
+              right: $tab-big-pop-close-icon-top-bottom-right;
+            }
+          }
+
+          &.e-itop:not(.e-separator),
+          &.e-ibottom:not(.e-separator) {
+            min-height: $tab-pop-big-icon-top-bottom-item-height;
+
+            @media screen and (max-width: 480px) {
+              min-height: $tab-pop-big-icon-top-bottom-item-height;
+            }
+          }
+
+          &.e-itop,
+          &.e-itop .e-tab-wrap,
+          &.e-ibottom,
+          &.e-ibottom .e-tab-wrap {
+            height: $tab-pop-big-icon-top-bottom-item-height;
+
+            @media screen and (max-width: 480px) {
+              height: $tab-pop-big-icon-top-bottom-item-height;
+            }
+          }
+
+          &.e-itop .e-tab-text,
+          &.e-ibottom .e-tab-text {
+            margin: 0;
+            padding-left: 0;
+            padding-right: 12px;
+
+            @media screen and (max-width: 480px) {
+              margin: 0;
+              padding-left: 0;
+              padding-right: 0;
+            }
+          }
+        }
+      }
+
+      .e-scroll-nav {
+        height: $tab-big-height;
+        min-height: $tab-big-height;
+        padding: $tab-big-nav-right-icon-padding;
+
+        @media screen and (max-width: 480px) {
+          padding: $tab-mob-nav-right-icon-padding;
+        }
+
+        &.e-scroll-right-nav {
+          padding: $tab-big-nav-right-icon-padding;
+        }
+
+        &.e-scroll-left-nav {
+          padding: $tab-big-nav-left-icon-padding;
+        }
+
+        .e-nav-arrow {
+          font-size: $tab-big-nav-icon-size;
+          height: $tab-big-nav-icon-container-size;
+          line-height: $tab-big-nav-icon-container-size;
+          width: $tab-big-nav-icon-container-size;
+
+          @media screen and (max-width: 480px) {
+            font-size: $tab-big-nav-icon-size;
+            height: $tab-big-nav-icon-container-size;
+            line-height: $tab-big-nav-icon-container-size;
+            width: $tab-big-nav-icon-container-size;
+          }
+        }
+
+        .e-nav-left-arrow,
+        .e-nav-right-arrow {
+
+          &::before {
+            font-size: $tab-big-nav-icon-size;
+            line-height: $tab-big-nav-icon-container-size;
+            top: 0;
+            vertical-align: initial;
+
+            @if $tab-skin == 'highcontrast' {
+              top: -2px;
+            }
+          }
+        }
+      }
+
+      .e-hor-nav {
+        height: $tab-big-height;
+        min-height: $tab-big-height;
+        padding: $tab-big-nav-right-icon-padding;
+
+        @media screen and (max-width: 480px) {
+          padding: $tab-mob-nav-right-icon-padding;
+        }
+
+        .e-popup-up-icon,
+        .e-popup-down-icon {
+          font-size: $tab-big-nav-icon-size;
+          height: $tab-big-nav-icon-container-size;
+          line-height: $tab-big-nav-icon-container-size;
+          width: $tab-big-nav-icon-container-size;
+
+          @media screen and (max-width: 480px) {
+            font-size: $tab-big-nav-icon-size;
+            height: $tab-big-nav-icon-container-size;
+            line-height: $tab-big-nav-icon-container-size;
+            width: $tab-big-nav-icon-container-size;
+          }
+
+          &::before {
+            font-size: $tab-big-nav-icon-size;
+            line-height: $tab-big-nav-icon-container-size;
+            top: 0;
+            vertical-align: initial;
+
+            @media screen and (max-width: 480px) {
+              font-size: $tab-mob-nav-icon-size;
+            }
+
+            @if $tab-skin == 'highcontrast' {
+              top: -2px;
+            }
+          }
+
+          &:hover {
+            @if $tab-skin == 'bootstrap' {
+              line-height: 42px;
+            }
+            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+              line-height: 38px;
+            }
+
+            &::before {
+              top: $tab-big-hover-nav-pop-icon-top;
+
+              @if $tab-skin == 'bootstrap' {
+                line-height: 42px;
+                top: .5px;
+              }
+              @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+                line-height: 38px;
+                top: .5px;
+              }
+
+              @if $tab-skin == 'highcontrast' {
+                top: -2px;
+              }
+            }
+          }
+        }
+
+        &:focus {
+
+          .e-popup-up-icon,
+          .e-popup-down-icon {
+            @if $tab-skin == 'bootstrap' {
+              line-height: 42px;
+            }
+            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+              line-height: 38px;
+            }
+
+            &::before {
+              top: $tab-big-hover-nav-pop-icon-top;
+
+              @if $tab-skin == 'bootstrap' {
+                line-height: 42px;
+              }
+              @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+                line-height: 38px;
+              }
+
+              @if $tab-skin == 'highcontrast' {
+                top: -2px;
+              }
+            }
+
+            &:hover {
+              @if $tab-skin == 'bootstrap' {
+                line-height: 42px;
+                top: -2px;
+              }
+              @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+                line-height: 38px;
+                top: -2px;
+              }
+            }
+          }
+        }
+      }
+
+      .e-hor-nav.e-ie-align,
+      .e-scroll-nav.e-ie-align {
+
+        .e-popup-up-icon,
+        .e-popup-down-icon {
+          line-height: $tab-big-ie-pop-icon-line-height;
+        }
+
+        .e-nav-left-arrow,
+        .e-nav-right-arrow {
+          line-height: $tab-big-ie-nav-icon-line-height;
+        }
+      }
+
+      &.e-horizontal-bottom {
+
+        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child.e-active {
+          margin: $tab-big-even-last-item-margin;
+        }
+
+        .e-toolbar-item {
+
+          &.e-active {
+            margin: $tab-big-even-boot-item-margin;
+            padding-bottom: 0;
+
+            @media screen and (max-width: 480px) {
+              margin: $tab-mob-even-boot-item-margin;
+            }
+
+            .e-tab-text {
+              padding-top: $tab-big-even-boot-active-item-padding-bottom;
+            }
+
+            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+              .e-close-icon::before {
+                top: .5px;
+              }
+
+              &.e-itop .e-text-wrap,
+              &.e-ibottom .e-text-wrap {
+                height: initial;
+              }
+
+              &.e-itop .e-close-icon::before,
+              &.e-ibottom .e-close-icon::before {
+                top: 1.5px;
+              }
+            }
+          }
+
+          &.e-active:last-child {
+            margin: $tab-big-even-last-item-margin;
+            padding-bottom: 0;
+
+            @media screen and (max-width: 480px) {
+              margin: $tab-mob-even-last-item-margin;
+            }
+
+            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4'or $tbar-skin == 'bootstrap5' {
+
+              .e-tab-text {
+                padding-top: .5px;
+              }
+
+              .e-close-icon::before {
+                top: 0;
+              }
+            }
+          }
+
+          &.e-itop,
+          &.e-ibottom {
+            padding-bottom: 0;
+            padding-top: 0;
+          }
+
+          &.e-itop.e-active .e-tab-wrap:focus,
+          &.e-ibottom.e-active .e-tab-wrap:focus {
+
+            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+
+              .e-icon-close::before {
+                top: -1px;
+              }
+            }
+          }
+
+          &.e-ileft.e-active .e-text-wrap {
+            margin: $tab-big-even-ileft-active-text-wrap-margin;
+          }
+
+          &.e-active .e-text-wrap {
+            height: $tab-big-even-active-text-container-height;
+            padding: 0;
+
+            @if $tab-skin == 'fabric' {
+              height: $tab-big-height - 2;
+            }
+            @else if $tab-skin == 'highcontrast' {
+              height: $tab-big-height - 4;
+            }
+          }
+
+          &.e-active.e-itop .e-text-wrap,
+          &.e-active.e-ibottom .e-text-wrap {
+            height: $tab-big-height;
+
+            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+              height: auto;
+            }
+          }
+
+          &.e-itop.e-active .e-text-wrap,
+          &.e-ibottom.e-active .e-text-wrap {
+            height: initial;
+          }
+
+          &.e-ileft.e-active {
+
+            @if $tab-skin == 'fabric' {
+              height: $tab-big-height - 2;
+            }
+            @else if $tab-skin == 'highcontrast' {
+              height: $tab-big-height - 4;
+            }
+          }
+        }
+      }
+
+      &.e-vertical {
+        max-width: 150px;
+
+        &[style*= 'overflow: hidden']::before {
+          bottom: $tab-big-vertical-scroll-nav-top-bottom;
+          top: $tab-big-vertical-scroll-nav-top-bottom;
+
+          @media screen and (max-width: 480px) {
+            bottom: 0;
+            top: 0;
+          }
+        }
+
+        .e-toolbar-items {
+          height: inherit;
+
+          &:not(.e-tbar-pos) {
+
+            .e-toolbar-item:last-child {
+              margin: 0;
+            }
+          }
+        }
+
+        .e-toolbar-items.e-vscroll:not(.e-scroll-device) {
+          padding: $tab-vscroll-big-padding;
+        }
+
+        .e-toolbar-item {
+
+          .e-tab-wrap {
+            padding: $tab-big-v-wrap-padding;
+          }
+
+          &.e-itop,
+          &.e-ibottom {
+
+            .e-close-icon {
+              right: $tab-v-big-close-icon-top-bottom-right;
+            }
+          }
+
+          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+
+            &.e-ileft.e-icon {
+              min-height: $tab-big-height;
+              min-width: $tab-big-height;
+            }
+          }
+        }
+
+        .e-scroll-nav {
+          height: $tab-big-vertical-nav-arrow-size;
+          min-height: $tab-big-vertical-nav-arrow-size;
+
+          .e-nav-arrow {
+            font-size: $tab-big-vertical-nav-arrow-font-size;
+            height: $tab-big-vertical-nav-arrow-size;
+            line-height: $tab-big-vertical-nav-arrow-size;
+            width: $tab-big-vertical-nav-arrow-size;
+          }
+        }
+
+        .e-hor-nav {
+          padding: $tab-big-wrap-padding;
+
+          .e-popup-up-icon,
+          .e-popup-down-icon {
+
+            &::before {
+              line-height: $tab-big-more-btn-line-height;
+            }
+
+            &::after {
+              font-size: $tab-big-font-size;
+              line-height: $tab-big-more-btn-line-height;
+              margin: $tab-pop-more-icon-margin;
+            }
+          }
+        }
+
+        &.e-toolpop {
+
+          .e-toolbar-items {
+            height: auto;
+          }
+        }
+      }
+    }
+
+    &.e-vertical-icon {
+
+      .e-tab-header {
+        height: $tab-big-tb-icon-height;
+        min-height: $tab-big-tb-icon-height;
+
+        .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 $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+
+            .e-text-wrap::before {
+              bottom: -10px;
+              top: auto;
+            }
+          }
+        }
+
+        .e-scroll-nav {
+          height: $tab-big-icon-top-bottom-item-height;
+        }
+
+        .e-hor-nav {
+          height: $tab-big-icon-top-bottom-item-height;
+
+          .e-popup-up-icon::before,
+          .e-popup-down-icon::before {
+
+            @media screen and (max-width: 480px) {
+              font-size: $tab-mob-nav-vicon-size;
+            }
+          }
+        }
+      }
+
+      @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+        &.e-rtl .e-toolbar-item.e-active {
+          margin: 0 0 0 2px;
+        }
+      }
+
+      &.e-vertical-tab {
+
+        .e-tab-header.e-vertical {
+
+          .e-toolbar-items {
+            height: inherit;
+          }
+
+          .e-scroll-nav {
+            height: $tab-big-vertical-nav-arrow-size;
+          }
+        }
+      }
+    }
+
+    &.e-focused {
+
+      .e-tab-header {
+
+        .e-toolbar-item {
+
+          .e-tab-wrap:focus {
+            height: $tab-big-height;
+          }
+
+          .e-tab-wrap:focus .e-text-wrap {
+            height: $tab-big-height;
+
+            @if $tab-skin == 'fabric' {
+              height: $tab-big-height - 2;
+            }
+            @else if $tab-skin == 'highcontrast' {
+              height: $tab-big-height - 4;
+            }
+          }
+
+          &.e-itop,
+          &.e-ibottom {
+
+            .e-tab-wrap:focus {
+              height: $tab-big-focus-icon-top-bottom-item-height;
+
+              .e-text-wrap {
+                height: auto;
+              }
+            }
+
+            &.e-active .e-tab-wrap:focus .e-text-wrap {
+              height: auto;
+            }
+          }
+        }
+
+        .e-toolbar-pop {
+
+          .e-toolbar-item {
+
+            .e-tab-wrap:focus {
+              height: $tab-big-pop-item-height;
+
+              .e-text-wrap {
+                height: $tab-big-pop-item-height;
+
+                @if $tab-skin == 'fabric' {
+                  height:  $tab-big-pop-item-height - 2;
+                }
+                @else if $tab-skin == 'highcontrast' {
+                  height:  $tab-big-pop-item-height - 4;
+                }
+              }
+            }
+
+            &.e-itop .e-tab-wrap:focus,
+            &.e-ibottom .e-tab-wrap:focus {
+              height: $tab-big-height;
+            }
+          }
+        }
+
+        &.e-horizontal-bottom {
+
+          .e-toolbar-item {
+
+            &.e-active {
+
+              .e-tab-wrap:focus .e-text-wrap {
+                height: $tab-big-height;
+                padding: 0;
+
+                @if $tab-skin == 'fabric' {
+                  height: $tab-big-height - 2;
+                }
+                @else if $tab-skin == 'highcontrast' {
+                  height: $tab-big-height - 4;
+                }
+              }
+
+              &.e-ileft {
+
+                @if $tab-skin == 'fabric' {
+                  height: $tab-big-height - 2;
+                }
+                @else if $tab-skin == 'highcontrast' {
+                  height: $tab-big-height - 4;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.e-ie .e-tab-header {
+
+      .e-hor-nav.e-ie-align,
+      .e-scroll-nav.e-ie-align {
+
+        .e-popup-up-icon,
+        .e-popup-down-icon {
+          line-height: $tab-big-ie-pop-icon-line-height;
+        }
+
+        .e-nav-left-arrow,
+        .e-nav-right-arrow {
+          line-height: $tab-big-ie-nav-icon-line-height;
+        }
+      }
+    }
+
+    &.e-edge .e-tab-header {
+
+      .e-hor-nav.e-ie-align,
+      .e-scroll-nav.e-ie-align {
+
+        .e-popup-up-icon,
+        .e-popup-down-icon {
+          line-height: $tab-big-edge-pop-icon-line-height;
+        }
+
+        .e-nav-left-arrow,
+        .e-nav-right-arrow {
+          line-height: $tab-big-edge-nav-icon-line-height;
+        }
+      }
+    }
+
+    &.e-safari .e-tab-header {
+
+      .e-close-icon::before {
+        top: $tab-big-safari-close-icon-top;
+      }
+
+      .e-hor-nav,
+      .e-scroll-nav {
+
+        .e-popup-up-icon::before,
+        .e-popup-down-icon::before {
+          top: 0;
+        }
+
+        .e-nav-left-arrow::before,
+        .e-nav-right-arrow::before {
+          top: 0;
+        }
+      }
+    }
+
+    &.e-rtl {
+
+      @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+
+        .e-tab-header {
+
+          .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child.e-active {
+            margin: $tab-big-rtl-item-margin;
+          }
+
+          &.e-horizontal-bottom {
+
+            .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-separator) {
+              margin: 0 0 0 2px;
+
+              &.e-active {
+                margin: 0 0 0 2px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.e-fill {
+
+      .e-tab-header {
+        height: $tab-big-fill-height;
+        min-height: $tab-big-fill-height;
+
+        @media screen and (max-width: 480px) {
+          height: $tab-mob-fill-height;
+          min-height: $tab-mob-fill-height;
+        }
+
+        .e-toolbar-items {
+          height: auto;
+          min-height: $tab-big-fill-height;
+
+          @media screen and (max-width: 480px) {
+            min-height: $tab-mob-fill-height;
+          }
+        }
+
+        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
+        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
+          margin: $tab-big-alt-first-item-margin;
+          padding: 0;
+          @if $tab-skin == 'tailwind' {
+            padding: 0 12px;
+          }
+        }
+
+        .e-toolbar-item {
+
+          &:not(.e-separator) {
+            height: $tab-big-fill-height;
+            margin: $tab-alt-item-margin;
+            min-height: $tab-big-fill-height;
+
+            @media screen and (max-width: 480px) {
+              height: $tab-mob-fill-height;
+              min-height: $tab-mob-fill-height;
+            }
+          }
+
+          &:not(.e-separator).e-itop,
+          &:not(.e-separator).e-ibottom {
+            height: $tab-big-fill-icon-top-bottom-item-height;
+            min-height: $tab-big-fill-icon-top-bottom-item-height;
+          }
+
+          .e-tab-wrap {
+            height: $tab-big-fill-height;
+            padding: $tab-fill-big-wrap-padding;
+
+            @media screen and (max-width: 480px) {
+              height: $tab-mob-fill-height;
+              padding: $tab-fill-big-wrap-padding;
+            }
+          }
+
+          .e-text-wrap {
+            height: $tab-big-fill-height;
+
+            @media screen and (max-width: 480px) {
+              height: $tab-mob-fill-height;
+            }
+
+            @if $tab-skin == 'fabric' {
+              height: $tab-big-fill-height - 2;
+            }
+
+            @if $tab-skin == 'highcontrast' {
+              height: $tab-big-fill-height - 4;
+            }
+          }
+
+          &.e-active {
+            padding: $tab-alt-big-active-item-padding;
+
+            .e-tab-wrap {
+              margin-bottom: $tab-fill-big-active-item-wrap-margin-bottom;
+            }
+
+            .e-text-wrap {
+              height: $tab-big-fill-height;
+
+              @media screen and (max-width: 480px) {
+                height: $tab-mob-fill-height;
+              }
+
+              @if $tab-skin == 'fabric' {
+                height: $tab-big-fill-height - 2;
+              }
+
+              @if $tab-skin == 'highcontrast' {
+                height: $tab-big-fill-height - 4;
+              }
+            }
+
+            &.e-ileft .e-text-wrap,
+            &.e-iright .e-text-wrap {
+              height: $tab-fill-big-active-it-text-container-height;
+
+              @media screen and (max-width: 480px) {
+                height: $tab-fill-big-active-it-text-container-height;
+              }
+
+              @if $tab-skin == 'fabric' {
+                height: $tab-big-fill-height - 2;
+              }
+              @else if $tab-skin == 'highcontrast' {
+                height: $tab-big-fill-height - 4;
+              }
+            }
+          }
+
+          &.e-itop .e-tab-wrap,
+          &.e-ibottom .e-tab-wrap {
+            height: $tab-big-fill-icon-top-bottom-item-height;
+          }
+        }
+
+        .e-toolbar-pop {
+
+          .e-toolbar-item.e-itop:not(.e-separator),
+          .e-toolbar-item.e-ibottom:not(.e-separator) {
+            height: auto;
+          }
+        }
+
+        &.e-vertical {
+
+          .e-toolbar-items {
+
+            .e-toolbar-item {
+
+              .e-tab-wrap {
+                padding: $tab-big-v-wrap-padding;
+              }
+            }
+          }
+        }
+
+        &.e-horizontal-bottom {
+
+          .e-toolbar-item.e-active .e-text-wrap {
+            height: $tab-fill-big-even-active-text-height;
+
+            @if $tab-skin == 'fabric' {
+              height: $tab-big-fill-height - 2;
+            }
+
+            @if $tab-skin == 'highcontrast' {
+              height: $tab-big-fill-height - 4;
+            }
+          }
+
+          .e-toolbar-item.e-itop .e-text-wrap,
+          .e-toolbar-item.e-ibottom .e-text-wrap {
+            height: auto;
+          }
+
+          .e-toolbar-item.e-itop .e-tab-wrap:focus .e-text-wrap,
+          .e-toolbar-item.e-ibottom .e-tab-wrap:focus .e-text-wrap {
+            height: $tab-big-fill-tb-wrap-height;
+          }
+        }
+      }
+
+      &.e-focused {
+
+        .e-tab-header {
+
+          .e-toolbar-item {
+
+            .e-tab-wrap:focus {
+              height: $tab-focus-big-fill-height;
+            }
+
+            .e-tab-wrap:focus .e-text-wrap {
+              height: $tab-focus-big-fill-height;
+
+              @if $tab-skin == 'fabric' {
+                height: $tab-big-fill-height - 2;
+              }
+
+              @if $tab-skin == 'highcontrast' {
+                height: $tab-big-fill-height - 4;
+              }
+            }
+
+            &.e-active .e-tab-wrap:focus {
+
+              .e-text-wrap {
+                @if $tab-skin == 'fabric' {
+                  height: $tab-big-fill-height - 2;
+                }
+                @else if $tab-skin == 'highcontrast' {
+                  height: $tab-big-fill-height - 4;
+                }
+              }
+
+              .e-close-icon::before {
+
+                @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+                  top: 1px;
+                }
+              }
+            }
+
+            &.e-itop .e-tab-wrap:focus,
+            &.e-ibottom .e-tab-wrap:focus {
+              height: $tab-big-focus-fill-icon-top-bottom-item-height;
+
+              .e-text-wrap {
+                height: auto;
+
+                @media screen and (max-width: 480px) {
+                  height: auto;
+                }
+              }
+            }
+          }
+
+          &.e-horizontal-bottom {
+
+            .e-tab-wrap:focus .e-text-wrap {
+              @if $tab-skin == 'fabric' {
+                height: $tab-big-fill-height - 2;
+              }
+
+              @if $tab-skin == 'highcontrast' {
+                height: $tab-big-fill-height - 4;
+              }
+            }
+          }
+        }
+      }
+
+      &.e-rtl .e-tab-header {
+
+        .e-toolbar-item:not(.e-separator) {
+          margin: $tab-big-rtl-alt-item-margin;
+        }
+      }
+
+      &.e-vertical-icon {
+
+        .e-tab-header {
+          height: $tab-big-tb-icon-height - 2;
+          min-height: $tab-big-tb-icon-height - 2;
+        }
+      }
+    }
+
+    &.e-background {
+
+      .e-tab-header {
+
+        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
+        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
+          margin: $tab-big-alt-first-item-margin;
+          padding: 0;
+          @if $tab-skin == 'tailwind' {
+            padding: 0 12px;
+          }
+        }
+
+        .e-toolbar-item {
+
+          &:not(.e-separator) {
+            @if $tab-skin != 'bootstrap5' {
+              margin: $tab-alt-item-margin;
+            }
+          }
+
+          .e-tab-wrap {
+            padding: $tab-bg-big-wrap-padding;
+
+            @media screen and (max-width: 480px) {
+              padding: $tab-bg-big-wrap-padding;
+            }
+          }
+
+          &.e-active {
+            padding: $tab-alt-big-active-item-padding;
+
+            .e-tab-wrap {
+              margin-bottom: $tab-bg-big-active-item-wrap-margin-bottom;
+            }
+
+            .e-text-wrap {
+              height: $tab-big-height;
+
+              @if $tab-skin == 'fabric' {
+                height: $tab-big-height - 2;
+              }
+
+              @if $tab-skin == 'highcontrast' {
+                height: $tab-big-height - 4;
+              }
+            }
+          }
+
+          &:hover {
+            @if $tab-skin == 'highcontrast' {
+              &.e-itop,
+              &.e-ibottom {
+
+                .e-text-wrap {
+                  height: auto;
+                }
+              }
+            }
+          }
+        }
+
+        &.e-vertical {
+
+          .e-toolbar-items {
+
+            .e-toolbar-item {
+
+              .e-tab-wrap {
+                padding: $tab-big-v-wrap-padding;
+              }
+            }
+          }
+        }
+      }
+
+      &.e-rtl .e-tab-header {
+
+        .e-toolbar-item:not(.e-separator) {
+          margin: $tab-big-rtl-alt-item-margin;
+        }
+      }
+    }
+
+    &.e-rtl {
+
+      .e-tab-header {
+
+        .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-rtl-item-margin;
+        }
+
+        .e-toolbar-item:not(.e-separator) {
+          margin: $tab-big-rtl-item-margin;
+
+          @if $tab-skin == 'FluentUI' {
+            .e-icon-right {
+              margin: $tab-rtl-big-it-text-margin;
+
+              @media screen and (max-width: 480px) {
+                margin: $tab-rtl-mob-it-text-margin;
+              }
+            }
+          }
+
+          .e-icon-left + .e-tab-text {
+            margin: $tab-rtl-big-it-text-margin;
+
+            @media screen and (max-width: 480px) {
+              margin: $tab-rtl-mob-it-text-margin;
+            }
+          }
+
+          .e-icons.e-close-icon {
+            margin: $tab-rtl-big-close-icon-margin;
+
+            @media screen and (max-width: 480px) {
+              margin: $tab-rtl-mob-close-icon-margin;
+            }
+          }
+
+          &.e-itop .e-close-icon,
+          &.e-ibottom .e-close-icon {
+            left: $tab-rtl-big-close-icon-top-bottom-left;
+            right: auto;
+          }
+        }
+
+        &.e-close-show {
+
+          .e-toolbar-item.e-itop .e-text-wrap,
+          .e-toolbar-item.e-ibottom .e-text-wrap {
+            margin-left: $tab-rtl-big-text-container-margin-left;
+            margin-right: $tab-rtl-big-text-container-margin-right;
+          }
+        }
+
+        .e-toolbar-pop {
+
+          .e-toolbar-item {
+            margin: 0;
+
+            .e-tab-text {
+              padding-left: $tab-rtl-big-pop-text-padding-left;
+              padding-right: 0;
+
+              @media screen and (max-width: 480px) {
+                padding-left: 0;
+              }
+            }
+
+            .e-icons.e-close-icon {
+              margin: $tab-rtl-big-pop-close-icon-margin;
+            }
+
+            &.e-itop,
+            &.e-ibottom {
+
+              .e-close-icon {
+                left: $tab-rtl-big-pop-close-icon-top-bottom-left;
+                right: auto;
+              }
+            }
+
+            &.e-itop .e-tab-text,
+            &.e-ibottom .e-tab-text {
+              margin: 0;
+              padding-left: 12px;
+              padding-right: 0;
+
+              @media screen and (max-width: 480px) {
+                margin: 0;
+                padding-left: 0;
+                padding-right: 0;
+              }
+            }
+          }
+        }
+
+        .e-hor-nav,
+        .e-scroll-right-nav {
+          padding: $tab-rtl-big-nav-right-icon-padding;
+        }
+
+        .e-scroll-left-nav {
+          padding: $tab-rtl-big-nav-left-icon-padding;
+        }
+
+        &.e-vertical {
+
+          .e-toolbar-item {
+
+            &:not(.e-separator) {
+              margin: 0;
+            }
+
+            &.e-itop,
+            &.e-ibottom {
+
+              .e-close-icon {
+                left: $tab-v-rtl-big-close-icon-top-bottom-left;
+              }
+            }
+          }
+
+          .e-hor-nav {
+            padding: $tab-big-wrap-padding;
+          }
+
+          .e-popup-up-icon,
+          .e-popup-down-icon {
+
+            &::after {
+              margin: $tab-rtl-pop-more-icon-margin;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .e-tab {
+    display: block;
+    position: relative;
+
+    &.e-hidden {
+      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;
+
+      @media screen and (max-width: 480px) {
+        height: $tab-big-height;
+        min-height: $tab-big-height;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+          display: block;
+        }
+      }
+
+      &:not(.e-vertical) {
+
+        &::before {
+          bottom: 0;
+          top: 0;
+          width: 100%;
+        }
+      }
+
+      .e-toolbar-items {
+        height: auto;
+        margin: 0;
+        min-height: $tab-nrml-height;
+        position: relative;
+
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' or $tbar-skin == 'FluentUI' {
+          height: $tab-nrml-height;
+          min-height: $tab-nrml-height;
+        }
+
+        @media screen and (max-width: 480px) {
+          min-height: $tab-big-height;
+          @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+            height: $tab-big-height;
+          }
+        }
+
+        &:not(.e-tbar-pos) .e-toolbar-item:first-child,
+        &:not(.e-tbar-pos) .e-toolbar-item:last-child {
+          margin: $tab-nrml-first-item-margin;
+        }
+
+        &:not(.e-tbar-pos) .e-toolbar-item:last-child {
+          margin: $tab-nrml-last-item-margin;
+          padding-bottom: $tab-big-boot-active-item-padding-bottom;
+
+          @media screen and (max-width: 480px) {
+            margin: $tab-mob-last-item-margin;
+          }
+        }
+        @if $tab-skin == 'FluentUI' {
+          .e-toolbar-item.e-active {
+            position: relative;
+
+            &:hover::before {
+              left: 0;
+              right: 0;
+            }
+
+            &::before {
+              background-color: $tab-alt-hdr-bg-color;
+              bottom: 0;
+              content: '';
+              height: 2px;
+              left: 8px;
+              position: absolute;
+              right: 8px;
+              transition: left .267s cubic-bezier(.1, .25, .75, .9) 0s, right .267s cubic-bezier(.1, .25, .75, .9) 0s;
+            }
+
+            &::after {
+              color: transparent;
+              content: attr(data-content);
+              display: block;
+              font-weight: 700;
+              height: 1px;
+              overflow: hidden;
+              visibility: hidden;
+            }
+          }
+        }
+      }
+
+      .e-toolbar-items.e-hscroll {
+
+        &.e-scroll-device {
+          padding: 0;
+
+          .e-scroll-right-nav {
+            display: none;
+          }
+        }
+
+        @if $tab-skin == 'bootstrap'or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+
+          &[style*= 'overflow: hidden'] .e-toolbar-item:not(.e-separator).e-active {
+            margin-bottom: 0;
+          }
+        }
+
+        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+          .e-hscroll-bar {
+            padding: 0 1px;
+          }
+        }
+
+        .e-scroll-nav {
+          width: 40px;
+          @if $tab-skin == 'FluentUI' {
+            width: 32px;
+          }
+          @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+            border-radius: 4px;
+            width: 32px;
+          }
+
+          @if $tab-skin == 'tailwind' {
+            width: 24px;
+          }
+        }
+
+        &:not(.e-tbar-pos) .e-toolbar-item:last-child {
+          margin: $tab-nrml-scroll-last-item-margin;
+
+          @media screen and (max-width: 480px) {
+            margin: $tab-mob-last-item-margin;
+          }
+
+          &.e-active {
+            margin: $tab-nrml-active-scroll-last-item-margin;
+          }
+        }
+      }
+
+      .e-hscroll-bar {
+        overflow: hidden;
+      }
+
+      .e-indicator {
+        display: $tab-anim-border-display;
+        position: absolute;
+
+        &.e-hidden {
+          display: none;
+        }
+      }
+
+      &:not(.e-vertical) .e-indicator {
+        bottom: 0;
+        height: $tab-border-width;
+        left: 0;
+        right: 0;
+        transition: left .125s cubic-bezier(.35, 0, .25, 1), right .25s cubic-bezier(.35, 0, .25, 1);
+
+        @if $tab-skin == 'tailwind' {
+          border-radius: $tab-border-width;
+          transition: all .4s cubic-bezier(.25,.46,.45,.94); // sass-lint:disable-line no-transition-all space-after-comma
+        }
+      }
+
+      .e-toolbar-item {
+
+        &.e-hidden {
+          display: none;
+        }
+
+        &: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-height;
+
+          @media screen and (max-width: 480px) {
+            height: $tab-big-height;
+          }
+
+          @if $tab-skin == 'fabric' {
+            height: $tab-nrml-height - 2;
+          }
+          @else if $tab-skin == 'highcontrast' {
+            height: $tab-nrml-height - 4;
+          }
+
+        }
+
+        .e-tab-text {
+          display: inherit;
+          font-family: $tab-font-family;
+          font-size: $tab-nrml-font-size;
+          font-weight: $tab-font-weight;
+          text-transform: $tab-text-transform;
+
+          @media screen and (max-width: 480px) {
+            font-size: $tab-big-font-size;
+          }
+        }
+
+        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+          .e-tab-text {
+            align-self: auto;
+          }
+        }
+
+        &.e-active {
+          margin: $tab-nrml-boot-item-margin;
+          padding-bottom: $tab-nrml-even-boot-active-item-padding-bottom;
+
+          @media screen and (max-width: 480px) {
+            margin: $tab-mob-boot-item-margin;
+          }
+
+          .e-text-wrap {
+            height: $tab-nrml-active-text-container-height;
+            margin-top: $tab-active-text-container-margin;
+
+            @media screen and (max-width: 480px) {
+              height: $tab-big-active-text-container-height;
+            }
+
+            @if $tab-skin == 'fabric' {
+              height: $tab-nrml-height - 2;
+            }
+            @else if $tab-skin == 'highcontrast' {
+              height: $tab-nrml-height - 4;
+            }
+          }
+
+          .e-tab-wrap {
+            margin-bottom: $tab-nrml-active-item-wrap-margin-bottom;
+
+            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+              &:hover {
+                border: 0;
+              }
+            }
+          }
+
+          .e-tab-text {
+            font-weight: $tab-semi-font-weight;
+          }
+
+          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+            .e-tab-text {
+              align-self: auto;
+            }
+          }
+
+          @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+            .e-tab-icon::before {
+              top: -1px;
+            }
+          }
+
+          &.e-ileft,
+          &.e-iright {
+
+            .e-text-wrap {
+              height: $tab-nrml-active-it-text-container-height;
+              padding: $tab-nrml-ileft-active-text-wrap-padding;
+
+              @media screen and (max-width: 480px) {
+                height: $tab-big-active-it-text-container-height;
+              }
+
+              @if $tab-skin == 'fabric' {
+                height: $tab-nrml-height - 2;
+                padding: 0;
+              }
+              @else if $tab-skin == 'highcontrast' {
+                height: $tab-nrml-height - 4;
+                padding: 0;
+              }
+            }
+
+            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+              .e-tab-wrap .e-tab-text {
+                align-self: auto;
+              }
+
+              .e-tab-wrap:focus .e-tab-text {
+                align-self: auto;
+              }
+            }
+          }
+        }
+
+        .e-icons.e-close-icon {
+          display: none;
+          margin: $tab-nrml-close-icon-margin;
+          min-width: $tab-close-icon-minwidth;
+
+          @media screen and (max-width: 480px) {
+            margin: $tab-mob-close-icon-margin;
+          }
+        }
+
+        .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: $tab-pop-close-icon-top;
+
+          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+            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;
+
+          @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+            line-height: $tab-nrml-icon-container-size;
+          }
+
+          @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;
+            }
+          }
+        }
+
+        @if $tab-skin == 'FluentUI' {
+          .e-icon-right {
+            margin: $tab-nrml-it-text-margin;
+
+            @media screen and (max-width: 480px) {
+              margin: $tab-mob-it-text-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-active {
+
+            .e-tab-wrap {
+              @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+                height: 62px;
+              }
+
+              &:focus {
+
+                .e-text-wrap {
+                  height: auto;
+                }
+              }
+
+              .e-text-wrap {
+                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-toolbar-pop {
+        overflow-y: auto;
+        padding: $tab-pop-padding;
+
+        .e-toolbar-item {
+          height: $tab-nrml-pop-item-height;
+          min-height: $tab-nrml-pop-item-height;
+          min-width: auto;
+
+          @media screen and (max-width: 480px) {
+            height: $tab-mob-pop-item-height;
+            min-height: $tab-mob-pop-item-height;
+          }
+
+          &:not(.e-separator) {
+            margin: $tab-pop-item-margin;
+            @if $tab-skin == 'tailwind' {
+              padding: 0;
+            }
+          }
+
+          .e-tab-wrap {
+            height: $tab-nrml-pop-item-height;
+            padding: $tab-nrml-pop-item-wrap-padding;
+            text-align: initial;
+
+            @media screen and (max-width: 480px) {
+              height: $tab-mob-pop-item-height;
+              padding: $tab-mob-pop-item-wrap-padding;
+            }
+          }
+
+          .e-text-wrap {
+            height: $tab-nrml-pop-item-height;
+            width: 100%;
+
+            @if $tab-skin == 'fabric' {
+              height:  $tab-nrml-pop-item-height - 2;
+            }
+            @else if $tab-skin == 'highcontrast' {
+              height:  $tab-nrml-pop-item-height - 4;
+            }
+          }
+
+          .e-tab-text {
+            display: inline-flex;
+            width: 100%;
+          }
+
+          .e-close-icon {
+            margin: 0 0 0 8px;
+          }
+
+          .e-close-icon::before {
+            top: $tab-nrml-pop-close-top;
+          }
+
+          .e-tab-text + .e-close-icon[style= 'display:block'] {
+            padding-right: $tab-nrml-pop-text-padding-right;
+
+            @media screen and (max-width: 480px) {
+              padding-right: 0;
+            }
+          }
+
+          &.e-itop,
+          &.e-ibottom {
+            height: $tab-pop-nrml-icon-top-bottom-item-height;
+
+            @media screen and (max-width: 480px) {
+              height: $tab-pop-big-icon-top-bottom-item-height;
+            }
+
+            &:not(.e-separator) {
+              min-height: $tab-pop-nrml-icon-top-bottom-item-height;
+
+              @media screen and (max-width: 480px) {
+                min-height: $tab-pop-big-icon-top-bottom-item-height;
+              }
+            }
+
+            .e-tab-wrap {
+              height: $tab-pop-nrml-icon-top-bottom-item-height;
+
+              @media screen and (max-width: 480px) {
+                height: $tab-pop-big-icon-top-bottom-item-height;
+              }
+            }
+
+            .e-text-wrap {
+              display: inline-flex;
+              height: auto;
+            }
+
+            .e-tab-text {
+              display: block;
+              justify-content: center;
+              margin: 0 0 0 10px;
+              padding-left: 0;
+              padding-right: 10px;
+
+              @media screen and (max-width: 480px) {
+                justify-content: center;
+                margin: 0 0 0 12px;
+                padding-left: 0;
+                padding-right: 0;
+              }
+            }
+
+            .e-close-icon {
+              right: $tab-nrml-pop-close-icon-top-bottom-right;
+              top: initial;
+            }
+          }
+
+          &.e-ibottom {
+
+            .e-tab-text {
+              margin: 0;
+            }
+          }
+
+          .e-tab-icon.e-icon-top,
+          .e-tab-icon.e-icon-bottom {
+            display: inline-flex;
+          }
+        }
+      }
+
+      &.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-active .e-close-icon {
+
+          @media screen and (max-width: 480px) {
+            display: inline-flex;
+          }
+        }
+
+        .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-scroll-nav {
+        height: $tab-nrml-height;
+        min-height: $tab-nrml-height;
+        min-width: auto;
+        width: auto;
+
+        @media screen and (max-width: 480px) {
+          height: $tab-big-height;
+          min-height: $tab-big-height;
+        }
+
+        &.e-scroll-left-nav {
+          padding: $tab-nrml-nav-left-icon-padding;
+        }
+
+        &.e-scroll-right-nav {
+          padding: $tab-nrml-nav-right-icon-padding;
+
+          @media screen and (max-width: 480px) {
+            padding: $tab-mob-nav-right-icon-padding;
+          }
+        }
+
+        .e-nav-left-arrow::before,
+        .e-nav-right-arrow::before {
+          font-size: $tab-nrml-nav-icon-size;
+          line-height: $tab-nrml-nav-icon-container-size;
+          position: relative;
+          top: 0;
+          vertical-align: initial;
+
+          @if $tab-skin == 'fabric' {
+            top: -1px;
+          }
+
+          @if $tab-skin == 'highcontrast' {
+            top: -2px;
+          }
+        }
+
+        .e-nav-arrow {
+          font-size: $tab-nrml-nav-icon-size;
+          height: $tab-nrml-nav-icon-container-size;
+          line-height: $tab-nrml-nav-icon-container-size;
+          width: $tab-nrml-nav-icon-container-size;
+
+          @media screen and (max-width: 480px) {
+            font-size: $tab-big-nav-icon-size;
+            height: $tab-big-nav-icon-container-size;
+            line-height: $tab-big-nav-icon-container-size;
+            width: $tab-big-nav-icon-container-size;
+          }
+        }
+      }
+
+      .e-hor-nav {
+        height: $tab-nrml-height;
+        min-height: $tab-nrml-height;
+        min-width: auto;
+        padding: $tab-nrml-nav-right-icon-padding;
+        width: auto;
+
+        @media screen and (max-width: 480px) {
+          height: $tab-big-height;
+          min-height: $tab-big-height;
+          padding: $tab-mob-nav-right-icon-padding;
+        }
+
+        .e-popup-up-icon,
+        .e-popup-down-icon {
+          font-size: $tab-nrml-nav-icon-size;
+          height: $tab-nrml-nav-icon-container-size;
+          line-height: $tab-nrml-nav-icon-container-size;
+          width: $tab-nrml-nav-icon-container-size;
+
+          @media screen and (max-width: 480px) {
+            font-size: $tab-big-nav-icon-size;
+            height: $tab-big-nav-icon-container-size;
+            line-height: $tab-big-nav-icon-container-size;
+            width: $tab-big-nav-icon-container-size;
+          }
+
+          &::before {
+            font-size: $tab-nrml-nav-icon-size;
+            line-height: $tab-nrml-nav-icon-container-size;
+            position: relative;
+            top: 0;
+            vertical-align: initial;
+
+            @if $tab-skin == 'fabric' {
+              top: -1px;
+            }
+
+            @if $tab-skin == 'highcontrast' {
+              top: -2px;
+            }
+
+            @media screen and (max-width: 480px) {
+              font-size: $tab-mob-nav-icon-size;
+            }
+          }
+
+          &:hover {
+            @if $tab-skin == 'bootstrap' {
+              line-height: 34px;
+            }
+            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+              line-height: 32px;
+            }
+
+            &::before {
+              top: $tab-nrml-hover-nav-pop-icon-top;
+
+              @if $tab-skin == 'fabric' {
+                top: -1px;
+              }
+
+              @if $tab-skin == 'bootstrap' {
+                line-height: 34px;
+                top: 0;
+
+                @media screen and (max-width: 480px) {
+                  line-height: 43px;
+                }
+              }
+              @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+                line-height: 32px;
+                top: 0;
+
+                @media screen and (max-width: 480px) {
+                  line-height: 43px;
+                }
+              }
+
+              @if $tab-skin == 'highcontrast' {
+                top: -2px;
+              }
+            }
+          }
+        }
+
+        .e-popup-up-icon {
+          transform: $tab-pop-up-icon-transform;
+          transition: $tab-pop-icon-transition;
+
+          @media screen and (max-width: 480px) {
+            transform: none;
+            transition: none;
+          }
+        }
+
+        .e-popup-down-icon {
+          transform: $tab-pop-down-icon-transform;
+          transition: $tab-pop-icon-transition;
+
+          @media screen and (max-width: 480px) {
+            transform: none;
+            transition: none;
+          }
+        }
+
+        &:focus {
+
+          .e-popup-up-icon,
+          .e-popup-down-icon {
+            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+              line-height: 32px;
+            }
+
+            &::before {
+              top: $tab-nrml-hover-nav-pop-icon-top;
+
+              @if $tab-skin == 'fabric' {
+                top: -1px;
+              }
+
+              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+                line-height: 32px;
+                top: 0;
+
+                @media screen and (max-width: 480px) {
+                  line-height: 43px;
+                }
+              }
+
+              @if $tab-skin == 'highcontrast' {
+                top: -2px;
+              }
+            }
+
+            &:hover {
+              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+                line-height: 32px;
+                top: -.5px;
+              }
+            }
+          }
+        }
+      }
+
+      &.e-horizontal-bottom {
+
+        @if $tab-skin == 'FluentUI' {
+          .e-toolbar-items .e-toolbar-item.e-active {
+            position: relative;
+
+            &:hover::before {
+              left: 0;
+              right: 0;
+            }
+
+            &::before {
+              background-color: $tab-alt-hdr-bg-color;
+              content: '';
+              height: 2px;
+              left: 8px;
+              position: absolute;
+              right: 8px;
+              top: 0;
+              transition: left .267s cubic-bezier(.1, .25, .75, .9) 0s, right .267s cubic-bezier(.1, .25, .75, .9) 0s;
+            }
+
+            &::after {
+              color: transparent;
+              content: attr(data-content);
+              display: block;
+              font-weight: 700;
+              height: 1px;
+              overflow: hidden;
+              visibility: hidden;
+            }
+          }
+        }
+
+        &::before {
+          bottom: auto;
+        }
+
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+          .e-hscroll-bar {
+            margin-top: -1px;
+          }
+        }
+
+        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
+          margin: $tab-nrml-even-last-item-margin;
+          padding-bottom: 0;
+          padding-top: $tab-nrml-even-boot-active-item-padding-bottom;
+
+          @media screen and (max-width: 480px) {
+            margin: $tab-mob-even-last-item-margin;
+          }
+        }
+
+        .e-indicator {
+          bottom: auto;
+          top: 0;
+        }
+
+        .e-toolbar-item {
+
+          &.e-active {
+            margin: $tab-nrml-even-boot-item-margin;
+            padding-bottom: 0;
+            padding-top: $tab-nrml-boot-active-item-padding-bottom;
+
+            @media screen and (max-width: 480px) {
+              margin: $tab-mob-even-boot-item-margin;
+            }
+
+            .e-text-wrap {
+              height: $tab-nrml-height;
+              padding: $tab-even-active-text-container-padding;
+
+              @if $tab-skin == 'fabric' {
+                height: $tab-nrml-height - 2;
+                padding: 0;
+              }
+              @else if $tab-skin == 'highcontrast' {
+                height: $tab-nrml-height - 4;
+                padding: 0;
+              }
+            }
+
+            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+              .e-text-wrap::before,
+              &:not(.e-separator):last-child .e-text-wrap::before {
+                top: 0;
+              }
+
+              &.e-itop {
+
+                @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+                  .e-tab-wrap:focus .e-close-icon::before {
+                    top: 0;
+                  }
+
+                  .e-text-wrap {
+                    height: auto;
+                  }
+                }
+              }
+            }
+
+            &.e-ileft {
+
+              @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+                .e-tab-wrap .e-tab-text {
+                  align-self: auto;
+                }
+
+                .e-tab-wrap:focus .e-tab-text {
+                  align-self: auto;
+                }
+              }
+            }
+          }
+
+          &.e-itop,
+          &.e-ibottom {
+
+            .e-text-wrap {
+              height: initial;
+            }
+
+            &.e-active {
+
+              .e-text-wrap {
+                height: initial;
+                padding: 0;
+              }
+
+              .e-text-wrap::before {
+                bottom: auto;
+                top: 0;
+              }
+            }
+          }
+        }
+      }
+
+      &.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;
+
+        &::before {
+          bottom: 0;
+          height: 100%;
+          left: 0;
+          top: 0;
+        }
+
+        &[style*= 'overflow: hidden']::before {
+          bottom: $tab-nrml-vertical-scroll-nav-top-bottom;
+          height: auto;
+          top: $tab-nrml-vertical-scroll-nav-top-bottom;
+
+          @media screen and (max-width: 480px) {
+            bottom: 0;
+            top: 0;
+          }
+        }
+
+        .e-indicator {
+          display: $tab-indicator-display;
+          transition: top .125s cubic-bezier(.35, 0, .25, 1), bottom .25s cubic-bezier(.35, 0, .25, 1);
+          width: 2px;
+
+          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+            transition: initial;
+          }
+        }
+
+        .e-toolbar-items {
+          height: inherit;
+
+          &.e-vscroll:not(.e-scroll-device) {
+            padding: $tab-vscroll-nrml-padding;
+          }
+        }
+
+        .e-toolbar-item {
+
+          &:last-child {
+            margin: 0;
+          }
+
+          &:not(.e-separator) {
+            margin: 0;
+          }
+
+          .e-tab-wrap {
+            padding: $tab-nrml-v-wrap-padding;
+          }
+
+          .e-text-wrap {
+            position: relative;
+            width: 100%;
+          }
+
+          .e-tab-text,
+          .e-tab-icon::before {
+            text-align: center;
+            width: 100%;
+          }
+
+          .e-tab-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          &.e-active {
+
+            .e-text-wrap::before {
+              display: none;
+            }
+          }
+
+          &.e-ileft.e-icon {
+
+            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+              min-height: $tab-nrml-height;
+              min-width: $tab-nrml-height;
+
+              .e-tab-icon {
+                margin: auto;
+              }
+            }
+          }
+
+          &.e-itop,
+          &.e-ibottom {
+
+            .e-close-icon {
+              right: $tab-v-nrml-close-icon-top-bottom-right;
+            }
+          }
+        }
+
+        .e-toolbar-pop {
+          top: initial !important; // sass-lint:disable-line no-important
+        }
+
+        &.e-vertical-left {
+          float: left;
+
+          &::before {
+            right: 0;
+          }
+
+          .e-indicator {
+            left: auto;
+            right: 0;
+          }
+
+          @if $tab-skin == 'FluentUI' {
+            .e-toolbar-items .e-toolbar-item.e-active {
+              position: relative;
+
+              &:hover::before {
+                bottom: 0;
+                height: 100%;
+              }
+
+              &::before {
+                background-color: $tab-alt-hdr-bg-color;
+                bottom: 10px;
+                content: '';
+                height: 60%;
+                left: 99%;
+                position: absolute;
+                right: 0;
+                transition: bottom .267s cubic-bezier(.1, .25, .75, .9) 0s, height .267s cubic-bezier(.1, .25, .75, .9) 0s;
+                width: 2px;
+              }
+
+              &::after {
+                color: transparent;
+                content: attr(data-content);
+                display: block;
+                font-weight: 700;
+                height: 1px;
+                overflow: hidden;
+                visibility: hidden;
+              }
+            }
+          }
+        }
+
+        &.e-vertical-right {
+          float: right;
+
+          &::before {
+            right: auto;
+          }
+
+          .e-indicator {
+            left: 0;
+            right: auto;
+          }
+
+          .e-tab-wrap {
+            text-align: right;
+          }
+
+          .e-toolbar-pop {
+
+            .e-tab-text {
+              width: auto;
+            }
+          }
+
+          @if $tab-skin == 'FluentUI' {
+            .e-toolbar-items .e-toolbar-item.e-active {
+              position: relative;
+
+              &:hover::before {
+                bottom: 0;
+                height: 100%;
+              }
+
+              &::before {
+                background-color: $tab-alt-hdr-bg-color;
+                bottom: 10px;
+                content: '';
+                height: 60%;
+                left: 0;
+                position: absolute;
+                right: 99%;
+                transition: bottom .267s cubic-bezier(.1, .25, .75, .9) 0s, height .267s cubic-bezier(.1, .25, .75, .9) 0s;
+                width: 2px;
+              }
+
+              &::after {
+                color: transparent;
+                content: attr(data-content);
+                display: block;
+                font-weight: 700;
+                height: 1px;
+                overflow: hidden;
+                visibility: hidden;
+              }
+            }
+          }
+        }
+
+        .e-scroll-nav {
+          height: $tab-nrml-vertical-nav-arrow-size;
+          justify-content: center;
+          min-height: $tab-nrml-vertical-nav-arrow-size;
+          width: 100%;
+
+          .e-nav-arrow {
+            font-size: $tab-nrml-vertical-nav-arrow-font-size;
+            height: $tab-nrml-vertical-nav-arrow-size;
+            line-height: $tab-nrml-vertical-nav-arrow-size;
+            margin: 0 auto;
+            width: $tab-nrml-vertical-nav-arrow-size;
+          }
+        }
+
+        .e-hor-nav {
+          padding: $tab-nrml-wrap-padding;
+          width: 100%;
+
+          .e-popup-up-icon,
+          .e-popup-down-icon {
+            height: 100%;
+            transform: none;
+            transition: none;
+            width: 100%;
+
+            &::before {
+              float: left;
+              font-family: $tab-font-family;
+              font-size: $tab-nrml-font-size;
+              font-weight: $tab-font-weight;
+              line-height: $tab-nrml-more-btn-line-height;
+              text-align: left;
+              text-transform: $tab-text-transform;
+              transform: none;
+              transition: none;
+            }
+
+            &::after {
+              float: left;
+              font-size: 12px;
+              line-height: $tab-nrml-more-btn-line-height;
+              margin: $tab-pop-more-icon-margin;
+              vertical-align: initial;
+
+              @media screen and (max-width: 480px) {
+                font-size: $tab-big-font-size;
+              }
+            }
+          }
+        }
+
+        .e-scroll-device {
+
+          .e-scroll-nav,
+          .e-scroll-overlay {
+            display: none;
+          }
+        }
+
+        &.e-toolpop {
+
+          .e-toolbar-items {
+            height: auto;
+          }
+        }
+      }
+    }
+
+    &.e-rtl {
+
+      .e-tab-header.e-vertical {
+
+        .e-toolbar-items:not(.e-tbar-pos) {
+
+          .e-toolbar-item:last-child {
+            margin: 0;
+          }
+        }
+
+        .e-toolbar-item {
+
+          &:not(.e-separator) {
+            margin: 0;
+
+            &.e-itop .e-close-icon,
+            &.e-ibottom .e-close-icon {
+              left: $tab-v-rtl-nrml-close-icon-top-bottom-left;
+            }
+          }
+        }
+
+        .e-hor-nav {
+          padding: $tab-nrml-wrap-padding;
+
+          .e-popup-up-icon,
+          .e-popup-down-icon {
+
+            &::before {
+              float: right;
+            }
+
+            &::after {
+              float: right;
+              margin: $tab-rtl-pop-more-icon-margin;
+            }
+          }
+        }
+      }
+    }
+
+    .e-content {
+      position: relative;
+
+      .e-item {
+
+        &.e-view {
+          bottom: 0;
+          left: 0;
+          overflow: hidden;
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+      }
+
+      > .e-item {
+        display: none;
+
+        &.e-active {
+          background: inherit;
+          display: block;
+        }
+      }
+
+      &.e-progress {
+        overflow: hidden;
+      }
+    }
+
+    &.e-vertical-tab {
+
+      .e-content {
+        display: flex;
+
+        .e-item.e-active {
+          display: flex;
+          flex: none;
+        }
+
+        .e-item,
+        .e-item > :first-child {
+          width: 100%;
+        }
+      }
+    }
+
+    &.e-vertical-icon {
+
+      .e-tab-header {
+        height: $tab-nrml-tb-icon-height;
+        min-height: $tab-nrml-tb-icon-height;
+
+        &.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 $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+            .e-text-wrap {
+              position: static;
+
+              &::before {
+                content: none;
+              }
+            }
+
+            .e-tab-wrap::before {
+              content: '';
+              display: block;
+              position: absolute;
+              top: 96%;
+              width: calc(100% - 16px);
+
+              @if $tab-skin == 'fabric' {
+                border: 1px solid $theme-primary;
+              }
+              @else if $tab-skin == 'highcontrast' {
+                border: 1px solid $selection-bg;
+              }
+            }
+          }
+        }
+
+        .e-scroll-nav {
+          height:  $tab-nrml-icon-top-bottom-item-height;
+        }
+
+        .e-hor-nav {
+          height:  $tab-nrml-icon-top-bottom-item-height;
+
+          .e-popup-up-icon::before,
+          .e-popup-down-icon::before {
+
+            @media screen and (max-width: 480px) {
+              font-size: $tab-mob-nav-vicon-size;
+            }
+          }
+        }
+
+        &.e-vertical {
+
+          .e-indicator {
+
+            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+              width: 3px;
+            }
+          }
+
+          .e-toolbar-item.e-active,
+          .e-toolbar-item:not(.e-separator):last-child.e-active {
+
+            .e-tab-wrap::before {
+              display: none;
+            }
+
+            .e-text-wrap {
+              position: relative;
+            }
+          }
+
+          .e-scroll-nav {
+            height: $tab-nrml-vertical-nav-arrow-size;
+          }
+        }
+
+        &.e-horizontal-bottom {
+
+          .e-toolbar-item.e-active,
+          .e-toolbar-item:not(.e-separator):last-child.e-active {
+            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+              .e-tab-wrap::before {
+                top: 0;
+              }
+            }
+          }
+        }
+      }
+
+      @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+        &.e-rtl .e-tab-header .e-toolbar-item.e-active {
+          margin: 0 0 0 2px;
+        }
+      }
+
+      &.e-vertical-tab {
+
+        .e-tab-header.e-vertical .e-toolbar-items {
+          height: inherit;
+        }
+      }
+    }
+
+    &.e-focused {
+
+      .e-tab-header .e-toolbar-item {
+
+        .e-tab-wrap:focus {
+          height: $tab-nrml-height;
+
+          .e-text-wrap {
+            height: $tab-nrml-height;
+
+            @if $tab-skin == 'fabric' {
+              height: $tab-nrml-height - 2;
+            }
+            @else if $tab-skin == 'highcontrast' {
+              height: $tab-nrml-height - 4;
+            }
+          }
+        }
+
+        &.e-itop,
+        &.e-ibottom {
+
+          .e-tab-wrap:focus {
+            height: $tab-nrml-icon-top-bottom-item-height;
+          }
+
+          .e-tab-wrap:focus .e-text-wrap {
+            height: auto;
+          }
+
+          &.e-active .e-tab-wrap:focus .e-text-wrap {
+            height: auto;
+          }
+        }
+      }
+
+      .e-tab-header .e-toolbar-pop {
+
+        .e-toolbar-item {
+
+          .e-tab-wrap:focus {
+            height: $tab-nrml-pop-item-height;
+
+            .e-text-wrap {
+              height: $tab-nrml-pop-item-height;
+
+              @if $tab-skin == 'fabric' {
+                height:  $tab-nrml-pop-item-height - 2;
+              }
+              @else if $tab-skin == 'highcontrast' {
+                height:  $tab-nrml-pop-item-height - 4;
+              }
+            }
+          }
+
+          &.e-itop .e-tab-wrap:focus,
+          &.e-ibottom .e-tab-wrap:focus {
+            height: $tab-nrml-height;
+          }
+        }
+      }
+
+      .e-tab-header .e-horizontal-bottom {
+
+        .e-toolbar-item {
+
+          &.e-active {
+
+            .e-tab-wrap:focus .e-text-wrap {
+              height: $tab-nrml-height;
+              padding: 0;
+
+              @if $tab-skin == 'fabric' {
+                height: $tab-nrml-height - 2;
+              }
+              @else if $tab-skin == 'highcontrast' {
+                height: $tab-nrml-height - 4;
+              }
+            }
+
+            &.e-ileft {
+
+              @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+                .e-tab-wrap:focus .e-tab-text {
+                  align-self: auto;
+                }
+              }
+            }
+          }
+
+          &.e-itop,
+          &.e-ibottom {
+
+            .e-tab-wrap:focus .e-text-wrap {
+              height: auto;
+            }
+
+            &.e-active .e-tab-wrap:focus .e-text-wrap {
+              height: auto;
+            }
+          }
+        }
+      }
+    }
+
+    &.e-template .e-content {
+
+      > .e-item {
+        display: none;
+
+        &.e-active {
+          background: inherit;
+          display: block;
+        }
+      }
+    }
+
+    &.e-ie .e-tab-header {
+
+      .e-hor-nav.e-ie-align,
+      .e-scroll-nav.e-ie-align {
+        display: flex;
+
+        .e-popup-up-icon,
+        .e-popup-down-icon {
+          display: block;
+          line-height: $tab-nrml-ie-pop-icon-line-height;
+        }
+
+        .e-nav-left-arrow,
+        .e-nav-right-arrow {
+          display: block;
+          line-height: $tab-nrml-ie-nav-icon-line-height;
+        }
+      }
+
+      .e-popup-up-icon,
+      .e-popup-down-icon {
+        transform: none;
+        transition: none;
+      }
+
+      .e-popup-up-icon::before {
+        transform: $tab-pop-up-icon-transform;
+        transition: $tab-pop-icon-transition;
+
+        @media screen and (max-width: 480px) {
+          transform: none;
+          transition: none;
+        }
+      }
+
+      .e-popup-down-icon::before {
+        transform: $tab-pop-down-icon-transform;
+        transition: $tab-pop-icon-transition;
+
+        @media screen and (max-width: 480px) {
+          transform: none;
+          transition: none;
+        }
+      }
+    }
+
+    &.e-edge .e-tab-header {
+
+      .e-hor-nav.e-ie-align,
+      .e-scroll-nav.e-ie-align {
+        display: flex;
+
+        .e-popup-up-icon,
+        .e-popup-down-icon {
+          display: block;
+          line-height: $tab-nrml-edge-pop-icon-line-height;
+          position: relative;
+        }
+
+        .e-nav-left-arrow,
+        .e-nav-right-arrow {
+          display: block;
+          line-height: $tab-nrml-edge-nav-icon-line-height;
+          position: relative;
+        }
+      }
+
+      .e-popup-up-icon {
+        transform: $tab-pop-up-icon-transform;
+        transition: $tab-pop-icon-transition;
+
+        @media screen and (max-width: 480px) {
+          transform: none;
+          transition: none;
+        }
+      }
+
+      .e-popup-down-icon {
+        transform: $tab-pop-down-icon-transform;
+        transition: $tab-pop-icon-transition;
+
+        @media screen and (max-width: 480px) {
+          transform: none;
+          transition: none;
+
+          @media screen and (max-width: 480px) {
+            transform: none;
+            transition: none;
+          }
+        }
+      }
+
+      .e-popup-up-icon::before {
+        transform: $tab-pop-up-icon-transform;
+        transition: $tab-pop-icon-transition;
+
+        @media screen and (max-width: 480px) {
+          transform: none;
+          transition: none;
+        }
+      }
+
+      .e-popup-down-icon::before {
+        transform: $tab-pop-down-icon-transform;
+        transition: $tab-pop-icon-transition;
+
+        @media screen and (max-width: 480px) {
+          transform: none;
+          transition: none;
+        }
+      }
+    }
+
+    &.e-safari .e-tab-header {
+
+      .e-close-icon::before {
+        top: $tab-nrml-safari-close-icon-top;
+      }
+
+      .e-hor-nav,
+      .e-scroll-nav {
+
+        .e-popup-up-icon::before,
+        .e-popup-down-icon::before {
+          top: 0;
+        }
+
+        .e-nav-left-arrow::before,
+        .e-nav-right-arrow::before {
+          top: 0;
+        }
+      }
+    }
+
+    &.e-disable {
+      pointer-events: none;
+    }
+
+    &.e-fill {
+
+      .e-tab-header {
+        height: $tab-nrml-fill-height;
+        min-height: $tab-nrml-fill-height;
+
+        @media screen and (max-width: 480px) {
+          height: $tab-mob-fill-height;
+          min-height: $tab-mob-fill-height;
+        }
+
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+          &::before {
+            display: none;
+          }
+        }
+
+        .e-indicator {
+          display: none;
+        }
+
+        .e-toolbar-items {
+          height: auto;
+          min-height: $tab-nrml-fill-height;
+
+          @media screen and (max-width: 480px) {
+            min-height: $tab-mob-fill-height;
+          }
+
+          &:not(.e-tbar-pos) .e-toolbar-item:first-child,
+          &:not(.e-tbar-pos) .e-toolbar-item:last-child {
+            margin: $tab-nrml-alt-first-item-margin;
+            padding: 0;
+            @if $tab-skin == 'tailwind' {
+              padding: 0 8px;
+            }
+          }
+        }
+
+        .e-toolbar-item {
+
+          &:not(.e-separator) {
+            height: $tab-nrml-fill-height;
+            margin: $tab-alt-item-margin;
+            min-height: $tab-nrml-fill-height;
+
+            @media screen and (max-width: 480px) {
+              height: $tab-mob-fill-height;
+              min-height: $tab-mob-fill-height;
+            }
+
+            &.e-itop,
+            &.e-ibottom {
+              height: $tab-nrml-fill-icon-top-bottom-item-height;
+              min-height: $tab-nrml-fill-icon-top-bottom-item-height;
+            }
+          }
+
+          .e-tab-wrap {
+            height: $tab-nrml-fill-height;
+            padding: $tab-fill-nrml-wrap-padding;
+
+            @media screen and (max-width: 480px) {
+              height: $tab-mob-fill-height;
+              padding: $tab-mob-fill-wrap-padding;
+            }
+          }
+
+          .e-text-wrap {
+            height: $tab-nrml-fill-height;
+
+            @media screen and (max-width: 480px) {
+              height: $tab-mob-fill-height;
+            }
+
+            @if $tab-skin == 'fabric' {
+              height: $tab-nrml-fill-height - 2;
+            }
+
+            @if $tab-skin == 'highcontrast' {
+              height: $tab-nrml-fill-height - 4;
+            }
+          }
+
+          &.e-active {
+            padding: $tab-alt-nrml-active-item-padding;
+
+            .e-tab-wrap {
+              margin-bottom: $tab-fill-nrml-active-item-wrap-margin-bottom;
+            }
+
+            .e-text-wrap {
+              height: $tab-nrml-fill-height;
+
+              @media screen and (max-width: 480px) {
+                height: $tab-mob-fill-height;
+              }
+
+              @if $tab-skin == 'fabric' {
+                height: $tab-nrml-fill-height - 2;
+              }
+
+              @if $tab-skin == 'highcontrast' {
+                height: $tab-nrml-fill-height - 4;
+              }
+            }
+
+            .e-tab-text {
+              font-weight: $tab-light-font-weight;
+            }
+
+            &.e-ileft .e-text-wrap,
+            &.e-iright .e-text-wrap {
+              height: $tab-fill-nrml-active-it-text-container-height;
+
+              @media screen and (max-width: 480px) {
+                height: $tab-fill-big-active-it-text-container-height;
+              }
+
+              @if $tab-skin == 'fabric' {
+                height: $tab-nrml-fill-height - 2;
+              }
+              @else if $tab-skin == 'highcontrast' {
+                height: $tab-nrml-fill-height - 4;
+              }
+            }
+          }
+
+          &.e-itop .e-tab-wrap,
+          &.e-ibottom .e-tab-wrap {
+            height: $tab-nrml-fill-icon-top-bottom-item-height;
+          }
+
+          &.e-itop .e-text-wrap,
+          &.e-ibottom .e-text-wrap {
+            height: auto;
+          }
+        }
+
+        .e-toolbar-pop {
+
+          .e-toolbar-item.e-itop:not(.e-separator),
+          .e-toolbar-item.e-ibottom:not(.e-separator) {
+            height: auto;
+          }
+        }
+
+        &.e-horizontal-bottom {
+
+          .e-toolbar-items:not(.e-tbar-pos) {
+
+            .e-toolbar-item {
+
+              &:first-child.e-active,
+              &:last-child.e-active {
+                padding: 0;
+              }
+
+              &.e-itop,
+              &:first-child.e-itop,
+              &:last-child.e-itop {
+                padding-top: 0;
+              }
+            }
+          }
+
+          .e-toolbar-item {
+
+            &.e-active {
+              margin-right: 0;
+              padding: 0;
+
+              .e-text-wrap {
+                height: $tab-nrml-fill-height;
+
+                @media screen and (max-width: 480px) {
+                  height: $tab-mob-fill-height;
+                }
+
+                @if $tab-skin == 'fabric' {
+                  height: $tab-nrml-fill-height - 2;
+                }
+
+                @if $tab-skin == 'highcontrast' {
+                  height: $tab-nrml-fill-height - 4;
+                }
+              }
+            }
+
+            &.e-itop,
+            &.e-ibottom {
+
+              .e-tab-wrap:focus .e-text-wrap {
+                height: $tab-nrml-fill-tb-wrap-height;
+              }
+
+              .e-text-wrap {
+                height: auto;
+              }
+            }
+          }
+        }
+
+        &.e-vertical {
+
+          .e-toolbar-items {
+            height: inherit;
+
+            .e-toolbar-item {
+
+              .e-tab-wrap {
+                padding: $tab-nrml-v-wrap-padding;
+              }
+            }
+          }
+        }
+      }
+
+      &.e-focused {
+
+        .e-tab-header .e-toolbar-item {
+
+          .e-tab-wrap:focus {
+            height: $tab-focus-nrml-fill-height;
+
+            .e-text-wrap {
+              height: $tab-focus-nrml-fill-height;
+
+              @if $tab-skin == 'fabric' {
+                height: $tab-nrml-fill-height - 2;
+              }
+
+              @if $tab-skin == 'highcontrast' {
+                height: $tab-nrml-fill-height - 4;
+              }
+            }
+          }
+
+          &.e-active .e-tab-wrap:focus {
+
+            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+              .e-text-wrap {
+                @if $tab-skin == 'fabric' {
+                  height: $tab-nrml-fill-height - 2;
+                }
+                @else if $tab-skin == 'highcontrast' {
+                  height: $tab-nrml-fill-height - 4;
+                }
+              }
+
+              .e-close-icon::before {
+                top: 1px;
+              }
+            }
+          }
+
+          &.e-itop .e-tab-wrap:focus,
+          &.e-ibottom .e-tab-wrap:focus {
+            height:  $tab-nrml-focus-fill-icon-top-bottom-item-height;
+
+            .e-text-wrap {
+              height: auto;
+
+              @media screen and (max-width: 480px) {
+                height: auto;
+              }
+            }
+          }
+        }
+      }
+
+      &.e-rtl {
+
+        .e-tab-header .e-toolbar-item:not(.e-separator) {
+          margin: $tab-nrml-rtl-alt-item-margin;
+        }
+      }
+
+      &.e-vertical-icon {
+
+        .e-tab-header {
+          height: $tab-nrml-tb-icon-height - 2;
+          min-height: $tab-nrml-tb-icon-height - 2;
+        }
+      }
+    }
+
+    &.e-background {
+
+      .e-tab-header {
+
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+          &::before {
+            display: none;
+          }
+        }
+
+        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
+        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
+          margin: $tab-nrml-alt-first-item-margin;
+          padding: 0;
+          @if $tab-skin == 'tailwind' {
+            padding: 0 8px;
+          }
+        }
+
+        .e-toolbar-item {
+
+          &:not(.e-separator) {
+            margin: $tab-alt-item-margin;
+          }
+
+          &:hover {
+            @if $tab-skin == 'highcontrast' {
+              &.e-itop .e-text-wrap,
+              &.e-ibottom .e-text-wrap {
+                height: auto;
+              }
+            }
+          }
+
+          .e-tab-wrap {
+            padding: $tab-bg-nrml-wrap-padding;
+
+            @media screen and (max-width: 480px) {
+              padding: $tab-bg-big-wrap-padding;
+            }
+          }
+
+          &.e-active {
+            padding: $tab-alt-nrml-active-item-padding;
+
+            .e-tab-wrap {
+              margin-bottom: $tab-bg-nrml-active-item-wrap-margin-bottom;
+            }
+
+            .e-text-wrap {
+              height: $tab-nrml-height;
+
+              @if $tab-skin == 'fabric' {
+                height: $tab-nrml-height - 2;
+              }
+
+              @if $tab-skin == 'highcontrast' {
+                height: $tab-nrml-height - 4;
+              }
+            }
+
+            .e-tab-text {
+              font-weight: $tab-light-font-weight;
+            }
+          }
+        }
+
+        &.e-vertical {
+
+          @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+
+            .e-indicator {
+              display: none;
+            }
+          }
+
+          .e-toolbar-items {
+
+            .e-toolbar-item {
+
+              .e-tab-wrap {
+                padding: $tab-nrml-v-wrap-padding;
+              }
+            }
+          }
+        }
+
+        &.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 {
+            padding: 0;
+          }
+
+          .e-toolbar-item.e-active {
+            margin: 0;
+            padding: 0;
+          }
+        }
+
+        .e-toolbar-pop {
+
+          .e-toolbar-item {
+
+            &.e-active {
+
+              .e-text-wrap {
+                height: $tab-nrml-pop-item-height;
+
+                @if $tab-skin == 'fabric' {
+                  height:  $tab-nrml-pop-item-height - 2;
+                }
+                @else if $tab-skin == 'highcontrast' {
+                  height:  $tab-nrml-pop-item-height - 4;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &.e-rtl {
+
+        .e-tab-header .e-toolbar-item {
+
+          &:not(.e-separator) {
+            margin: $tab-nrml-rtl-alt-item-margin;
+          }
+        }
+      }
+    }
+
+    &.e-rtl {
+
+      .e-tab-header {
+
+        .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-rtl-item-margin;
+        }
+
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+          .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child.e-active {
+            margin: $tab-nrml-rtl-item-margin;
+          }
+        }
+
+        .e-toolbar-item:not(.e-separator) {
+          margin: $tab-nrml-rtl-item-margin;
+
+          @if $tab-skin == 'FluentUI' {
+            .e-icon-right {
+              margin: $tab-rtl-nrml-it-text-margin;
+            }
+          }
+
+          .e-icon-left + .e-tab-text {
+            margin: $tab-rtl-nrml-it-text-margin;
+          }
+
+          .e-icons.e-close-icon {
+            margin: $tab-rtl-nrml-close-icon-margin;
+          }
+
+          &.e-itop .e-close-icon,
+          &.e-ibottom .e-close-icon {
+            left: $tab-rtl-nrml-close-icon-top-bottom-left;
+            right: auto;
+          }
+        }
+
+        &.e-close-show {
+
+          .e-toolbar-item.e-itop .e-text-wrap,
+          .e-toolbar-item.e-ibottom .e-text-wrap {
+            margin-left: $tab-rtl-nrml-text-container-margin-left;
+            margin-right: $tab-rtl-nrml-text-container-margin-right;
+          }
+        }
+
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+          &.e-horizontal-bottom {
+
+            .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-separator) {
+              margin: 0 0 0 2px;
+
+              &.e-active {
+                margin: 0 0 0 2px;
+
+                .e-tab-text {
+                  margin-bottom: 0;
+                }
+              }
+            }
+          }
+        }
+
+        .e-toolbar-pop {
+
+          .e-toolbar-item {
+            margin: 0;
+
+            .e-tab-text {
+              padding-left: $tab-rtl-nrml-pop-text-padding-left;
+              padding-right: 0;
+
+              @media screen and (max-width: 480px) {
+                padding-left: 0;
+              }
+            }
+
+            .e-icons.e-close-icon {
+              margin: $tab-rtl-nrml-pop-close-icon-margin;
+            }
+
+            .e-close-icon {
+              left: $tab-rtl-pop-close-icon-left;
+              right: auto;
+            }
+
+            &.e-itop .e-close-icon,
+            &.e-ibottom .e-close-icon {
+              left: $tab-rtl-big-pop-close-icon-top-bottom-left;
+              right: auto;
+            }
+
+            &.e-itop .e-tab-text,
+            &.e-ibottom .e-tab-text {
+              margin: 0;
+              padding-left: 10px;
+              padding-right: 0;
+
+              @media screen and (max-width: 480px) {
+                margin: 0;
+                padding-left: 10px;
+                padding-right: 0;
+              }
+            }
+          }
+        }
+
+        .e-hor-nav,
+        .e-scroll-right-nav {
+          padding: $tab-rtl-nrml-nav-right-icon-padding;
+        }
+
+        .e-scroll-left-nav {
+          padding: $tab-rtl-nrml-nav-left-icon-padding;
+        }
+      }
+    }
+
+    &.e-vertical-tab.e-icon-tab {
+
+      .e-tab-header.e-vertical {
+
+        .e-hor-nav .e-popup-up-icon,
+        .e-hor-nav .e-popup-down-icon {
+
+          &::before {
+            display: none;
+          }
+
+          &::after {
+            margin: 0;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .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-height;
+
+      @media screen and (max-width: 480px) {
+        height: $tab-big-height;
+      }
+
+      @if $tab-skin == 'fabric' {
+        height: $tab-nrml-height - 2;
+      }
+      @else if $tab-skin == 'highcontrast' {
+        height: $tab-nrml-height - 4;
+      }
+    }
+
+    .e-tab-text {
+      display: inherit;
+      font-family: $tab-font-family;
+      font-size: $tab-nrml-font-size;
+      font-weight: $tab-font-weight;
+      text-transform: $tab-text-transform;
+
+      @media screen and (max-width: 480px) {
+        font-size: $tab-big-font-size;
+      }
+    }
+
+    @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+      .e-tab-text {
+        align-self: auto;
+      }
+    }
+
+    .e-icons.e-close-icon {
+      display: none;
+    }
+
+    .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: $tab-pop-close-icon-top;
+
+      @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+        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;
+
+      @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+        line-height: $tab-nrml-icon-container-size;
+      }
+
+      @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;
+        }
+      }
+    }
+
+    @if $tab-skin == 'FluentUI' {
+      .e-icon-right {
+        margin: $tab-nrml-it-text-margin;
+
+        @media screen and (max-width: 480px) {
+          margin: $tab-mob-it-text-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-big-height;
+
+      @if $tab-skin == 'fabric' {
+        height: $tab-big-height - 2;
+      }
+      @else if $tab-skin == 'highcontrast' {
+        height: $tab-big-height - 4;
+      }
+    }
+
+    .e-tab-text {
+      font-size: $tab-big-font-size;
+      @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+        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;
+
+      @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+        line-height: $tab-big-icon-container-size;
+      }
+    }
+
+    .e-tab-icon,
+    .e-tab-icon::before {
+      font-size: $tab-big-icon-size;
+    }
+
+    &.e-icon {
+
+      .e-tab-wrap {
+        padding: $tab-big-io-wrap-padding;
+      }
+    }
+
+    @if $tab-skin == 'FluentUI' {
+      .e-icon-right {
+        margin: $tab-big-it-text-margin;
+
+        @media screen and (max-width: 480px) {
+          margin: $tab-mob-it-text-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;
+      }
+
+      @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
+
+        .e-text-wrap {
+          height: auto;
+        }
+
+        &.e-active .e-tab-wrap {
+          height: 72px;
+        }
+      }
+    }
+
+    &.e-itop .e-tab-text {
+      margin: $tab-big-icon-top-margin;
+    }
+
+    &.e-ibottom .e-tab-text {
+      margin: $tab-big-icon-bottom-margin;
+    }
+  }
+}