@syncfusion/ej2-fabric-dark-theme 33.2.15 → 34.1.29

package/styles/pivotview/_theme.scss

@@ -0,0 +1,1809 @@
+@use 'variables' as *;
+@mixin wrap-style {
+  background-color: $pivotgrid-focus-color;
+  color: $pivotgrid-button-acitve-font-color;
+
+  @if ($skin-name =='bootstrap4') {
+    background-color: $pivotgrid-border-color;
+    border-color: $pivotgrid-active-border-color;
+    box-shadow: 0 0 0 .2rem $pivotgrid-box-shadow-color;
+  }
+
+  @if ($skin-name =='fluent2') {
+    /* stylelint-disable */
+    color: $pivotgrid-button-acitve-font-color !important;
+    /* stylelint-enable */
+  }
+}
+
+@include export-module('pivotview-theme') {
+  .e-pivotview.e-pivotview-autofit .e-grid {
+    .e-columnsheader .e-headercelldiv {
+      margin-right: $pivotgrid-margin-4;
+
+      @if ($skin-name =='FluentUI') or ($skin-name =='fluent2') or ($skin-name =='tailwind') or ($skin-name =='tailwind-dark') or ($skin-name =='Material3') {
+        &:has(> .e-pivotcell-container .e-value-sort-icon) {
+          margin-right: $pivotgrid-value-sort-icon-font-size;
+        }
+      }
+    }
+
+    .e-columnsheader {
+      /* stylelint-disable */
+      padding-right: $pivotgrid-padding-0 !important;
+    }
+
+    .e-group-rows .e-pivot-button {
+      display: none !important;
+      /* stylelint-enable */
+    }
+  }
+
+  .e-pivotview {
+    .e-pivotcell-container {
+      width: 100%;
+      align-items: center;
+      display: flex;
+      max-height: $pivotgrid-height-inherit;
+
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          align-self: stretch;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          width: $pivotgrid-width-100p;
+
+          @if ($skin-name == 'FluentUI') {
+            padding-bottom: $pivotgrid-padding-2;
+          }
+        }
+      }
+
+      .e-sortfilterdiv.e-value-sort-icon {
+        align-items: center;
+        display: flex;
+      }
+    }
+
+    .e-gridclip .e-pivotcell-container {
+      .e-stackedheadertext,
+      .e-headertext {
+        &.e-cellvalue {
+          text-overflow: clip;
+        }
+      }
+    }
+
+    .e-nextspan {
+      display: inline-block;
+      width: $pivotview-indent-space-size;
+    }
+
+    .e-lastspan {
+      display: inline-block;
+      padding-top: $pivotgrid-padding-10;
+      width: $pivotgrid-width-12;
+    }
+
+    .e-grid.e-gridhover tr[role = 'row']:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+      background-color: $pivotgrid-cell-hover-color;
+    }
+
+    .e-rowsheader .e-cellvalue {
+      margin-left: $pivotgrid-margin-10;
+    }
+
+    .e-valuescontent {
+      opacity: $pivotview-grid-content-opacity;
+      padding-right: $pivotgrid-padding-8;
+      text-align: right;
+
+      @if ($skin-name == 'tailwind3') {
+        padding-right: $pivotgrid-padding-12;
+      }
+    }
+
+    .e-grid .e-rowcell {
+      /* stylelint-disable */
+      font-size: $pivotgrid-content-font-size !important;
+      padding-left: $pivotgrid-padding-8;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      @if($skin-name == 'tailwind3') {
+        padding-left: $pivotgrid-padding-12;
+      }
+
+      &.e-disable {
+        display: none !important;
+      }
+    }
+
+    .e-grid .e-content-virtualtable {
+      overflow-x: auto;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    .e-gtot,
+    .e-gtot.e-rowsheader,
+    .e-gtot.e-columnsheader,
+    .e-grid .e-content,
+    .e-grid .e-gridheader {
+      background: $pivotgrid-gtot-background-color;
+    }
+
+    .e-headercell {
+      &.no-right-border {
+        border-right: 0 !important;
+      }
+      &.no-left-border {
+        border-left: 0 !important;
+      }
+      &.no-borders {
+        border-right: 0 !important;
+        border-left: 0 !important;
+      }
+    }
+
+    .e-headercell:not(.e-columnsheader) {
+      background: $pivotgrid-gtot-background-color !important;
+    }
+
+    .e-grid .e-gridheader {
+      border-bottom-width: $pivotgrid-border-1;
+      @if($skin-name == 'bootstrap5') {
+        border-bottom-color: $border-light;
+      }
+
+      table th[rowspan = '1'],
+      table th:not([rowspan]) {
+        padding-bottom: $pivotgrid-padding-0 !important;
+        padding-top: $pivotgrid-padding-0 !important;
+        vertical-align: middle;
+      }
+    }
+
+    .e-gtot {
+      font-weight: $pivotgrid-summary-font-weight;
+    }
+
+    .e-gtot
+    .e-cellvalue {
+      color: $pivotgrid-gtot-font-color;
+    }
+
+    .e-rowsheader,
+    .e-columnsheader {
+      background: $pivotgrid-header-background-color;
+    }
+
+    .e-rowsheader {
+      .e-cellvalue {
+        margin-left: $pivotgrid-rowsheader-cellvalue-margin-left;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        @if ($skin-name == 'tailwind') or ($skin-name == 'tailwind3') or ($skin-name == 'Material3') {
+          vertical-align: middle;
+        }
+      }
+    }
+
+    .e-pivot-conditional-empty-format {
+      margin: $pivotgrid-margin-10;
+    }
+
+    .e-member-editor-dialog,
+    .e-olap-editor-dialog {
+      // sass-lint:disable-all
+      min-height: $pivotgrid-height-350 !important;
+      min-width: $pivotgrid-width-320 !important;
+      visibility: hidden;
+      &.e-node-limit {
+        max-height: $pivotgrid-height-450 !important;
+      }
+      // sass-lint:enable-all
+    }
+
+    .e-member-editor-dialog .e-toolbar .e-toolbar-items {
+      margin-left: $pivotview-filter-toolbar-items-margin-left;
+    }
+
+    .e-member-editor-dialog .e-rtl.e-toolbar .e-toolbar-items {
+      margin-left: $pivotgrid-margin-0;
+      margin-right: $pivotview-filter-toolbar-items-margin-right;
+    }
+
+    .e-pivot-format-dialog {
+      .e-pivot-format-table {
+        width: $pivotgrid-width-100p;
+      }
+    }
+
+    .e-toolbar .e-tbar-btn {
+      background-color: transparent;
+
+      @if ($skin-name =='fluent2') {
+        margin-top: $pivotgrid-margin-4;
+      }
+
+      &:hover {
+        @if ($skin-name == 'tailwind') {
+          background-color: $pivot-toolbar-icon-hover-color;
+        }
+      }
+    }
+
+    .e-grid .e-rowsheader.e-active,
+    .e-grid .e-rowsheader.e-cellselectionbackground,
+    .e-grid .e-columnsheader.e-active,
+    .e-grid .e-columnsheader.e-cellselectionbackground,
+    .e-grid .e-rowsheader.e-active,
+    .e-grid .e-rowsheader.e-selectionbackground,
+    .e-grid .e-columnsheader.e-active,
+    .e-grid .e-columnsheader.e-selectionbackground {
+      background: $pivotgrid-header-selection-bg-color !important;
+      color: $pivotgrid-header-selection-color !important;
+
+      .e-stackedheadercelldiv,.e-cellvalue,
+      .e-icons,
+      .e-headertext {
+        color: $pivotgrid-header-selection-color !important;
+      }
+    }
+
+    .e-drop-indicator {
+      display: block;
+    }
+
+    div {
+      div span.e-value-sort-icon {
+        @if ($skin-name == 'Material3') {
+          padding: $pivotgrid-padding-0 !important;
+        }
+
+        &.e-value-sort-icon-left {
+          float: left;
+        }
+      }
+    }
+
+    .e-sortfilterdiv {
+      &.e-value-sort-icon {
+        float: right;
+        font-size: $pivotgrid-value-sort-icon-font-size !important;
+      }
+
+      &:not(.e-value-sort-icon) {
+        display: none;
+      }
+    }
+
+    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
+      margin: $pivotgrid-vsort-column-margin !important;
+    }
+
+    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+      margin: $pivotgrid-vsort-column-parent-margin !important;
+    }
+
+    .e-stackedheadercelldiv, .e-headercelldiv {
+      .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
+        margin: $pivotgrid-cell-value-margin !important;
+        margin-left: $pivotgrid-margin-auto !important;
+        padding-bottom: $pivotgrid-cell-value-margin !important;
+        padding-top: $pivotgrid-cell-value-margin !important;
+      }
+    }
+
+    .e-rowsheader .e-sortfilterdiv {
+      line-height: $pivotgrid-line-height-initial !important;
+      margin: $pivotgrid-margin-0 !important;
+      padding: $pivotgrid-padding-0 !important;
+    }
+
+    .e-pivotchart > svg, .e-pivotchart-inner > svg {
+      border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
+    }
+
+    .e-grid .e-icons {
+      color: $pivotgrid-button-icon-color !important;
+      @if ($skin-name == 'bootstrap4') {
+        color: $gray-700 !important;
+      }
+
+      @if ($skin-name =='bootstrap5') or ($skin-name =='bootstrap5.3') {
+        color: $pivotview-grid-header-font-color !important;
+      }
+
+      &:hover {
+        color: $pivotgrid-icon-hover-color !important;
+        @if ($skin-name == 'bootstrap4') {
+          color: $gray-700 !important;
+        }
+
+        @if ($skin-name == 'bootstrap5') or ($skin-name == 'bootstrap5.3') {
+          color: $pivotview-grid-header-font-color !important;
+        }
+
+        @if ($skin-name =='fluent2') {
+          color: $pivotgrid-button-icon-color !important;                  
+        }
+      }
+    }
+
+    .e-grid {
+      border-color: $pivotgrid-default-border-color;
+    }
+
+    .e-grid .e-rowsheader {
+      line-height: $pivotgrid-line-height-initial !important;
+      padding-left: $pivotgrid-padding-8;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      -webkit-touch-callout: none;
+
+      @if ($skin-name == 'tailwind') {
+        padding-left: $pivotgrid-padding-12;
+      }
+
+      .e-rowcell span{
+        flex-shrink: 0;
+      }
+
+      .e-pivotrow-container {
+        display: flex;
+        width: $pivotgrid-width-100p;
+        align-items: center;
+      }
+      
+      &.e-active {
+        .e-icons {
+          color: $pivotgrid-button-active-icon-color !important;
+          @if ($skin-name == 'bootstrap4') {
+            color: $gray-700 !important;
+          }
+
+          @if ($skin-name == 'bootstrap5') {
+            color: $pivotview-grid-header-font-color !important;
+          }
+        }
+      }
+    }
+
+    .e-grid {
+
+      th.e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
+        box-shadow: none !important;
+      }
+
+      @if ($skin-name == 'bootstrap5.3')
+      {
+        :is([class*="format"]).e-cellselectionbackground {
+          background: $table-bg-color-selected;
+        }
+      }
+
+      .e-pivot-content-loader {
+        position: absolute;
+        z-index: 10;
+        color: $pivotgrid-primary-color;
+        font-size: $pivotview-font-icon-20;
+        text-align: center;
+        padding: $pivotgrid-spacing-10p;
+        pointer-events: none;
+        
+        &.e-hide-loader {
+          display: none;
+        }
+      }
+      .e-virtual-pivot-content {
+        visibility: hidden;
+      }
+
+      th.e-leftfreeze:has(.e-rhandler:hover) {
+        border-right: $pivotgrid-border-1 dashed $pivotgrid-default-border-color !important;
+      }
+      &.e-rtl {
+        th.e-leftfreeze:has(.e-rhandler:hover) {
+          border-left: $pivotgrid-border-1 dashed $pivotgrid-default-border-color !important;
+          border-right: $pivotgrid-border-unset !important;
+        }
+      }
+    }
+
+    &.sf-pivotview {
+
+      &:has(.e-pivot-grouping-bar) .e-headercontent .e-columnheader .e-group-row .e-headercelldiv {
+        display: none;
+      }
+
+      .e-grid.sf-grid {
+        .e-gridcontent {
+        
+          .e-content,
+          .e-content-virtualtable {
+            &.e-virtual-content-min-height {
+              min-height: 1px !important;
+            }
+          }
+        
+          .e-movablescrolldiv {
+            &.e-scrollbar-display-none {
+              display: none !important;
+            }
+          
+            &.e-scrollbar-display-block {
+              display: block !important;
+            }
+          }
+        
+          .e-content-virtualtable {
+            &.e-overflowx-auto {
+              overflow-x: auto;
+            }
+          
+            &.e-overflowx-visible {
+              overflow-x: visible;
+            }
+          }
+        }
+      }
+
+      .e-headercell.no-borders.e-leftfreeze,
+      .e-headercell.no-left-border.e-leftfreeze,
+      .e-headercell.no-right-border.e-leftfreeze {
+        .e-rhandler.e-rcursor {
+          border-right: 0 !important;
+        }
+      }
+      
+      .e-spinner-pane.e-pivot-outer-spinner {
+        z-index: 1 !important;
+      }
+
+      .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
+        visibility: hidden !important;
+        /* stylelint-enable */
+      }
+
+      &.e-device .e-pivotcell-container .e-stackedheadertext.e-cellvalue {
+        align-self: center;
+      }
+
+      th.e-columnsheader .e-rhandler.e-rcursor {
+        /* stylelint-disable */
+        height: $pivotgrid-height-100p !important;
+        /* stylelint-enable */
+      }
+    }
+
+    .e-grid .e-columnsheader {
+      /* stylelint-disable */
+      padding-left: $pivotgrid-padding-8 !important;
+      padding-right: $pivotgrid-padding-8 !important;
+
+      @if($skin-name == 'tailwind') or ($skin-name == 'tailwind-dark') {
+        text-transform: none;
+      }
+    }
+
+    .sf-grid .e-spinner-pane {
+    z-index: 1 !important;
+    }
+
+    .e-grid .e-headercelldiv,
+    .e-grid .e-stackedheadercelldiv {
+      line-height: $pivotgrid-line-height-normal;
+    }
+
+    .e-frozenheader>.e-table,
+    .e-frozencontent>.e-table {
+      border-left-color: $pivotgrid-default-border-color !important;
+      border-right-color: $pivotgrid-default-border-color !important;
+      border-left: $pivotgrid-border-0;
+      border-right-width: $pivotgrid-border-1;
+    }
+
+    .e-leftfreeze.e-freezeleftborder {
+      border-left-color: $pivotgrid-default-border-color !important;
+      border-right-color: $pivotgrid-default-border-color !important;
+      border-right-width: $pivotgrid-border-1 !important;
+
+      &:not(.e-gtot) {
+        background: $pivotgrid-header-background-color;
+      }
+    }
+
+    .e-stackedheadercelldiv {
+      display: block;
+      padding: $pivotgrid-padding-0 $pivotgrid-padding-0 $pivotgrid-padding-0 $pivotgrid-padding-1 !important;
+    }
+
+    .e-stackedheadertext.e-cellvalue,
+    .e-stackedheadercelldiv.e-cellvalue {
+      display: inline-block;
+      padding-left: $pivotview-header-text-padding !important;
+    }
+
+    .e-headercelldiv.e-cellvalue {
+      @if($skin-name == 'bootstrap4') or ($skin-name == 'bootstrap') or ($skin-name == 'bootstrap-dark') or ($skin-name == 'material-dark') or ($skin-name == 'material') {
+        margin-left: $pivotgrid-margin-0;
+      }
+    }
+
+    .e-stackedheadercelldiv,
+    .e-stackedheadertext,
+    .e-headertext,
+    .e-rowsheader .e-cellvalue {
+      color: $pivotview-grid-header-font-color;
+      font-size: $pivotview-grid-header-font-size;
+      font-weight: $pivotview-grid-header-font-weight;
+    }
+
+    &:not(e-rtl) {
+      .e-rowcell.e-leftfreeze.e-firstcolumn {
+        left: 0px;
+      }
+    }
+
+    .e-valuescontent .e-cellvalue {
+      .e-hyperlinkcell {
+        cursor: pointer;
+      }
+    }
+    /* stylelint-enable */
+
+    .e-rowcell {
+      opacity: 1;
+
+      /* stylelint-disable */
+      .e-cellvalue {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
+      /* stylelint-enable */
+    }
+
+    .e-grouping-bar {
+      min-width: $pivotgrid-width-400;
+      .e-right-axis-fields {
+        flex: auto;
+      }
+
+      .e-left-axis-fields,
+      .e-right-axis-fields {
+        height: $pivotgrid-height-auto;
+      }
+
+      .e-axis-row,
+      .e-axis-column,
+      .e-axis-value,
+      .e-axis-filter,
+      .e-group-all-fields {
+        background: $pivotgrid-grp-bg-color;
+        display: flex;
+      }
+
+      .e-axis-row.e-axis-row-hide {
+        display: none;
+      }
+
+      .e-left-axis-fields-container {
+        display: flex;
+      }
+
+      .e-left-axis-fields {
+        border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
+        border-bottom-width: $pivotgrid-border-0;
+        border-right-width: $pivotgrid-border-0;
+        min-width: $pivotgrid-width-100;
+
+        &.e-static-server-rendering {
+          width: $pivotgrid-width-250;
+        }
+      }
+
+      /* stylelint-disable */
+      .e-all-fields-axis {
+        background: $pivotgrid-grp-bg-color;
+        border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
+        border-bottom-width: $pivotgrid-border-0;
+        height: $pivotgrid-grouping-height !important;
+        min-height: $pivotgrid-grouping-height !important;
+
+        @if($skin-name == 'FluentUI') or ($skin-name == 'fluent2'){
+          box-shadow: none;
+        }
+
+        .e-hscroll .e-scroll-nav {
+          background: $pivotgrid-grp-bg-color;
+          min-height: $pivotgrid-grouping-height !important;
+
+          &:hover {
+            background-color: $pivotgrid-hover-color;
+            @if ($skin-name == 'bootstrap4') {
+              background-color: $pivotgrid-bg-color;
+            }
+  
+            .e-nav-arrow {
+              color: $pivotgrid-icon-hover-color !important;
+            }
+          }
+        }
+
+        .e-toolbar-items {
+          background: $pivotgrid-grp-bg-color;
+          min-height: $pivotgrid-grouping-height !important;
+
+          .e-toolbar-item {
+            margin: $pivotgrid-margin-0 !important;
+            min-height: $pivotgrid-grouping-height !important;
+            padding: $pivotgrid-padding-0 !important;
+          }
+        }
+      }
+      /* stylelint-enable */
+
+      .e-right-axis-fields {
+        border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
+        border-bottom-width: $pivotgrid-border-0;
+
+        .e-axis-filter {
+          border-bottom: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
+        }
+      }
+    }
+
+    .e-group-values.e-values,
+    .e-group-rows.e-rows {
+      /* stylelint-disable */
+      display: block !important;
+      /* stylelint-enable */
+    }
+
+    .e-group-values,
+    .e-group-columns,
+    .e-group-filters,
+    .e-group-rows,
+    .e-group-all-fields {
+      background: $pivotgrid-grp-bg-color;
+      display: inline-table;
+      flex: auto;
+      height: $pivotgrid-grouping-height;
+      min-height: $pivotgrid-grouping-height;
+      overflow: hidden;
+      padding-left: $pivotview-axis-indent-padding;
+      scroll-behavior: smooth;
+      vertical-align: top;
+
+      &.e-drag-restrict {
+        cursor: no-drop;
+      }
+
+      .e-draggable-prompt {
+        color: $pivotgrid-prompt-default-font-color;
+        display: inline-block;
+        line-height: $pivotgrid-prompt-line-height;
+        margin-top: $pivotgrid-margin-4;
+        padding-left: $pivotgrid-horizontal-button-padding;
+        pointer-events: none;
+        position: relative;
+        text-align: center;
+        vertical-align: middle;
+        font-size: $pivotgrid-content-font-size;
+        font-weight: $pivotview-font-weight-normal;
+        @if ($skin-name == 'bootstrap4') {
+          font-size: $pivotview-font-size-12;
+        }
+      }
+    }
+
+    .e-grouping-bar,
+    .e-group-rows {
+
+      .e-pvt-btn-div {
+        display: inline-flex;
+        height: $pivotgrid-height-24;
+        padding: $pivotgrid-vertical-button-padding;
+        padding-bottom: $pivotgrid-padding-0;
+        padding-left: $pivotgrid-padding-0;
+        padding-right: $pivotgrid-horizontal-button-padding;
+
+        .e-indent-div {
+          pointer-events: none;
+        }
+
+        .e-drop-indicator {
+          pointer-events: none;
+          width: $pivotgrid-width-2;
+
+          &.e-drop-hover {
+            border-left: $pivotgrid-border-1 dashed $pivotgrid-drop-hover-color;
+            @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+              border-left: $pivotgrid-border-1 solid $pivotgrid-drop-hover-color;
+            }
+          }
+        }
+      }
+
+      .e-pivot-button {
+        align-items: center;
+        background: $pivotgrid-button-background-color;
+        border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-button-border-color;
+        border-radius: $pivotgrid-button-border-radius;
+        box-shadow: none;
+        /* stylelint-disable */
+        color: $pivotgrid-button-font-color !important;
+        /* stylelint-enable */
+        cursor: default;
+        display: flex;
+        font-weight: $pivotview-font-weight-normal;
+        height: $pivotgrid-height-24;
+        padding: $pivotgrid-padding-0 $pivotgrid-padding-8;
+        text-transform: none;
+        vertical-align: bottom;
+        z-index: 1;
+
+        @if ($skin-name == 'tailwind3') {
+          font-weight: $pivotview-font-weight-medium;
+        }
+
+        &.e-list-selected {
+          opacity: .5;
+          @if ($skin-name == 'bootstrap4') {
+            opacity: .7;
+          }
+        }
+
+        &:hover {
+          background: $pivotgrid-hover-color;
+          @if ($skin-name != 'Material3' and $skin-name != 'tailwind3') {
+            border-color: $pivotgrid-hover-color;
+          }
+          @if ($skin-name == 'bootstrap4') {
+            background-color: $pivotgrid-bg-color;
+            border-color: $pivotgrid-border-color;
+          }
+          @if ($skin-name =='fluent2') {
+            /* stylelint-disable */
+            color: $pivotgrid-icon-hover-color !important;
+            /* stylelint-enable */
+          }
+
+          .e-sort,
+          .e-dropdown-icon,
+          .e-pv-filter,
+          .e-pv-filtered,
+          .e-remove,
+          .e-edit {
+            color: $pivotgrid-icon-hover-color;
+          }
+        }
+
+        &.e-btn-focused {
+          @include wrap-style;
+
+          .e-sort,
+          .e-dropdown-icon,
+          .e-pv-filter,
+          .e-pv-filtered,
+          .e-remove,
+          .e-edit {
+            color: $pivotgrid-icon-focus-color;
+          }
+        }
+
+        &:focus {
+          @if ($skin-name =='tailwind3') {
+            border-color: $pivotgrid-primary-color;
+            /* stylelint-disable */
+            background-color: $content-bg-color !important;
+            /* stylelint-enable */
+          }
+        }
+
+        &:focus,
+        &:active {
+          @include wrap-style;
+
+          .e-sort,
+          .e-dropdown-icon,
+          .e-pv-filter,
+          .e-pv-filtered,
+          .e-remove,
+          .e-edit {
+            color: $pivotgrid-icon-focus-color;
+          }
+        }
+
+        .e-pvt-btn-content {
+          background: transparent;
+          cursor: move;
+          flex: auto;
+          font-size: $pivotgrid-button-font-size;
+          margin-right: $pivotgrid-margin-4;
+          overflow: hidden;
+          text-align: left;
+          text-overflow: ellipsis;
+          @if ($skin-name == 'bootstrap4') {
+            margin-right: $pivotgrid-margin-4;
+          }
+
+          @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+            color: $pivotgrid-button-icon-color;
+          }
+
+          &.e-disable-drag {
+            cursor: auto;
+          }
+        }
+
+        /* stylelint-disable */
+        .e-drag {
+          display: none;
+        }
+
+        .e-sort,
+        .e-dropdown-icon,
+        .e-pv-filter,
+        .e-pv-filtered,
+        .e-remove,
+        .e-edit {
+          color: $pivotgrid-button-icon-color;
+          cursor: pointer;
+          display: inline-block;
+          font-size: $pivotgrid-button-icon-size;
+          margin-left: $pivotgrid-margin-4;
+          width: $pivotgrid-button-icon-wrapper-size;
+
+          &:hover {
+            color: $pivotgrid-icon-hover-color;
+          }
+
+          &.e-disable {
+            display: none;
+          }
+        }
+        /* stylelint-enable */
+
+        .e-sort {
+          height: $pivotgrid-button-icon-size;
+          transform: rotateX(0deg);
+          transition: transform 200ms ease-in-out;
+
+          &.e-descend {
+            transform: rotateX(180deg);
+          }
+        }
+
+        .e-dropdown-icon {
+          margin-top: $pivotgrid-margin-1;
+        }
+      }
+    }
+
+    .e-group-values {
+      .e-pvt-btn-div {
+        .e-pivot-button {
+          max-width: $pivotgrid-width-230;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    .e-group-filters,
+    .e-group-columns {
+      width: $pivotgrid-width-100p;
+    }
+
+    th.e-group-row .e-axis-row {
+      display: inline-block;
+      height: $pivotgrid-height-auto;
+      vertical-align: top;
+      width: $pivotgrid-width-100p;
+    }
+
+    &.sf-pivotview {
+      th.e-headercell.e-group-row.e-leftfreeze {
+        /* stylelint-disable */
+        box-shadow: none !important;
+        /* stylelint-enable */
+      }
+    }
+
+    /* stylelint-disable */
+    .e-group-row {
+      padding: $pivotgrid-padding-0 !important;
+
+      .e-group-rows {
+        display: table;
+        flex: none;
+        width: $pivotgrid-width-100p;
+
+        &.e-tabular-group-rows {
+          padding-top: $pivotgrid-padding-3 !important;
+        }
+
+        &.e-static-server-rendering {
+          display: grid;
+        }
+
+        .e-pvt-btn-div {
+          max-width: $pivotgrid-width-unset;
+          width: $pivotgrid-width-100p;
+          &.e-tabular-pvt-btn {
+            margin: $pivotgrid-margin-0 !important;
+          }
+          .e-pivot-button {
+            width: $pivotgrid-width-100p !important;
+            max-width: $pivotgrid-width-180 !important;
+            min-width: $pivotgrid-width-80;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &.e-tabular-row-btn {
+              width: $pivotgrid-width-100p !important;
+              max-width: $pivotgrid-width-180 !important;
+              min-width: $pivotgrid-width-80;
+            }
+            @if ($skin-name == 'bootstrap4') {
+              font-weight: $pivotview-font-weight-normal;
+            }
+
+            &:hover {
+              background-color: $pivotgrid-hover-color;
+              @if ($skin-name == 'bootstrap4') {
+                background-color: $pivotgrid-bg-color;
+                border-color: $pivotgrid-border-color;
+              }
+    
+              .e-sort,
+              .e-dropdown-icon,
+              .e-pv-filter,
+              .e-pv-filtered,
+              .e-remove,
+              .e-edit {
+                color: $pivotgrid-icon-hover-color !important;
+              }
+            }
+
+            &.e-btn-focused {
+              @include wrap-style;
+
+              .e-sort,
+              .e-dropdown-icon,
+              .e-pv-filter,
+              .e-pv-filtered,
+              .e-remove,
+              .e-edit {
+                color: $pivotgrid-icon-focus-color  !important;
+              }
+            }
+    
+            &:focus,
+            &:active {
+              @include wrap-style;
+    
+              .e-sort,
+              .e-dropdown-icon,
+              .e-pv-filter,
+              .e-pv-filtered,
+              .e-remove,
+              .e-edit {
+                color: $pivotgrid-icon-focus-color !important;
+              }
+            }
+    
+            .e-sort,
+            .e-dropdown-icon,
+            .e-pv-filter,
+            .e-pv-filtered,
+            .e-remove,
+            .e-edit {
+              color: $pivotgrid-button-icon-color !important;
+              font-size: $pivotgrid-button-icon-size;
+              margin-left: $pivotgrid-margin-4 !important;
+              width: $pivotgrid-button-icon-wrapper-size;
+    
+              &:hover {
+                color: $pivotgrid-icon-hover-color !important;
+              }
+    
+              &.e-disable {
+                display: none;
+              }
+            }
+    
+            .e-sort {
+              height: $pivotgrid-button-icon-size;
+              width: $pivotgrid-width-18;
+    
+              &.e-descend {
+                transform: rotateX(180deg);
+              }
+            }
+    
+            .e-dropdown-icon {
+              margin-top: $pivotgrid-margin-1;
+            }
+          }
+
+          .e-indent-div {
+            pointer-events: none;
+          }
+        }
+      }
+    }
+
+    /* stylelint-enable */
+    .e-axis-value {
+      display: inline-block;
+      height: $pivotgrid-height-100p;
+
+      .e-group-values {
+        height: $pivotgrid-height-100p;
+        padding-bottom: $pivotgrid-padding-0;
+      }
+
+      .e-group-chart-values {
+        align-items: center;
+        display: flex;
+        height: $pivotgrid-height-28;
+      }
+
+      .e-group-chart-values-drodown {
+        font-size: $pivotview-font-icon-13;
+        height: $pivotgrid-height-25;
+      }
+    }
+
+    .e-axis-column .e-group-chart-columns-dropdown {
+      font-size: $pivotview-font-icon-13;
+      height: $pivotgrid-height-25;
+      margin: $pivotgrid-group-chart-values-dropdown-margin;
+
+      .e-input-group-icon {
+        min-height: $pivotgrid-height-initial;
+      }
+
+      input.e-input {
+        padding-bottom: $pivotgrid-padding-7;
+      }
+    }
+
+    /* stylelint-disable */
+    .e-chart-grouping-bar .e-axis-value {
+      height: $pivotgrid-height-auto !important;
+      border-bottom: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
+
+      .e-group-chart-values-drodown {
+        margin: $pivotgrid-group-chart-values-dropdown-margin;
+
+        .e-input-group-icon {
+          min-height: $pivotgrid-height-initial;
+        }
+
+        input.e-input {
+          align-self: center;
+          height: $pivotgrid-height-initial;
+        }
+      }
+    }
+
+    .e-icons:not(.e-frame):not(.e-btn-icon):not(.e-sort):not(.e-dropdown-icon):not(.e-pv-filter):not(.e-pv-filtered):not(.e-remove):not(.e-edit):not(.e-drag):not(.e-selected-option-icon):not(.e-nav-arrow) {
+      height: $pivotgrid-height-auto;
+      width: $pivotgrid-width-auto;
+    }
+
+    .e-expand::before,
+    .e-expand {
+      font-size: $pivotgrid-expand-icon-fontsize !important;
+    }
+
+    .e-collapse::before,
+    .e-collapse {
+      font-size: $pivotgrid-collapse-icon-fonsize !important;
+    }
+    /* stylelint-enable */
+
+    .e-expand,
+    .e-collapse {
+      cursor: pointer;
+      display: inline-block;
+      height: $pivotgrid-height-18;
+      text-align: center;
+      width: $pivotgrid-width-18;
+      @if ($skin-name == 'bootstrap5') or ($skin-name == 'bootstrap5.3') or ($skin-name == 'FluentUI') or ($skin-name == 'Material3') or ($skin-name == 'tailwind') or ($skin-name == 'tailwind3') or ($skin-name == 'fluent2') {
+        vertical-align: middle;
+      }
+    }
+
+    /* stylelint-disable */
+    th .e-expand,
+    th .e-collapse {
+      font-size: $pivotgrid-expcoldiv-fontsize !important;
+      margin-left:  $pivotgrid-margin-0;
+      @if ($skin-name == 'bootstrap4') {
+        display: flex;
+      }
+    }
+    /* stylelint-enable */
+
+    .e-pivot-pager {
+      padding: $pivotpager-padding;
+
+      &.sf-pager {
+        .e-pivot-pager-info-container{
+          &.e-pagercontainer {
+            font-size: unset;
+          }
+        }
+      }
+
+      &.e-pivot-pager-bottom {
+        border-top: $pivotgrid-border-0;
+      }
+  
+      &.e-pivot-pager-top {
+        border-bottom: $pivotgrid-border-0;
+      }
+
+      .e-pivotview-vseparator {
+        height: $pivotgrid-height-auto;
+        border-left: $pivotpager-separator-border;
+        margin: $pivotpager-v-separator-margin;
+      }
+
+      .e-pivot-pager-maindiv {
+        display: flex;
+        flex-direction: row;
+
+        .e-pivot-pager-row-maindiv,
+        .e-pivot-pager-column-maindiv {
+          display: flex;
+          flex-direction: column;
+          width: $pivotgrid-width-50p;
+
+          .e-icon-first,
+          .e-icon-prev,
+          .e-icon-next,
+          .e-icon-last {
+            font-size: $pivotpager-page-icon-size;
+            padding: $pivotpager-page-icon-padding;
+
+            /* stylelint-disable */
+            @if ($skin-name =='material-dark') or ($skin-name =='material') {
+              margin: $pivotgrid-margin-0 !important;
+            }
+
+            @if ($skin-name == 'Material3') {
+              border: $pivotgrid-sort-select-border-color;
+            }
+          }
+
+        /* stylelint-enable */
+          .e-pivotview-text-div {
+            display: flex;
+            flex-direction: row;
+          }
+          
+          .e-pivotview-row-pagerString,
+          .e-pivotview-column-pagerString {
+            color: $pivotpager-axis-title-font-color;
+            font-size: $pivotpager-title-font-size;
+            overflow: hidden;
+            text-align: initial;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: $pivotgrid-width-50p;
+          }
+
+          .e-pivotview-row-size,
+          .e-pivotview-column-size {
+            color: $pivotpager-size-title-font-color;
+            font-size: $pivotpager-title-font-size;
+            overflow: hidden;
+            text-align: end;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: $pivotgrid-width-50p;
+          }
+
+          .e-pivotview-text-div-1 {
+            flex: none;
+
+            .e-pagercontainer {
+              margin-top: $pivotpager-page-container-marging-top;
+              @if ($skin-name == 'material-dark') or ($skin-name == 'material') {
+                margin: $pivotpager-page-container-marging-top $pivotgrid-margin-0 $pivotgrid-margin-0 $pivotgrid-margin-0;
+              }
+
+              @if ($skin-name == 'Material3') {
+                border: $pivotgrid-sort-select-border-color;
+              }
+
+              &.e-pivot-pager-info-container,
+              &.e-pager-dropdown {
+                border-style: none;
+                vertical-align: top;
+              }
+              &.e-pager-dropdown .e-input-group .e-input-group-icon {
+                @if ($skin-name == 'Material3') {
+                  margin-top: $pivotgrid-margin-0;
+                  margin-bottom: $pivotgrid-margin-0;
+                }
+              }
+              &.e-pager-dropdown .e-input-group {
+                /* stylelint-disable */
+                width: $pivotgrid-width-64 !important;
+                /* stylelint-enable */
+              }
+            }
+            
+            .e-pager-dropdown {
+              float: right;
+            }
+          }
+          
+          .e-pivot-row-of-string-maindiv,
+          .e-pivot-column-of-string-maindiv {
+            line-height: $pivotpager-single-title-line-height;
+            @if ($skin-name == 'Material3') {
+              /* stylelint-disable */
+              color: $pivotpager-string-maindiv-font-color !important;
+              /* stylelint-enable */
+            }
+
+            .e-pivotview-row-pagerNumber,
+            .e-pivotview-column-pagerNumber {
+              font-weight: $pivotpager-pager-number-font-weight;
+            }
+          }
+          
+          .e-pivot-row-pager-settings,
+          .e-pivot-column-pager-settings {
+            flex: none;
+
+            &.e-pivot-pager-axis-container {
+              display: inline-table;
+            }
+
+            .e-numeric {
+              @if ($skin-name != 'fluent2') {
+                vertical-align: top;
+              }
+              margin: $pivotpager-numeric-box-margin;
+
+              .e-pivot-pager-row-dropdown,
+              .e-pivot-pager-column-dropdown {
+                @if ($skin-name == 'Material3') {
+                  font-size: $pivotpager-numeric-font-size;
+                }
+
+                &.wide-width {
+                  width: $pivotgrid-width-64;
+                }
+                &.narrow-width {
+                  width: $pivotgrid-width-50;
+                }
+              }
+            }
+          }
+
+          .e-pivot-both-pager-settings {
+            .e-numeric {
+              @if ($skin-name == 'fluent2') {
+                vertical-align: top;
+              }
+            }
+          }
+        }
+
+        &.e-pivot-pager-single-maindiv {
+          .e-pivot-pager-row-maindiv,
+          .e-pivot-pager-column-maindiv {
+            flex-direction: row;
+            width: $pivotgrid-width-100p;
+
+            .e-pagercontainer {
+              margin-top: $pivotgrid-margin-0;
+              
+              @if ($skin-name == 'Material3') {
+                border: $pivotgrid-sort-select-border-color;
+              }
+              &.e-pivot-pager-info-container,
+              &.e-pager-dropdown {
+                border-style: none;
+              }
+            }
+
+            .e-pivotview-row-pagerString,
+            .e-pivotview-column-pagerString {
+              text-align: center;
+              width: $pivotgrid-width-100p;
+            }
+
+            .e-pivotview-text-div-1 {
+              /* stylelint-disable */
+              width: $pivotgrid-width-auto !important;
+              /* stylelint-enable */
+            }
+
+            .e-pivot-pager-nav-container {
+              @if ($skin-name == 'Material3') {
+                border: $pivotgrid-sort-select-border-color;
+              }
+            }
+
+            .e-pivotview-row-pagerString,
+            .e-pivotview-column-pagerString {
+              flex: auto;
+              font-size: $pivotpager-single-title-font-size;
+              line-height: $pivotpager-single-title-line-height;
+              text-align: center;
+            }
+
+            .e-pivotview-text-div-1 {
+              .e-pivotview-row-size,
+              .e-pivotview-column-size {
+                font-size: $pivotpager-single-title-font-size;
+                line-height: $pivotpager-single-title-line-height;
+                padding: $pivotgrid-padding-0 $pivotpager-single-size-title-padding $pivotgrid-padding-0 $pivotgrid-padding-0;
+                width: $pivotgrid-width-inherit;
+              }
+            }
+          }
+        }
+      }
+
+      &.e-compact-view {
+        .e-pivotview-vseparator {
+          margin-top: $pivotpager-v-separator-margin-top;
+        }
+
+        .e-pivot-pager-maindiv {
+          .e-pivot-pager-row-maindiv,
+          .e-pivot-pager-column-maindiv {
+            align-items: center;
+            flex-direction: row;
+
+            .e-pivotview-text-div,
+            .e-pivotview-text-div-1 {
+              align-items: center;
+              display: flex;
+              flex-direction: row;
+              width: $pivotgrid-width-50p;
+
+              .e-pagercontainer {
+                margin-top: $pivotgrid-margin-0;
+
+                @if ($skin-name =='material-dark') or ($skin-name =='material') {
+                  margin-top: $pivotpager-touch-page-container-marging-top;
+                }
+
+                @if ($skin-name == 'Material3') {
+                  border: $pivotgrid-sort-select-border-color;
+                }
+              }
+
+              .e-pivotview-row-size,
+              .e-pivotview-column-size {
+                flex: auto;
+                font-size: $pivotpager-single-title-font-size;
+                line-height: $pivotpager-single-title-line-height;
+                padding: $pivotgrid-padding-0 $pivotpager-single-size-title-padding $pivotgrid-padding-0 $pivotgrid-padding-0;
+                text-align: end;
+                width: $pivotgrid-width-inherit;
+              }
+
+              .e-pivotview-row-pagerString,
+              .e-pivotview-column-pagerString {
+                font-size: $pivotpager-single-title-font-size;
+                line-height: $pivotpager-single-title-line-height;
+                min-width: $pivotgrid-width-50;
+                text-align: initial;
+                width: $pivotgrid-width-inherit;
+              }
+
+              .e-pivot-row-pager-settings,
+              .e-pivot-column-pager-settings {
+                align-items: center;
+                display: flex;
+              }
+            }
+
+            .e-pivotview-text-div-1 .e-pagercontainer{
+              margin-bottom: $pivotgrid-margin-0;
+            }
+          }
+
+          &:not(.e-pivot-pager-single-maindiv) {
+            .e-pivot-pager-row-maindiv,
+            .e-pivot-pager-column-maindiv {
+              &.e-page-size-disable {
+                .e-pivotview-text-div {
+                  width: $pivotgrid-width-50p;
+                }
+              }
+            }
+          }
+        }
+
+        &.e-rtl {
+          .e-pivot-pager-maindiv {
+            .e-pivot-pager-row-maindiv,
+            .e-pivot-pager-column-maindiv {
+              .e-pivotview-text-div,
+              .e-pivotview-text-div-1 {
+                .e-pivot-row-pager-settings,
+                .e-pivot-column-pager-settings {
+                  padding: $pivotgrid-padding-0 $pivotpager-single-size-title-padding $pivotgrid-padding-0 $pivotgrid-padding-0;
+                }
+  
+                .e-pivotview-row-size,
+                .e-pivotview-column-size {
+                  padding: $pivotgrid-padding-0 $pivotgrid-padding-0 $pivotgrid-padding-0 $pivotpager-single-size-title-padding;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &.e-device {
+        .e-pivotview-hseparator {
+          border-top: $pivotpager-separator-border;
+          margin: $pivotpager-h-separator-margin;
+          width: $pivotgrid-width-auto;
+        }
+
+        .e-pivot-pager-maindiv {
+          flex-direction: column;
+
+          .e-pagercontainer {
+            display: inline-block;
+          }
+
+          .e-pivot-pager-row-maindiv,
+          .e-pivot-pager-column-maindiv {
+            width: $pivotgrid-width-100p;
+          }
+
+          &:not(.e-pivot-pager-single-maindiv) {
+            .e-pagercontainer {
+              margin-top: $pivotpager-adaptive-page-container-marging-top;
+
+              @if ($skin-name == 'fabric') or ($skin-name == 'fabric-dark') or ($skin-name == 'highcontrast-light') or ($skin-name == 'highcontrast')  {
+                margin-left: $pivotgrid-margin-0;
+              }
+            }
+          }
+        }
+
+        /* stylelint-disable */
+        @media (max-width: 400px) {
+          .e-pivotview-row-size,
+          .e-pivotview-column-size,
+          .e-pivotview-row-pagerString,
+          .e-pivotview-column-pagerString {
+            min-width: $pivotgrid-width-10 !important;
+          }
+        }
+        /* stylelint-enable */
+      }
+
+      &.e-rtl {
+        .e-pivot-pager-maindiv {
+          .e-pivot-pager-row-maindiv,
+          .e-pivot-pager-column-maindiv {
+            .e-pivot-row-pager-settings,
+            .e-pivot-column-pager-settings {
+              .e-numeric {
+                margin: $pivotpager-adaptive-numeric-box-margin;
+              }
+            }
+
+            .e-pager-dropdown {
+              float: left;
+            }
+          }
+
+          &.e-pivot-pager-single-maindiv {
+            .e-pivot-pager-row-maindiv,
+            .e-pivot-pager-column-maindiv {
+              .e-pivotview-text-div-1 {
+                .e-pivotview-row-size,
+                .e-pivotview-column-size {
+                  padding: $pivotgrid-padding-0 $pivotgrid-padding-0 $pivotgrid-padding-0 $pivotpager-single-size-title-padding;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .wide-width {
+        width: $pivotgrid-width-64;
+      }
+      .narrow-width {
+        width: $pivotgrid-width-50;
+      }
+
+      @media (max-width: 769px) {
+        .e-pivot-pager-maindiv {
+          .e-pagercontainer {
+            display: inline-block;
+          }
+        }
+      }
+    }
+
+    &.e-rtl {
+
+      .e-expand::before,
+      .e-collapse::before {
+        margin-left: $pivotgrid-margin-0;
+      }
+
+      /* stylelint-disable */
+      .e-grid .e-rowsheader,
+      .e-grid .e-columnsheader {
+        padding-right: $pivotgrid-padding-8 !important;
+      }
+
+      .e-rowcell.e-leftfreeze.e-firstcolumn {
+        right: 0px;
+      }
+
+      .e-frozenheader>.e-table,
+      .e-frozencontent>.e-table,
+      .e-leftfreeze.e-freezeleftborder {
+        border-left-width: $pivotgrid-border-1 !important;
+        border-right: $pivotgrid-border-0;
+      }
+
+      /* stylelint-enable */
+      .e-rowsheader .e-cellvalue {
+        margin-left: $pivotgrid-margin-0;
+        margin-right: $pivotgrid-margin-7;
+      }
+
+      .e-valuescontent {
+        text-align: left;
+      }
+
+      .e-group-values,
+      .e-group-columns,
+      .e-group-filters,
+      .e-group-all-fields {
+        padding-left: $pivotgrid-padding-0;
+        padding-right: $pivotview-axis-indent-padding;
+      }
+
+      .e-group-rows,
+      .e-grouping-bar {
+
+        .e-pvt-btn-div {
+          padding-left: $pivotgrid-horizontal-button-padding;
+          padding-right: $pivotgrid-padding-0;
+
+          .e-pivot-button {
+            .e-pvt-btn-content {
+              margin-left: $pivotgrid-margin-4;
+              text-align: right;
+            }
+
+            .e-sort,
+            .e-dropdown-icon,
+            .e-pv-filter,
+            .e-pv-filtered,
+            .e-remove,
+            .e-edit {
+              padding-left: $pivotgrid-padding-0;
+              padding-right: $pivotgrid-padding-4;
+            }
+          }
+        }
+      }
+
+      .e-grouping-bar {
+        .e-left-axis-fields {
+          border-left-width: $pivotgrid-border-0;
+          border-right-width: $pivotgrid-border-size;
+        }
+
+        .e-right-axis-fields {
+          border-left-width: $pivotgrid-border-size;
+        }
+      }
+
+      .e-group-row {
+        .e-group-rows {
+          padding-left: $pivotgrid-padding-0;
+          padding-right: $pivotview-axis-indent-padding;
+
+          .e-pvt-btn-div {
+            /* stylelint-disable */
+            padding-left: $pivotgrid-horizontal-button-padding;
+            padding-right: $pivotgrid-padding-0;
+
+            .e-pivot-button {
+              .e-pvt-btn-content {
+                margin-left: $pivotgrid-margin-4;
+                margin-right: $pivotgrid-margin-0;
+                text-align: right;
+              }
+
+              .e-sort,
+              .e-dropdown-icon,
+              .e-pv-filter,
+              .e-pv-filtered,
+              .e-remove,
+              .e-edit {
+                padding-left: $pivotgrid-padding-0;
+                padding-right: $pivotgrid-padding-7;
+              }
+            }
+            /* stylelint-enable */
+          }
+        }
+      }
+
+      /* stylelint-disable */
+      .e-stackedheadertext.e-cellvalue,
+      .e-stackedheadercelldiv.e-cellvalue {
+        padding-right: $pivotview-header-text-padding !important;
+      }
+
+      .e-sortfilterdiv {
+        float: left;
+      }
+
+      th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border) {
+        border-left-width: $pivotgrid-border-1;
+      }
+      /* stylelint-enable */
+    }
+
+    &.e-device {
+      /* stylelint-disable */
+      .e-grid {
+        min-width: $pivotgrid-width-300 !important;
+      }
+      
+      .e-grouping-bar {
+        min-width: $pivotgrid-width-300 !important;
+
+        .e-pivot-button {
+          line-height: $pivotgrid-line-height-1em !important;
+        }
+
+        .e-group-chart-rows,
+        .e-group-all-fields,
+        .e-group-filters,
+        .e-group-values,
+        .e-group-columns {
+          .e-pvt-btn-div {
+            max-width: $pivotgrid-width-unset;
+            width: $pivotgrid-width-100p;
+            .e-pivot-button {
+              width: $pivotgrid-width-100p !important;
+              max-width: $pivotgrid-width-130 !important;
+              min-width: $pivotgrid-width-80;
+            }
+          }
+        }
+      }
+      .e-drillthrough-dialog {
+        width: $pivotgrid-width-100p !important;
+      }
+
+      .e-group-row {
+        .e-group-rows {
+          .e-pvt-btn-div {
+            .e-indent-div {
+              width: $pivotgrid-width-0 !important;
+            }
+
+            .e-pivot-button {
+              max-width: $pivotgrid-width-130;
+            }
+          }
+        }
+      }
+
+      &.sf-pivotview {
+        .e-group-row .e-group-rows .e-pvt-btn-div .e-pivot-button {
+          max-width: $pivotgrid-width-130 !important;
+        }
+      }
+
+      .e-scrollbar .e-movablescrollbar {
+        min-height: $pivotgrid-height-1 !important;
+        visibility: hidden;
+      }
+    }
+
+    .e-component-disable {
+      display: none !important;
+    }   
+
+    .e-pivotchart.e-chart {
+      overflow: visible !important;
+    }
+    /* stylelint-enable */
+  }
+
+  .e-pivottooltipwrap,
+  .e-pivottooltip-container {
+    opacity: 1;
+  }
+
+  .e-drillthrough-dialog {
+    visibility: hidden;
+  }
+
+  .e-drillthrough-dialog,
+  .e-member-editor-dialog {
+    /* stylelint-disable */
+    &.e-visibility {
+      visibility: visible !important;
+    }
+    /* stylelint-enable */
+  }
+
+  .e-pivottooltip {
+    border-radius: $pivotgrid-default-border-radius;
+    padding: $pivotgrid-tooltip-padding;
+    text-align: initial;
+  }
+
+  .e-pivottooltip p {
+    color: $pivotgrid-tooltip-fontcolor;
+    display: inline-block;
+    font-family: $pivotgrid-tooltip-fontfamily;
+    font-size: $pivotgrid-tooltip-fontsize;
+    line-height: $pivotgrid-tooltip-line-height-20;
+    margin: $pivotgrid-margin-0;
+  }
+
+  .e-pivottooltip p.e-tooltipcontent {
+    margin-left: $pivotgrid-margin-5;
+  }
+
+  .e-pivottooltiptemplate.e-tooltip-wrap {
+    border: medium $pivotgrid-border-none transparent;
+    max-width: $pivotgrid-width-none;
+    min-width: $pivotgrid-width-0;
+    opacity: 1;
+  }
+
+  .e-pivottooltiptemplate .e-tip-content {
+    overflow-x: visible;
+    padding: $pivotgrid-padding-unset;
+    word-break: normal;
+  }
+
+  .e-rtl .e-pivottooltip p.e-tooltipcontent {
+    margin-left: $pivotgrid-margin-0;
+    margin-right: $pivotgrid-margin-5;
+  }
+
+  .e-content-placeholder.e-pivotview.e-placeholder-pivotview {
+    background-size: 100% 200px;
+  }
+}