@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icons" 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 "../validation/colors" as *;

// adduse
@use "../scrollable";
@use "../overlay";
@use "../pager";

$generic-grid-base-border-hidden: 1px solid transparent;
$generic-grid-base-row-border: 1px solid transparent;
$generic-grid-base-border-color: $datagrid-border-color;
$generic-grid-base-drag-header-border: 1px solid $datagrid-drag-header-border-color;
$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;
$grid-masterdetail-padding: 20px;


@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) {
  .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-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} {
    line-height: inherit;

    .dx-row-alt {
      & > td,
      & > tr > td {
        background-color: $datagrid-row-alternation-bg;
      }

      &.dx-row:not(.dx-row-removed) {
        border-bottom-color: transparent;
      }

      // T838734
      border-top: 1px solid $datagrid-row-alternation-bg;
      border-bottom: 1px solid $datagrid-row-alternation-bg;
    }

    .dx-link {
      color: $datagrid-link-color;
    }

    .dx-row-lines > td {
      border-bottom: $datagrid-border;
    }

    .dx-column-lines > td {
      border-left: $datagrid-border;
      border-right: $datagrid-border;
    }

    .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-row {
      & > td {
        padding: $generic-grid-base-cell-padding;
      }
    }

    .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row {
      .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-#{$widget-name}-rowsview .dx-virtual-row > td[style*="text-align: right"]::before {
      background-position-y: 34px;
    }

    .dx-command-drag {
      width: $generic-grid-base-command-handle-column-width;
      min-width: $generic-grid-base-command-handle-column-width;

      .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: round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding;
    }

    .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-editor-inline-block:not(.dx-command-select) {
      &::before {
        padding-top: $generic-grid-base-cell-padding;
        padding-bottom: $generic-grid-base-cell-padding;
      }
    }
  }

  .dx-#{$widget-name}-checkbox-size {
    padding-bottom: $generic-grid-base-checkbox-padding-bottom;

    &.dx-checkbox-checked .dx-checkbox-icon {
      font-size: $generic-grid-base-checkbox-fontsize;
    }

    .dx-checkbox-icon {
      height: $generic-grid-base-checkbox-icon-size;
      width: $generic-grid-base-checkbox-icon-size;
    }

    &.dx-checkbox-indeterminate {
      .dx-checkbox-icon {
        font-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-overlay-content {
      background-color: $datagrid-columnchooser-bg;
      border-radius: $datagrid-columnchooser-overlay-border-radius;
      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;
          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;
    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}-drop-highlight {
    & > td {
      background-color: $datagrid-drop-highlight-bg;
      color: $datagrid-drop-highlight-color;
    }
  }

  .dx-#{$widget-name}-focus-overlay {
    border: 2px solid $datagrid-focused-border-color;
  }

  .dx-#{$widget-name}-table {
    .dx-row {
      .dx-command-select {
        width: $generic-grid-base-command-select-column-width;
        min-width: $generic-grid-base-command-select-column-width;
      }

      .dx-command-edit {
        width: $generic-grid-base-command-edit-column-width;
        min-width: $generic-grid-base-command-edit-column-width;

        .dx-link.dx-state-disabled {
          opacity: $datagrid-text-link-disabled-opacity;

          &.dx-link-icon {
            opacity: $datagrid-icon-link-disabled-opacity;
          }
        }
      }

      .dx-command-expand {
        width: $generic-grid-base-command-expand-column-width;
        min-width: $generic-grid-base-command-expand-column-width;

        &.dx-#{$widget-name}-group-space {
          padding-top: $generic-grid-base-cell-padding;
        }
      }
    }

    .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) {
        & > td:not(.dx-focused) {
          background-color: $datagrid-hover-bg;
          color: $datagrid-row-hovered-color;

          &.dx-#{$widget-name}-group-space {
            border-right-color: $datagrid-hover-bg;
          }

          &.dx-command-select {
            overflow: inherit;
          }
        }

        & > .dx-#{$widget-name}-readonly .dx-texteditor {
          .dx-texteditor-input {
            background-color: $datagrid-hover-bg;
            color: $datagrid-row-hovered-color;
          }
        }

        & > td.dx-pointer-events-none {
          background-color: transparent;
        }
      }
    }
  }

  .dx-#{$widget-name}-headers {
    color: $datagrid-columnchooser-item-color;
    font-weight: $datagrid-columnchooser-font-weight;
    touch-action: pinch-zoom;
    border-bottom: $datagrid-border;

    .dx-#{$widget-name}-content {
      margin-bottom: -1px;
    }

    .dx-#{$widget-name}-table {
      .dx-#{$widget-name}-borders & {
        border-bottom-width: 1px;
      }

      .dx-row > td {
        border-bottom: $datagrid-border;
      }
    }
  }

  .dx-#{$widget-name}-filter-row {
    .dx-menu {
      .dx-overlay-content {
        color: $menu-color;
      }
    }

    .dx-menu-item {
      &.dx-state-focused {
        background-color: transparent;

        &::after {
          border: 2px solid $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;
      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 $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-cell-modified,
  .dx-#{$widget-name}-invalid {
    padding: $generic-grid-base-cell-padding;
  }

  .dx-#{$widget-name}-header-panel {
    border-bottom: $datagrid-border;

    .dx-toolbar {
      margin-bottom: $generic-grid-base-header-panel-margin-bottom;
    }

    .dx-apply-button {
      @include dx-button-styling-variant(
                $button-success-bg, $button-success-border-color, $button-success-color,
                darken($button-success-bg, 10%), $button-success-border-color,
                darken($button-success-bg, 15%), $button-success-border-color,
                darken($button-success-bg, 20%), $button-success-border-color, $button-success-color,
                $button-success-color
            );
    }
  }

  .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;
    }

    .dx-row {
      border-top: $generic-grid-base-row-border;
      border-bottom: $generic-grid-base-row-border;

      &:focus {
        outline: none;
      }

      &.dx-edit-row:first-child > td {
        border-top-width: 0;
        border-bottom: $datagrid-border;
      }

      &.dx-edit-row > td {
        border-top: $datagrid-border;
        border-bottom: $datagrid-border;
      }

      &.dx-#{$widget-name}-edit-form {
        white-space: normal;
      }
    }

    .dx-master-detail-row {
      > .dx-master-detail-cell {
        padding: $grid-masterdetail-padding;
      }
      > .dx-#{$widget-name}-group-space,
      .dx-master-detail-cell {
        border-top: $datagrid-border;
        border-bottom: $datagrid-border;
      }

      .dx-texteditor-input {
        padding-right: 0;
      }
    }

    .dx-master-detail-row:not(.dx-#{$widget-name}-edit-form) {
      > .dx-#{$widget-name}-group-space,
      .dx-master-detail-cell {
        background-color: $datagrid-master-detail-cell-bg;
      }
    }

    .dx-data-row {
      .dx-validator.dx-#{$widget-name}-invalid {
        &.dx-cell-modified,
        &.dx-#{$widget-name}-invalid {
          &::after {
            border: 1px solid $datagrid-row-invalid-faded-border-color;
          }
        }

        &.dx-focused {
          &.dx-cell-modified,
          &.dx-#{$widget-name}-invalid {
            &::after {
              border: 1px solid $datagrid-row-invalid-border-color;
            }
          }
        }
      }

      .dx-cell-modified {
        &.dx-cell-modified,
        &.dx-#{$widget-name}-invalid {
          &::after {
            border-color: $datagrid-cell-modified-border-color;
          }
        }
      }
    }

    .dx-overlay-wrapper.dx-invalid-message {
      .dx-overlay-content {
        padding: 9px 17px 9px;
      }
    }

    .dx-row-removed > td {
      background-color: $datagrid-row-removed-bg;
      border-top: 1px solid $datagrid-cell-removed-border-color;
      border-bottom: 1px solid $datagrid-cell-removed-border-color;
      color: $datagrid-cell-removed-text-color;
    }

    @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 $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 $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 {
          background-color: $datagrid-row-focused-bg;
          color: $datagrid-row-focused-color;

          .dx-texteditor-input {
            border-radius: 0;
          }

          & .dx-#{$widget-name}-group-opened,
          & .dx-#{$widget-name}-group-closed {
            color: $datagrid-row-focused-color;
          }
        }

        & .dx-command-edit .dx-link:focus {
          background-color: $datagrid-base-background-color;
          color: $datagrid-base-color;
        }

        & > td,
        & > tr:last-child > td {
          border-bottom: 1px solid $datagrid-focused-border-color;
        }

        &:not(.dx-row-lines) {
          & > td,
          & > tr:first-child > td {
            border-top: 1px solid $datagrid-focused-border-color;
            border-bottom: 1px solid $datagrid-focused-border-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-selection.dx-row:not(.dx-row-focused),
    .dx-selection.dx-row:not(.dx-row-focused):hover {
      & > td,
      & > tr > td {
        background-color: $datagrid-selection-bg;
        color: $datagrid-row-selected-color;

        &.dx-#{$widget-name}-group-space {
          border-right-color: $datagrid-selection-bg;
        }

        &.dx-pointer-events-none {
          border-left-color: $datagrid-row-selected-border-color;
          border-right-color: $datagrid-row-selected-border-color;
        }

        &.dx-focused {
          background-color: $datagrid-base-background-color;
          color: $datagrid-base-color;
        }
      }

      &:not(.dx-row-lines) {
        & > td {
          border-bottom: 1px solid $datagrid-selection-bg;
          border-top: 1px solid $datagrid-selection-bg;
        }

        & > tr:first-child > td {
          border-top: 1px solid $datagrid-selection-bg;
        }

        & > tr:last-child > td {
          border-bottom: 1px solid $datagrid-selection-bg;
        }
      }

      &.dx-column-lines {
        & > td,
        & > tr > td {
          border-left-color: $datagrid-row-selected-border-color;
          border-right-color: $datagrid-row-selected-border-color;
        }
      }

      &.dx-row-lines {
        & > td,
        & > tr > td {
          border-bottom-color: $datagrid-row-selected-border-color;
        }
      }
    }

    &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content {
      padding-right: 0;
    }

    td {
      &.dx-validation-pending {
        position: relative;
        padding: 0;

        &.dx-cell-modified,
        &.dx-#{$widget-name}-invalid {
          padding: $generic-grid-base-cell-padding;
          padding-right: $generic-texteditor-invalid-badge-size;

          @at-root #{selector-append(".dx-rtl", &)},
          .dx-rtl & {
            padding-left: $generic-texteditor-invalid-badge-size;
            padding-right: $generic-grid-base-cell-padding;
          }
        }

        .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;
  }

  .dx-#{$widget-name}-bottom-load-panel {
    border-top: $datagrid-border;
    background-color: $datagrid-base-background-color;
  }

  .dx-#{$widget-name}-pager {
    border-top: 1px solid $datagrid-border-color;

    .dx-page,
    .dx-page-size,
    .dx-navigate-button {
      outline: none;
    }

    &.dx-state-focused {
      .dx-page:focus,
      .dx-page-size:focus,
      .dx-navigate-button:focus {
        outline: 2px solid $datagrid-focused-border-color;
        outline-offset: -2px;
      }
    }
  }

  .dx-#{$widget-name}-summary-item {
    color: $datagrid-summary-color;
  }

  .dx-#{$widget-name}-total-footer {
    border-top: $datagrid-border;
  }

  .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,
                darken($button-danger-bg, 10%), $button-danger-border-color,
                darken($button-danger-bg, 15%), $button-danger-border-color,
                darken($button-danger-bg, 20%), $button-danger-border-color, $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-rtl {
    .dx-toolbar-menu-section {
      .dx-checkbox-text {
        padding-right: 34px;
        padding-left: 27px;
      }
    }


    .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) {
        & > td:not(.dx-focused) {
          &.dx-#{$widget-name}-group-space {
            border-left-color: $datagrid-hover-bg;
            border-right-color: transparent;
          }
        }
      }
    }

    .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-selection.dx-row,
      .dx-selection.dx-row:hover {
        & > td,
        & > tr > td {
          &:not(.dx-focused) {
            &.dx-#{$widget-name}-group-space {
              border-left-color: $datagrid-selection-bg;
            }
          }

          border-right-color: $datagrid-row-selected-border-color;

          &.dx-pointer-events-none {
            border-left-color: $datagrid-row-selected-border-color;
          }
        }
      }

      &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content {
        padding-left: 0;
      }
    }
  }
}