@use "sass:math";
@use "sass:color";
@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 "../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: 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 $datagrid-row-alternation-bg;
      border-bottom: 1px solid $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;
          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}-focus-overlay {
    border: 2px solid $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;
    }

    .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 $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-#{$widget-name}-header-panel {
    border-bottom: $datagrid-border;

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

    .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 $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 {
          .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;
    background-color: $datagrid-base-background-color;
  }

  .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%),
        darken($button-danger-bg, 15%),
        darken($button-danger-bg, 20%),
        $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;
  }
}