devextreme-themebuilder 26.1.2-beta → 26.1.3

package/data/scss/widgets/generic/gridBase/_index.scss

@@ -1,902 +1,902 @@
-@use "sass:math";
-@use "sass:color";
-@use "sass:selector";
-@use "colors" as *;
-@use "../colors" as *;
-@use "sizes" as *;
-@use "../sizes" as *;
-@use "../../base/icon_fonts" as *;
-@use "../../base/checkBox/mixins" as *;
-@use "../../base/button/mixins" as *;
-@use "../dropDownEditor" as *;
-@use "../textEditor" as *;
-@use "../common/mixins" as *;
-@use "../popup/colors" as *;
-@use "../menu/colors" as *;
-@use "../toolbar/colors" as *;
-@use "../button/mixins" as *;
-@use "../button/colors" as *;
-@use "../button/sizes" as *;
-@use "../validation/colors" as *;
-@use "variables" as *;
-@forward "variables";
-@use 'layout/cell' as *;
-@use "layout/aiChat" as *;
-@use "../scrollable";
-@use "../overlay";
-@use "../pagination";
-
-$generic-grid-base-border-hidden: 1px solid transparent;
-$generic-grid-base-row-border: 1px solid transparent;
-$generic-grid-base-drag-header-border: 1px solid;
-$generic-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color;
-$generic-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color;
-$generic-grid-base-checkbox-icon-size: 16px;
-$generic-grid-base-checkbox-indeterminate-icon-size: 6px;
-$generic-grid-base-group-panel-message-line-height: $generic-button-text-line-height;
-$generic-grid-base-cell-input-height: math.round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding;
-
-@mixin dx-set-checkbox-border-color-as-background() {
-  @if $generic-color-postfix == ".contrast" {
-    .dx-selection .dx-checkbox-icon {
-      border-color: $datagrid-base-background-color;
-    }
-  }
-}
-
-@mixin grid-base($widget-name) {
-  @include generic-grid-base-cell($widget-name);
-
-  .dx-#{$widget-name},
-  .dx-#{$widget-name}-container {
-    &.dx-filter-menu {
-      .dx-menu-item-has-icon {
-        .dx-icon {
-          color: $datagrid-menu-icon-color;
-        }
-      }
-    }
-
-    &.dx-context-menu {
-      .dx-menu-items-container {
-        .dx-icon-context-menu-sort-asc {
-          @include dx-icon(sortuptext);
-          @include dx-icon-sizing(16px);
-        }
-
-        .dx-icon-context-menu-sort-desc {
-          @include dx-icon(sortdowntext);
-          @include dx-icon-sizing(16px);
-        }
-
-        .dx-icon-fix-column {
-          @include dx-icon(fixcolumn);
-          @include dx-icon-sizing(16px);
-        }
-
-        .dx-icon-fix-column-left {
-          @include dx-icon(fixcolumnleft);
-          @include dx-icon-sizing(16px);
-        }
-
-        .dx-icon-fix-column-right {
-          @include dx-icon(fixcolumnright);
-          @include dx-icon-sizing(16px);
-        }
-
-        .dx-icon-stick-column {
-          @include dx-icon(stickcolumn);
-          @include dx-icon-sizing(16px);
-        }
-
-        .dx-icon-unfix-column {
-          @include dx-icon(unfixcolumn);
-          @include dx-icon-sizing(16px);
-        }
-      }
-    }
-
-    .dx-icon-filter-operation-equals {
-      @include dx-icon(equal);
-    }
-
-    .dx-icon-filter-operation-default {
-      @include dx-icon(find);
-      @include dx-icon-sizing(12px);
-    }
-
-    .dx-icon-filter-operation-not-equals {
-      @include dx-icon(notequal);
-    }
-
-    .dx-icon-filter-operation-less {
-      @include dx-icon(less);
-    }
-
-    .dx-icon-filter-operation-less-equal {
-      @include dx-icon(lessorequal);
-    }
-
-    .dx-icon-filter-operation-greater {
-      @include dx-icon(greater);
-    }
-
-    .dx-icon-filter-operation-greater-equal {
-      @include dx-icon(greaterorequal);
-    }
-
-    .dx-icon-filter-operation-contains {
-      @include dx-icon(contains);
-    }
-
-    .dx-icon-filter-operation-not-contains {
-      @include dx-icon(doesnotcontain);
-    }
-
-    .dx-icon-filter-operation-starts-with {
-      @include dx-icon(startswith);
-    }
-
-    .dx-icon-filter-operation-ends-with {
-      @include dx-icon(endswith);
-    }
-
-    .dx-icon-filter-operation-between {
-      @include dx-icon(range);
-    }
-  }
-
-  .dx-#{$widget-name} {
-    .dx-row-alt {
-      &.dx-row:not(.dx-row-removed) {
-        border-bottom-color: transparent;
-      }
-
-      // T838734
-      border-top: 1px solid;
-      border-top-color: $datagrid-row-alternation-bg;
-      border-bottom: 1px solid;
-      border-bottom-color: $datagrid-row-alternation-bg;
-    }
-
-    .dx-link {
-      color: $datagrid-link-color;
-    }
-
-    .dx-error-row {
-      .dx-closebutton {
-        float: right;
-        margin: $generic-grid-base-cell-padding + 2px;
-
-        @include dx-icon(close);
-        @include dx-icon-sizing(14px);
-      }
-
-      .dx-error-message {
-        padding: $generic-grid-base-cell-padding;
-        padding-right: 35px;
-      }
-    }
-
-    .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row {
-      .dx-command-edit {
-        .dx-link:not(.dx-link-icon) {
-          margin: 0 $generic-command-edit-text-margin;
-          min-width: 20px;
-        }
-      }
-
-      .dx-command-edit-with-icons {
-        .dx-link {
-          @include dx-icon-sizing($generic-command-edit-icon-size);
-
-          margin: 0 $generic-command-edit-icon-margin;
-        }
-
-        .dx-link:not(.dx-link-icon) {
-          width: auto;
-        }
-      }
-    }
-
-    .dx-command-drag {
-      .dx-#{$widget-name}-drag-icon {
-        vertical-align: middle;
-
-        @include dx-icon-sizing($generic-base-icon-size);
-
-        line-height: $generic-base-inline-block-height;
-      }
-    }
-
-  }
-
-  .dx-#{$widget-name}-edit-popup .dx-error-message {
-    padding: $generic-grid-base-cell-padding;
-  }
-
-  .dx-#{$widget-name}-headers,
-  .dx-#{$widget-name}-rowsview {
-    .dx-texteditor-input {
-      padding: $generic-grid-base-cell-padding;
-      min-height: $generic-grid-base-cell-input-height;
-    }
-
-    .dx-numberbox,
-    .dx-textbox {
-      &.dx-show-clear-button.dx-texteditor-empty:not(.dx-invalid) {
-        .dx-texteditor-input {
-          padding-right: $generic-grid-base-cell-padding;
-        }
-      }
-    }
-
-    .dx-lookup {
-      height: auto;
-    }
-
-    .dx-lookup-field {
-      padding-left: $generic-grid-base-cell-padding;
-      padding-top: $generic-grid-base-cell-padding;
-      padding-bottom: $generic-grid-base-cell-padding;
-    }
-
-    .dx-searchbox {
-      .dx-texteditor-input,
-      .dx-placeholder::before {
-        padding-left: $generic-texteditor-icon-container-size;
-
-        @at-root #{selector.append(".dx-rtl", &)},
-        .dx-rtl & {
-          padding-right: $generic-texteditor-icon-container-size;
-        }
-      }
-    }
-  }
-
-  .dx-editor-cell {
-    .dx-numberbox-spin-button {
-      background-color: transparent;
-    }
-
-    .dx-icon-clear {
-      left: 0;
-    }
-
-    .dx-texteditor {
-      background: $datagrid-editor-bg;
-
-      .dx-texteditor-input {
-        background: $datagrid-editor-bg;
-      }
-    }
-
-    .dx-dropdowneditor {
-      background-color: $datagrid-editor-bg;
-    }
-
-    &.dx-focused .dx-dropdowneditor-icon {
-      border-radius: 0;
-    }
-  }
-
-  .dx-#{$widget-name}-checkbox-size {
-    padding-bottom: $generic-grid-base-checkbox-padding-bottom;
-
-    .dx-checkbox-icon {
-      font-size: $generic-grid-base-checkbox-icon-size;
-    }
-
-    &.dx-checkbox-checked {
-      .dx-checkbox-icon {
-        &::before {
-          font-size: $generic-grid-base-checkbox-fontsize;
-        }
-      }
-
-    }
-
-    &.dx-checkbox-indeterminate {
-      .dx-checkbox-icon {
-        @include dx-checkbox-icon-centered($generic-grid-base-checkbox-indeterminate-icon-size, $generic-grid-base-checkbox-indeterminate-icon-size);
-
-        &::before {
-          border-radius: 0;
-        }
-      }
-    }
-  }
-
-  .dx-#{$widget-name}-column-chooser-list {
-    .dx-empty-message {
-      color: $datagrid-columnchooser-message-color;
-      padding: 0 $generic-grid-base-column-chooser-padding;
-    }
-  }
-
-  .dx-#{$widget-name}-column-chooser {
-    @include dx-base-typography();
-
-    &.dx-#{$widget-name}-column-chooser-mode-drag {
-      .dx-popup-content {
-        padding: $generic-grid-base-column-chooser-paddings;
-
-        .dx-treeview-search {
-          margin-bottom: $generic-grid-base-treeview-search-margin;
-        }
-
-        .dx-treeview-node {
-          padding-left: 20px;
-        }
-      }
-    }
-
-    &.dx-#{$widget-name}-column-chooser-mode-select {
-      .dx-popup-content {
-        padding: $generic-grid-base-column-chooser-paddings;
-      }
-
-      .dx-#{$widget-name}-column-chooser-plain, .dx-#{$widget-name}-column-chooser-list {
-        .dx-treeview-select-all-item {
-          padding-inline-start: $generic-grid-base-treeview-select-all-item-offset;
-        }
-      }
-    }
-
-    .dx-overlay-content {
-      background-color: $datagrid-columnchooser-bg;
-      box-shadow: 0 1px 3px $datagrid-columnchooser-shadow-color;
-
-      .dx-popup-title {
-        padding-top: 7px;
-        padding-bottom: 9px;
-        background-color: transparent;
-      }
-
-      .dx-popup-content {
-        .dx-column-chooser-item {
-          margin-bottom: $generic-grid-base-column-chooser-item-margin;
-          background-color: $datagrid-columnchooser-item-bg;
-          color: $datagrid-columnchooser-item-color;
-          font-weight: $datagrid-columnchooser-font-weight;
-          border: $datagrid-border;
-          border-color: $datagrid-border-color;
-          padding: $generic-grid-base-cell-padding;
-          box-shadow: 0 1px 3px -1px $datagrid-columnchooser-shadow-color;
-        }
-      }
-    }
-  }
-
-  .dx-#{$widget-name}-drag-header {
-    box-shadow: $generic-grid-base-drag-header-first-shadow, $generic-grid-base-drag-header-second-shadow;
-    color: $datagrid-columnchooser-item-color;
-    font-weight: $datagrid-columnchooser-font-weight;
-    padding: $generic-grid-base-cell-padding;
-    border: $generic-grid-base-drag-header-border;
-    border-color: $datagrid-drag-header-border-color;
-    background-color: $datagrid-header-drag-bg;
-  }
-
-  .dx-#{$widget-name}-columns-separator {
-    background-color: $datagrid-column-separator-bg;
-  }
-
-  .dx-#{$widget-name}-columns-separator-transparent {
-    background-color: transparent;
-  }
-
-  .dx-#{$widget-name}-focus-overlay {
-    border: 2px solid;
-    border-color: $datagrid-focused-border-color;
-  }
-
-  .dx-#{$widget-name}-table {
-    .dx-row {
-      .dx-command-edit {
-        .dx-state-disabled {
-          &.dx-link {
-            opacity: $datagrid-text-link-disabled-opacity;
-          }
-
-          &.dx-link-icon {
-            opacity: $datagrid-icon-link-disabled-opacity;
-          }
-        }
-      }
-    }
-
-    .dx-data-row.dx-state-hover {
-      &:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) {
-        & > .dx-#{$widget-name}-readonly .dx-texteditor {
-          .dx-texteditor-input {
-            background-color: $datagrid-hover-bg;
-            color: $datagrid-row-hovered-color;
-          }
-        }
-      }
-    }
-  }
-
-  .dx-#{$widget-name}-headers {
-    color: $datagrid-columnchooser-item-color;
-    font-weight: $datagrid-columnchooser-font-weight;
-    touch-action: pinch-zoom;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      pointer-events: none;
-      border-bottom: $datagrid-border;
-      border-bottom-color: $datagrid-border-color;
-    }
-
-    .dx-#{$widget-name}-table {
-      .dx-#{$widget-name}-borders & {
-        border-bottom-width: 1px;
-      }
-    }
-  }
-
-  .dx-#{$widget-name}-filter-row {
-    .dx-menu {
-      .dx-overlay-content {
-        color: $menu-color;
-      }
-    }
-
-    .dx-menu-item {
-      &.dx-state-focused {
-        background-color: transparent;
-        color: $datagrid-menu-icon-color;
-
-        &::after {
-          border: 2px solid;
-          border-color: $datagrid-focused-border-color;
-        }
-
-        &.dx-menu-item-expanded {
-          background-color: $datagrid-base-background-color;
-
-          &::after {
-            border-color: transparent;
-          }
-        }
-      }
-    }
-
-    .dx-menu-item-has-submenu {
-      &.dx-state-hover {
-        background-color: transparent;
-      }
-
-      &.dx-menu-item-expanded.dx-state-hover {
-        background-color: $datagrid-editor-bg;
-      }
-    }
-
-    .dx-highlight-outline,
-    .dx-cell-modified,
-    .dx-#{$widget-name}-invalid {
-      &::after {
-        border-color: $datagrid-cell-modified-border-color;
-      }
-    }
-
-    .dx-menu-item-content {
-      .dx-icon {
-        color: $datagrid-menu-icon-color;
-      }
-    }
-
-    td .dx-editor-container .dx-filter-range-content {
-      padding: $generic-grid-base-cell-padding $generic-grid-base-cell-padding $generic-grid-base-cell-padding $generic-grid-base-texteditor-input-padding;
-    }
-  }
-
-  .dx-#{$widget-name}-filter-range-overlay {
-    .dx-overlay-content {
-      border: $datagrid-border;
-      border-color: $datagrid-border-color;
-      overflow: inherit;
-      box-shadow: 2px 2px 3px $datagrid-overlay-content-shadow-color;
-
-      .dx-editor-container {
-        &.dx-cell-modified,
-        &.dx-#{$widget-name}-invalid {
-          &::after {
-            border-color: $datagrid-cell-modified-border-color;
-            left: 0;
-          }
-        }
-      }
-
-      .dx-texteditor {
-        .dx-texteditor-input {
-          background-color: $datagrid-base-background-color;
-          padding: $generic-grid-base-cell-padding;
-        }
-
-        &.dx-state-focused::after {
-          border: 2px solid;
-          border-color: $datagrid-focused-border-color;
-        }
-      }
-    }
-  }
-
-  .dx-filter-menu {
-    &.dx-menu {
-      background-color: transparent;
-      height: 100%;
-
-      .dx-menu-item {
-        .dx-menu-item-content {
-          padding: $generic-grid-base-menu-item-padding;
-
-          .dx-icon {
-            margin: 0 3px;
-          }
-        }
-      }
-    }
-
-    .dx-menu-item-content {
-      .dx-icon.dx-icon-filter-operation-default {
-        margin-top: 2px;
-      }
-    }
-  }
-
-  .dx-editor-with-menu .dx-filter-menu {
-    .dx-menu-item-content {
-      .dx-icon.dx-icon-filter-operation-default {
-        margin-top: 2px;
-      }
-    }
-  }
-
-  .dx-#{$widget-name}-header-panel {
-    border-bottom: $datagrid-border;
-    border-bottom-color: $datagrid-border-color;
-
-    .dx-toolbar {
-      margin-bottom: $generic-grid-base-header-panel-margin-bottom;
-    }
-  }
-
-  .dx-icon-column-chooser {
-    @include dx-icon(columnchooser);
-    @include dx-icon-sizing($generic-base-icon-size);
-  }
-
-  .dx-#{$widget-name}-addrow-button {
-    .dx-icon-edit-button-addrow {
-      @include dx-icon(add);
-      @include dx-icon-sizing($generic-base-icon-size);
-    }
-  }
-
-  .dx-#{$widget-name}-cancel-button {
-    .dx-icon-edit-button-cancel {
-      @include dx-icon(revert);
-      @include dx-icon-sizing($generic-base-icon-size);
-    }
-  }
-
-  .dx-#{$widget-name}-save-button {
-    .dx-icon-edit-button-save {
-      @include dx-icon(save);
-      @include dx-icon-sizing($generic-base-icon-size);
-    }
-  }
-
-  .dx-apply-button {
-    .dx-icon-apply-filter {
-      @include dx-icon(filter);
-      @include dx-icon-sizing($generic-base-icon-size);
-    }
-  }
-
-  .dx-#{$widget-name}-adaptive-more {
-    @include dx-icon-sizing($generic-base-more-adaptive-icon-size);
-  }
-
-  .dx-#{$widget-name}-rowsview {
-    .dx-#{$widget-name}-borders &,
-    .dx-#{$widget-name}-headers + &,
-    &.dx-#{$widget-name}-after-headers {
-      border-top: $datagrid-border;
-      border-top-color: $datagrid-border-color;
-    }
-
-    .dx-row {
-      border-top: $generic-grid-base-row-border;
-      border-bottom: $generic-grid-base-row-border;
-
-      &:focus {
-        outline: none;
-      }
-
-      &.dx-#{$widget-name}-edit-form {
-        white-space: normal;
-      }
-    }
-
-    .dx-master-detail-row {
-      .dx-texteditor-input {
-        padding-right: 0;
-      }
-    }
-
-    .dx-overlay-wrapper.dx-invalid-message {
-      .dx-overlay-content {
-        padding: 9px 17px 9px;
-      }
-    }
-
-    @include dx-set-checkbox-border-color-as-background();
-
-    .dx-adaptive-detail-row {
-      .dx-adaptive-item-text {
-        padding-top: $generic-grid-base-adaptive-text-padding;
-        padding-bottom: $generic-grid-base-adaptive-text-padding;
-        padding-left: $generic-grid-base-adaptive-text-padding;
-      }
-
-      .dx-#{$widget-name}-invalid {
-        border: 1px solid;
-        border-color: $datagrid-row-invalid-faded-border-color;
-
-        &.dx-adaptive-item-text {
-          padding-top: $generic-grid-base-adaptive-text-padding - 1px;
-          padding-bottom: $generic-grid-base-adaptive-text-padding - 1px;
-          padding-left: $generic-grid-base-adaptive-text-padding - 1px;
-        }
-      }
-    }
-
-    .dx-item-modified {
-      border-radius: $base-border-radius;
-      border: 2px solid;
-      border-color: $datagrid-cell-modified-border-color;
-
-      &.dx-adaptive-item-text {
-        padding-top: $generic-grid-base-adaptive-text-padding - 2px;
-        padding-bottom: $generic-grid-base-adaptive-text-padding - 2px;
-        padding-left: $generic-grid-base-adaptive-text-padding - 2px;
-      }
-    }
-
-    .dx-row-focused {
-      &.dx-data-row {
-        & > td:not(.dx-focused),
-        & > tr > td:not(.dx-focused),
-        & .dx-command-edit:not(.dx-focused) .dx-link {
-          .dx-texteditor-input {
-            border-radius: 0;
-          }
-
-          & .dx-#{$widget-name}-group-opened,
-          & .dx-#{$widget-name}-group-closed {
-            color: $datagrid-row-focused-color;
-          }
-        }
-
-        & .dx-command-edit:not(.dx-focused) .dx-link {
-          color: $datagrid-row-focused-color;
-        }
-
-        & .dx-command-edit .dx-link:focus {
-          background-color: $datagrid-base-background-color;
-          color: $datagrid-base-color;
-        }
-      }
-
-      &.dx-group-row {
-        background-color: $datagrid-row-focused-bg;
-        color: $datagrid-row-focused-color;
-
-        & .dx-#{$widget-name}-group-opened,
-        & .dx-#{$widget-name}-group-closed {
-          color: $datagrid-row-focused-color;
-        }
-
-        & .dx-datagrid-summary-item {
-          color: $datagrid-row-focused-color;
-        }
-      }
-    }
-
-    &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content {
-      padding-right: 0;
-    }
-
-    td {
-      &.dx-validation-pending {
-        .dx-pending-indicator {
-          @include dx-pending-indicator-generic();
-          @include texteditor-validation-icon-offset();
-
-          background-color: $datagrid-base-background-color;
-        }
-      }
-
-      &.dx-editor-cell {
-        .dx-texteditor {
-          &.dx-validation-pending {
-            .dx-texteditor-input {
-              padding-right: $generic-texteditor-invalid-badge-size;
-            }
-
-            &.dx-rtl {
-              .dx-texteditor-input {
-                padding-right: $generic-grid-base-cell-padding;
-                padding-bottom: $generic-grid-base-cell-padding;
-                padding-left: $generic-texteditor-invalid-badge-size;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .dx-#{$widget-name}-search-text {
-    color: $datagrid-search-color;
-    background-color: $datagrid-search-bg;
-  }
-
-  .dx-#{$widget-name}-nodata {
-    color: $datagrid-nodata-color;
-    font-size: $generic-grid-base-nodata-font-size;
-    opacity: 0.7;
-  }
-
-  .dx-#{$widget-name}-bottom-load-panel {
-    border-top: $datagrid-border;
-    border-top-color: $datagrid-border-color;
-    background-color: $datagrid-base-background-color;
-  }
-
-  .dx-#{$widget-name}-summary-item {
-    color: $datagrid-summary-color;
-  }
-
-  .dx-#{$widget-name}-total-footer {
-    border-top: $datagrid-border;
-    border-top-color: $datagrid-border-color;
-  }
-
-  .dx-#{$widget-name}-revert-tooltip {
-    .dx-overlay-content {
-      background-color: $datagrid-base-background-color;
-      min-width: inherit;
-    }
-
-    .dx-revert-button {
-      margin: 0 1px;
-      margin-left: 1px;
-
-      @include dx-button-styling-variant(
-        $button-danger-bg, $button-danger-border-color, $button-danger-color,
-        color.adjust($button-danger-bg, $lightness: -10%, $space: hsl),
-        color.adjust($button-danger-bg, $lightness: -15%, $space: hsl),
-        color.adjust($button-danger-bg, $lightness: -20%, $space: hsl),
-        $button-danger-color,
-        $button-danger-color
-      );
-
-      > .dx-button-content {
-        padding: $generic-grid-base-cell-padding;
-      }
-    }
-  }
-
-  .dx-toolbar-menu-section {
-    .dx-#{$widget-name}-checkbox-size {
-      width: 100%;
-
-      .dx-checkbox-container {
-        padding: 14px;
-      }
-
-      .dx-checkbox-text {
-        padding-left: 34px;
-      }
-    }
-  }
-
-  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns {
-    .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input {
-      padding-bottom: $generic-grid-base-cell-padding - 1px;
-      min-height: $generic-grid-base-cell-input-height - 2px;
-    }
-
-    .dx-master-detail-row > .dx-master-detail-cell {
-      > .dx-#{$widget-name}-master-detail-container {
-        padding: $grid-masterdetail-padding;
-      }
-    }
-  }
-
-  .dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-draggable-column {
-    opacity: 1;
-    color: $datagrid-draggable-column-text-color;
-  }
-
-  .dx-rtl {
-    .dx-toolbar-menu-section {
-      .dx-checkbox-text {
-        padding-right: 34px;
-        padding-left: 27px;
-      }
-    }
-
-    .dx-#{$widget-name}-filter-row {
-      .dx-menu {
-        .dx-menu-item-has-submenu.dx-menu-item-has-icon {
-          .dx-icon {
-            margin: 0 3px;
-          }
-        }
-      }
-
-      td .dx-editor-container .dx-filter-range-content {
-        padding: $generic-grid-base-cell-padding $generic-grid-base-texteditor-input-padding $generic-grid-base-cell-padding $generic-grid-base-cell-padding;
-      }
-    }
-
-    .dx-#{$widget-name}-rowsview {
-      &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content {
-        padding-left: 0;
-      }
-    }
-  }
-
-  .dx-command-ai-header-content {
-    max-width: calc(100% - ($generic-grid-base-command-ai-header-button-size - $generic-grid-base-cell-padding));
-
-    .dx-#{$widget-name}-text-content {
-      padding-left: $generic-grid-base-command-ai-text-content-padding;
-    }
-
-    .dx-icon-chatsparkleoutline {
-      @include dx-icon-sizing($generic-grid-base-command-ai-chatsparkleoutline-icon-size);
-    }
-  }
-
-  .dx-command-ai-header-button {
-    left: auto;
-    right: 0;
-  }
-
-  td[style*="text-align: right"] .dx-command-ai-header-button {
-    left: 0;
-    right: auto;
-  }
-
-  .dx-command-ai .dx-command-ai-header-button .dx-button {
-    @include dx-button-sizing(
-      $generic-grid-base-command-ai-header-button-padding,
-      $generic-grid-base-command-ai-header-button-padding,
-      $generic-grid-base-command-ai-header-button-padding,
-      $generic-base-icon-size,
-      0
-    );
-
-    &.dx-state-focused {
-      outline-offset: -2px;
-    }
-  }
-
-  .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container {
-    height: $generic-grid-base-ai-prompt-editor-progressbar-height;
-    border: none;
-    border-radius: 0;
-  }
-}
+@use "sass:math";
+@use "sass:color";
+@use "sass:selector";
+@use "colors" as *;
+@use "../colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/checkBox/mixins" as *;
+@use "../../base/button/mixins" as *;
+@use "../dropDownEditor" as *;
+@use "../textEditor" as *;
+@use "../common/mixins" as *;
+@use "../popup/colors" as *;
+@use "../menu/colors" as *;
+@use "../toolbar/colors" as *;
+@use "../button/mixins" as *;
+@use "../button/colors" as *;
+@use "../button/sizes" as *;
+@use "../validation/colors" as *;
+@use "variables" as *;
+@forward "variables";
+@use 'layout/cell' as *;
+@use "layout/aiChat" as *;
+@use "../scrollable";
+@use "../overlay";
+@use "../pagination";
+
+$generic-grid-base-border-hidden: 1px solid transparent;
+$generic-grid-base-row-border: 1px solid transparent;
+$generic-grid-base-drag-header-border: 1px solid;
+$generic-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color;
+$generic-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color;
+$generic-grid-base-checkbox-icon-size: 16px;
+$generic-grid-base-checkbox-indeterminate-icon-size: 6px;
+$generic-grid-base-group-panel-message-line-height: $generic-button-text-line-height;
+$generic-grid-base-cell-input-height: math.round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding;
+
+@mixin dx-set-checkbox-border-color-as-background() {
+  @if $generic-color-postfix == ".contrast" {
+    .dx-selection .dx-checkbox-icon {
+      border-color: $datagrid-base-background-color;
+    }
+  }
+}
+
+@mixin grid-base($widget-name) {
+  @include generic-grid-base-cell($widget-name);
+
+  .dx-#{$widget-name},
+  .dx-#{$widget-name}-container {
+    &.dx-filter-menu {
+      .dx-menu-item-has-icon {
+        .dx-icon {
+          color: $datagrid-menu-icon-color;
+        }
+      }
+    }
+
+    &.dx-context-menu {
+      .dx-menu-items-container {
+        .dx-icon-context-menu-sort-asc {
+          @include dx-icon(sortuptext);
+          @include dx-icon-sizing(16px);
+        }
+
+        .dx-icon-context-menu-sort-desc {
+          @include dx-icon(sortdowntext);
+          @include dx-icon-sizing(16px);
+        }
+
+        .dx-icon-fix-column {
+          @include dx-icon(fixcolumn);
+          @include dx-icon-sizing(16px);
+        }
+
+        .dx-icon-fix-column-left {
+          @include dx-icon(fixcolumnleft);
+          @include dx-icon-sizing(16px);
+        }
+
+        .dx-icon-fix-column-right {
+          @include dx-icon(fixcolumnright);
+          @include dx-icon-sizing(16px);
+        }
+
+        .dx-icon-stick-column {
+          @include dx-icon(stickcolumn);
+          @include dx-icon-sizing(16px);
+        }
+
+        .dx-icon-unfix-column {
+          @include dx-icon(unfixcolumn);
+          @include dx-icon-sizing(16px);
+        }
+      }
+    }
+
+    .dx-icon-filter-operation-equals {
+      @include dx-icon(equal);
+    }
+
+    .dx-icon-filter-operation-default {
+      @include dx-icon(find);
+      @include dx-icon-sizing(12px);
+    }
+
+    .dx-icon-filter-operation-not-equals {
+      @include dx-icon(notequal);
+    }
+
+    .dx-icon-filter-operation-less {
+      @include dx-icon(less);
+    }
+
+    .dx-icon-filter-operation-less-equal {
+      @include dx-icon(lessorequal);
+    }
+
+    .dx-icon-filter-operation-greater {
+      @include dx-icon(greater);
+    }
+
+    .dx-icon-filter-operation-greater-equal {
+      @include dx-icon(greaterorequal);
+    }
+
+    .dx-icon-filter-operation-contains {
+      @include dx-icon(contains);
+    }
+
+    .dx-icon-filter-operation-not-contains {
+      @include dx-icon(doesnotcontain);
+    }
+
+    .dx-icon-filter-operation-starts-with {
+      @include dx-icon(startswith);
+    }
+
+    .dx-icon-filter-operation-ends-with {
+      @include dx-icon(endswith);
+    }
+
+    .dx-icon-filter-operation-between {
+      @include dx-icon(range);
+    }
+  }
+
+  .dx-#{$widget-name} {
+    .dx-row-alt {
+      &.dx-row:not(.dx-row-removed) {
+        border-bottom-color: transparent;
+      }
+
+      // T838734
+      border-top: 1px solid;
+      border-top-color: $datagrid-row-alternation-bg;
+      border-bottom: 1px solid;
+      border-bottom-color: $datagrid-row-alternation-bg;
+    }
+
+    .dx-link {
+      color: $datagrid-link-color;
+    }
+
+    .dx-error-row {
+      .dx-closebutton {
+        float: right;
+        margin: $generic-grid-base-cell-padding + 2px;
+
+        @include dx-icon(close);
+        @include dx-icon-sizing(14px);
+      }
+
+      .dx-error-message {
+        padding: $generic-grid-base-cell-padding;
+        padding-right: 35px;
+      }
+    }
+
+    .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row {
+      .dx-command-edit {
+        .dx-link:not(.dx-link-icon) {
+          margin: 0 $generic-command-edit-text-margin;
+          min-width: 20px;
+        }
+      }
+
+      .dx-command-edit-with-icons {
+        .dx-link {
+          @include dx-icon-sizing($generic-command-edit-icon-size);
+
+          margin: 0 $generic-command-edit-icon-margin;
+        }
+
+        .dx-link:not(.dx-link-icon) {
+          width: auto;
+        }
+      }
+    }
+
+    .dx-command-drag {
+      .dx-#{$widget-name}-drag-icon {
+        vertical-align: middle;
+
+        @include dx-icon-sizing($generic-base-icon-size);
+
+        line-height: $generic-base-inline-block-height;
+      }
+    }
+
+  }
+
+  .dx-#{$widget-name}-edit-popup .dx-error-message {
+    padding: $generic-grid-base-cell-padding;
+  }
+
+  .dx-#{$widget-name}-headers,
+  .dx-#{$widget-name}-rowsview {
+    .dx-texteditor-input {
+      padding: $generic-grid-base-cell-padding;
+      min-height: $generic-grid-base-cell-input-height;
+    }
+
+    .dx-numberbox,
+    .dx-textbox {
+      &.dx-show-clear-button.dx-texteditor-empty:not(.dx-invalid) {
+        .dx-texteditor-input {
+          padding-right: $generic-grid-base-cell-padding;
+        }
+      }
+    }
+
+    .dx-lookup {
+      height: auto;
+    }
+
+    .dx-lookup-field {
+      padding-left: $generic-grid-base-cell-padding;
+      padding-top: $generic-grid-base-cell-padding;
+      padding-bottom: $generic-grid-base-cell-padding;
+    }
+
+    .dx-searchbox {
+      .dx-texteditor-input,
+      .dx-placeholder::before {
+        padding-left: $generic-texteditor-icon-container-size;
+
+        @at-root #{selector.append(".dx-rtl", &)},
+        .dx-rtl & {
+          padding-right: $generic-texteditor-icon-container-size;
+        }
+      }
+    }
+  }
+
+  .dx-editor-cell {
+    .dx-numberbox-spin-button {
+      background-color: transparent;
+    }
+
+    .dx-icon-clear {
+      left: 0;
+    }
+
+    .dx-texteditor {
+      background: $datagrid-editor-bg;
+
+      .dx-texteditor-input {
+        background: $datagrid-editor-bg;
+      }
+    }
+
+    .dx-dropdowneditor {
+      background-color: $datagrid-editor-bg;
+    }
+
+    &.dx-focused .dx-dropdowneditor-icon {
+      border-radius: 0;
+    }
+  }
+
+  .dx-#{$widget-name}-checkbox-size {
+    padding-bottom: $generic-grid-base-checkbox-padding-bottom;
+
+    .dx-checkbox-icon {
+      font-size: $generic-grid-base-checkbox-icon-size;
+    }
+
+    &.dx-checkbox-checked {
+      .dx-checkbox-icon {
+        &::before {
+          font-size: $generic-grid-base-checkbox-fontsize;
+        }
+      }
+
+    }
+
+    &.dx-checkbox-indeterminate {
+      .dx-checkbox-icon {
+        @include dx-checkbox-icon-centered($generic-grid-base-checkbox-indeterminate-icon-size, $generic-grid-base-checkbox-indeterminate-icon-size);
+
+        &::before {
+          border-radius: 0;
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-column-chooser-list {
+    .dx-empty-message {
+      color: $datagrid-columnchooser-message-color;
+      padding: 0 $generic-grid-base-column-chooser-padding;
+    }
+  }
+
+  .dx-#{$widget-name}-column-chooser {
+    @include dx-base-typography();
+
+    &.dx-#{$widget-name}-column-chooser-mode-drag {
+      .dx-popup-content {
+        padding: $generic-grid-base-column-chooser-paddings;
+
+        .dx-treeview-search {
+          margin-bottom: $generic-grid-base-treeview-search-margin;
+        }
+
+        .dx-treeview-node {
+          padding-left: 20px;
+        }
+      }
+    }
+
+    &.dx-#{$widget-name}-column-chooser-mode-select {
+      .dx-popup-content {
+        padding: $generic-grid-base-column-chooser-paddings;
+      }
+
+      .dx-#{$widget-name}-column-chooser-plain, .dx-#{$widget-name}-column-chooser-list {
+        .dx-treeview-select-all-item {
+          padding-inline-start: $generic-grid-base-treeview-select-all-item-offset;
+        }
+      }
+    }
+
+    .dx-overlay-content {
+      background-color: $datagrid-columnchooser-bg;
+      box-shadow: 0 1px 3px $datagrid-columnchooser-shadow-color;
+
+      .dx-popup-title {
+        padding-top: 7px;
+        padding-bottom: 9px;
+        background-color: transparent;
+      }
+
+      .dx-popup-content {
+        .dx-column-chooser-item {
+          margin-bottom: $generic-grid-base-column-chooser-item-margin;
+          background-color: $datagrid-columnchooser-item-bg;
+          color: $datagrid-columnchooser-item-color;
+          font-weight: $datagrid-columnchooser-font-weight;
+          border: $datagrid-border;
+          border-color: $datagrid-border-color;
+          padding: $generic-grid-base-cell-padding;
+          box-shadow: 0 1px 3px -1px $datagrid-columnchooser-shadow-color;
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-drag-header {
+    box-shadow: $generic-grid-base-drag-header-first-shadow, $generic-grid-base-drag-header-second-shadow;
+    color: $datagrid-columnchooser-item-color;
+    font-weight: $datagrid-columnchooser-font-weight;
+    padding: $generic-grid-base-cell-padding;
+    border: $generic-grid-base-drag-header-border;
+    border-color: $datagrid-drag-header-border-color;
+    background-color: $datagrid-header-drag-bg;
+  }
+
+  .dx-#{$widget-name}-columns-separator {
+    background-color: $datagrid-column-separator-bg;
+  }
+
+  .dx-#{$widget-name}-columns-separator-transparent {
+    background-color: transparent;
+  }
+
+  .dx-#{$widget-name}-focus-overlay {
+    border: 2px solid;
+    border-color: $datagrid-focused-border-color;
+  }
+
+  .dx-#{$widget-name}-table {
+    .dx-row {
+      .dx-command-edit {
+        .dx-state-disabled {
+          &.dx-link {
+            opacity: $datagrid-text-link-disabled-opacity;
+          }
+
+          &.dx-link-icon {
+            opacity: $datagrid-icon-link-disabled-opacity;
+          }
+        }
+      }
+    }
+
+    .dx-data-row.dx-state-hover {
+      &:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) {
+        & > .dx-#{$widget-name}-readonly .dx-texteditor {
+          .dx-texteditor-input {
+            background-color: $datagrid-hover-bg;
+            color: $datagrid-row-hovered-color;
+          }
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-headers {
+    color: $datagrid-columnchooser-item-color;
+    font-weight: $datagrid-columnchooser-font-weight;
+    touch-action: pinch-zoom;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      pointer-events: none;
+      border-bottom: $datagrid-border;
+      border-bottom-color: $datagrid-border-color;
+    }
+
+    .dx-#{$widget-name}-table {
+      .dx-#{$widget-name}-borders & {
+        border-bottom-width: 1px;
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-filter-row {
+    .dx-menu {
+      .dx-overlay-content {
+        color: $menu-color;
+      }
+    }
+
+    .dx-menu-item {
+      &.dx-state-focused {
+        background-color: transparent;
+        color: $datagrid-menu-icon-color;
+
+        &::after {
+          border: 2px solid;
+          border-color: $datagrid-focused-border-color;
+        }
+
+        &.dx-menu-item-expanded {
+          background-color: $datagrid-base-background-color;
+
+          &::after {
+            border-color: transparent;
+          }
+        }
+      }
+    }
+
+    .dx-menu-item-has-submenu {
+      &.dx-state-hover {
+        background-color: transparent;
+      }
+
+      &.dx-menu-item-expanded.dx-state-hover {
+        background-color: $datagrid-editor-bg;
+      }
+    }
+
+    .dx-highlight-outline,
+    .dx-cell-modified,
+    .dx-#{$widget-name}-invalid {
+      &::after {
+        border-color: $datagrid-cell-modified-border-color;
+      }
+    }
+
+    .dx-menu-item-content {
+      .dx-icon {
+        color: $datagrid-menu-icon-color;
+      }
+    }
+
+    td .dx-editor-container .dx-filter-range-content {
+      padding: $generic-grid-base-cell-padding $generic-grid-base-cell-padding $generic-grid-base-cell-padding $generic-grid-base-texteditor-input-padding;
+    }
+  }
+
+  .dx-#{$widget-name}-filter-range-overlay {
+    .dx-overlay-content {
+      border: $datagrid-border;
+      border-color: $datagrid-border-color;
+      overflow: inherit;
+      box-shadow: 2px 2px 3px $datagrid-overlay-content-shadow-color;
+
+      .dx-editor-container {
+        &.dx-cell-modified,
+        &.dx-#{$widget-name}-invalid {
+          &::after {
+            border-color: $datagrid-cell-modified-border-color;
+            left: 0;
+          }
+        }
+      }
+
+      .dx-texteditor {
+        .dx-texteditor-input {
+          background-color: $datagrid-base-background-color;
+          padding: $generic-grid-base-cell-padding;
+        }
+
+        &.dx-state-focused::after {
+          border: 2px solid;
+          border-color: $datagrid-focused-border-color;
+        }
+      }
+    }
+  }
+
+  .dx-filter-menu {
+    &.dx-menu {
+      background-color: transparent;
+      height: 100%;
+
+      .dx-menu-item {
+        .dx-menu-item-content {
+          padding: $generic-grid-base-menu-item-padding;
+
+          .dx-icon {
+            margin: 0 3px;
+          }
+        }
+      }
+    }
+
+    .dx-menu-item-content {
+      .dx-icon.dx-icon-filter-operation-default {
+        margin-top: 2px;
+      }
+    }
+  }
+
+  .dx-editor-with-menu .dx-filter-menu {
+    .dx-menu-item-content {
+      .dx-icon.dx-icon-filter-operation-default {
+        margin-top: 2px;
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-header-panel {
+    border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
+
+    .dx-toolbar {
+      margin-bottom: $generic-grid-base-header-panel-margin-bottom;
+    }
+  }
+
+  .dx-icon-column-chooser {
+    @include dx-icon(columnchooser);
+    @include dx-icon-sizing($generic-base-icon-size);
+  }
+
+  .dx-#{$widget-name}-addrow-button {
+    .dx-icon-edit-button-addrow {
+      @include dx-icon(add);
+      @include dx-icon-sizing($generic-base-icon-size);
+    }
+  }
+
+  .dx-#{$widget-name}-cancel-button {
+    .dx-icon-edit-button-cancel {
+      @include dx-icon(revert);
+      @include dx-icon-sizing($generic-base-icon-size);
+    }
+  }
+
+  .dx-#{$widget-name}-save-button {
+    .dx-icon-edit-button-save {
+      @include dx-icon(save);
+      @include dx-icon-sizing($generic-base-icon-size);
+    }
+  }
+
+  .dx-apply-button {
+    .dx-icon-apply-filter {
+      @include dx-icon(filter);
+      @include dx-icon-sizing($generic-base-icon-size);
+    }
+  }
+
+  .dx-#{$widget-name}-adaptive-more {
+    @include dx-icon-sizing($generic-base-more-adaptive-icon-size);
+  }
+
+  .dx-#{$widget-name}-rowsview {
+    .dx-#{$widget-name}-borders &,
+    .dx-#{$widget-name}-headers + &,
+    &.dx-#{$widget-name}-after-headers {
+      border-top: $datagrid-border;
+      border-top-color: $datagrid-border-color;
+    }
+
+    .dx-row {
+      border-top: $generic-grid-base-row-border;
+      border-bottom: $generic-grid-base-row-border;
+
+      &:focus {
+        outline: none;
+      }
+
+      &.dx-#{$widget-name}-edit-form {
+        white-space: normal;
+      }
+    }
+
+    .dx-master-detail-row {
+      .dx-texteditor-input {
+        padding-right: 0;
+      }
+    }
+
+    .dx-overlay-wrapper.dx-invalid-message {
+      .dx-overlay-content {
+        padding: 9px 17px 9px;
+      }
+    }
+
+    @include dx-set-checkbox-border-color-as-background();
+
+    .dx-adaptive-detail-row {
+      .dx-adaptive-item-text {
+        padding-top: $generic-grid-base-adaptive-text-padding;
+        padding-bottom: $generic-grid-base-adaptive-text-padding;
+        padding-left: $generic-grid-base-adaptive-text-padding;
+      }
+
+      .dx-#{$widget-name}-invalid {
+        border: 1px solid;
+        border-color: $datagrid-row-invalid-faded-border-color;
+
+        &.dx-adaptive-item-text {
+          padding-top: $generic-grid-base-adaptive-text-padding - 1px;
+          padding-bottom: $generic-grid-base-adaptive-text-padding - 1px;
+          padding-left: $generic-grid-base-adaptive-text-padding - 1px;
+        }
+      }
+    }
+
+    .dx-item-modified {
+      border-radius: $base-border-radius;
+      border: 2px solid;
+      border-color: $datagrid-cell-modified-border-color;
+
+      &.dx-adaptive-item-text {
+        padding-top: $generic-grid-base-adaptive-text-padding - 2px;
+        padding-bottom: $generic-grid-base-adaptive-text-padding - 2px;
+        padding-left: $generic-grid-base-adaptive-text-padding - 2px;
+      }
+    }
+
+    .dx-row-focused {
+      &.dx-data-row {
+        & > td:not(.dx-focused),
+        & > tr > td:not(.dx-focused),
+        & .dx-command-edit:not(.dx-focused) .dx-link {
+          .dx-texteditor-input {
+            border-radius: 0;
+          }
+
+          & .dx-#{$widget-name}-group-opened,
+          & .dx-#{$widget-name}-group-closed {
+            color: $datagrid-row-focused-color;
+          }
+        }
+
+        & .dx-command-edit:not(.dx-focused) .dx-link {
+          color: $datagrid-row-focused-color;
+        }
+
+        & .dx-command-edit .dx-link:focus {
+          background-color: $datagrid-base-background-color;
+          color: $datagrid-base-color;
+        }
+      }
+
+      &.dx-group-row {
+        background-color: $datagrid-row-focused-bg;
+        color: $datagrid-row-focused-color;
+
+        & .dx-#{$widget-name}-group-opened,
+        & .dx-#{$widget-name}-group-closed {
+          color: $datagrid-row-focused-color;
+        }
+
+        & .dx-datagrid-summary-item {
+          color: $datagrid-row-focused-color;
+        }
+      }
+    }
+
+    &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content {
+      padding-right: 0;
+    }
+
+    td {
+      &.dx-validation-pending {
+        .dx-pending-indicator {
+          @include dx-pending-indicator-generic();
+          @include texteditor-validation-icon-offset();
+
+          background-color: $datagrid-base-background-color;
+        }
+      }
+
+      &.dx-editor-cell {
+        .dx-texteditor {
+          &.dx-validation-pending {
+            .dx-texteditor-input {
+              padding-right: $generic-texteditor-invalid-badge-size;
+            }
+
+            &.dx-rtl {
+              .dx-texteditor-input {
+                padding-right: $generic-grid-base-cell-padding;
+                padding-bottom: $generic-grid-base-cell-padding;
+                padding-left: $generic-texteditor-invalid-badge-size;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-search-text {
+    color: $datagrid-search-color;
+    background-color: $datagrid-search-bg;
+  }
+
+  .dx-#{$widget-name}-nodata {
+    color: $datagrid-nodata-color;
+    font-size: $generic-grid-base-nodata-font-size;
+    opacity: 0.7;
+  }
+
+  .dx-#{$widget-name}-bottom-load-panel {
+    border-top: $datagrid-border;
+    border-top-color: $datagrid-border-color;
+    background-color: $datagrid-base-background-color;
+  }
+
+  .dx-#{$widget-name}-summary-item {
+    color: $datagrid-summary-color;
+  }
+
+  .dx-#{$widget-name}-total-footer {
+    border-top: $datagrid-border;
+    border-top-color: $datagrid-border-color;
+  }
+
+  .dx-#{$widget-name}-revert-tooltip {
+    .dx-overlay-content {
+      background-color: $datagrid-base-background-color;
+      min-width: inherit;
+    }
+
+    .dx-revert-button {
+      margin: 0 1px;
+      margin-left: 1px;
+
+      @include dx-button-styling-variant(
+        $button-danger-bg, $button-danger-border-color, $button-danger-color,
+        color.adjust($button-danger-bg, $lightness: -10%, $space: hsl),
+        color.adjust($button-danger-bg, $lightness: -15%, $space: hsl),
+        color.adjust($button-danger-bg, $lightness: -20%, $space: hsl),
+        $button-danger-color,
+        $button-danger-color
+      );
+
+      > .dx-button-content {
+        padding: $generic-grid-base-cell-padding;
+      }
+    }
+  }
+
+  .dx-toolbar-menu-section {
+    .dx-#{$widget-name}-checkbox-size {
+      width: 100%;
+
+      .dx-checkbox-container {
+        padding: 14px;
+      }
+
+      .dx-checkbox-text {
+        padding-left: 34px;
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns {
+    .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input {
+      padding-bottom: $generic-grid-base-cell-padding - 1px;
+      min-height: $generic-grid-base-cell-input-height - 2px;
+    }
+
+    .dx-master-detail-row > .dx-master-detail-cell {
+      > .dx-#{$widget-name}-master-detail-container {
+        padding: $grid-masterdetail-padding;
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-draggable-column {
+    opacity: 1;
+    color: $datagrid-draggable-column-text-color;
+  }
+
+  .dx-rtl {
+    .dx-toolbar-menu-section {
+      .dx-checkbox-text {
+        padding-right: 34px;
+        padding-left: 27px;
+      }
+    }
+
+    .dx-#{$widget-name}-filter-row {
+      .dx-menu {
+        .dx-menu-item-has-submenu.dx-menu-item-has-icon {
+          .dx-icon {
+            margin: 0 3px;
+          }
+        }
+      }
+
+      td .dx-editor-container .dx-filter-range-content {
+        padding: $generic-grid-base-cell-padding $generic-grid-base-texteditor-input-padding $generic-grid-base-cell-padding $generic-grid-base-cell-padding;
+      }
+    }
+
+    .dx-#{$widget-name}-rowsview {
+      &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content {
+        padding-left: 0;
+      }
+    }
+  }
+
+  .dx-command-ai-header-content {
+    max-width: calc(100% - ($generic-grid-base-command-ai-header-button-size - $generic-grid-base-cell-padding));
+
+    .dx-#{$widget-name}-text-content {
+      padding-left: $generic-grid-base-command-ai-text-content-padding;
+    }
+
+    .dx-icon-chatsparkleoutline {
+      @include dx-icon-sizing($generic-grid-base-command-ai-chatsparkleoutline-icon-size);
+    }
+  }
+
+  .dx-command-ai-header-button {
+    left: auto;
+    right: 0;
+  }
+
+  td[style*="text-align: right"] .dx-command-ai-header-button {
+    left: 0;
+    right: auto;
+  }
+
+  .dx-command-ai .dx-command-ai-header-button .dx-button {
+    @include dx-button-sizing(
+      $generic-grid-base-command-ai-header-button-padding,
+      $generic-grid-base-command-ai-header-button-padding,
+      $generic-grid-base-command-ai-header-button-padding,
+      $generic-base-icon-size,
+      0
+    );
+
+    &.dx-state-focused {
+      outline-offset: -2px;
+    }
+  }
+
+  .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container {
+    height: $generic-grid-base-ai-prompt-editor-progressbar-height;
+    border: none;
+    border-radius: 0;
+  }
+}