$datagrid-border: null !default;
$datagrid-drag-header-border-color: null !default;
$datagrid-row-error-bg: null !default;
$datagrid-base-color: null !default;
$datagrid-base-background-color: null !default;
$datagrid-border-color: null !default;
$datagrid-focused-border-color: null !default;
$datagrid-text-stub-background-image-path: null !default;
$datagrid-row-error-color: null !default;
$header-filter-color: null !default;
$header-filter-color-empty: null !default;
$base-focus-color: null !default;

@use "sass:color";
@use "../mixins" as *;
@use "../icon_fonts" as *;
@use "./common" as *;
@use "./expandable" as *;
@use 'layout/cell' with (
  $treelist-border: $datagrid-border,
  $treelist-border-color: $datagrid-border-color,
  $treelist-base-background-color: $datagrid-base-background-color,
  $treelist-row-error-color: $datagrid-row-error-color,
  $treelist-focused-border-color: $datagrid-focused-border-color,
);

$treelist-border: $datagrid-border;
$treelist-drag-header-border-color: $datagrid-drag-header-border-color;
$treelist-row-error-bg: $datagrid-row-error-bg;
$treelist-base-color: $datagrid-base-color;
$treelist-base-background-color: $datagrid-base-background-color;
$treelist-border-color: $datagrid-border-color;
$treelist-focused-border-color: $datagrid-focused-border-color;
$treelist-text-stub-background-image-path: $datagrid-text-stub-background-image-path;
$treelist-row-error-color: $datagrid-row-error-color;

.dx-treelist-borders {
  > .dx-treelist-headers,
  > .dx-treelist-rowsview,
  > .dx-treelist-total-footer {
    border-left: $treelist-border;
    border-right: $treelist-border;
  }

  > .dx-treelist-rowsview,
  > .dx-treelist-total-footer {
    border-bottom: $treelist-border;
  }

  > .dx-treelist-headers,
  > .dx-treelist-filter-panel {
    border-top: $treelist-border;
  }

  > .dx-treelist-filter-panel {
    border-top-width: 0;
    border-left: $treelist-border;
    border-right: $treelist-border;
    border-bottom: $treelist-border;
  }
}

.dx-sortable-dragging > div > .dx-gridbase-container > .dx-treelist-rowsview {
  border-color: $treelist-drag-header-border-color;
}

@mixin dx-treelist-error-message() {
  background-color: $treelist-row-error-bg;
  white-space: normal;
  word-wrap: break-word;
}

.dx-treelist {
  .dx-command-drag .dx-treelist-drag-icon {
    @include dx-icon(dragvertical);
  }

  .dx-treelist-sticky-columns {
    .dx-treelist-content.dx-sortable {
      overflow: visible;
    }
  }
}

.dx-treelist-container {
  color: $treelist-base-color;

  > .dx-treelist-headers,
  > .dx-treelist-rowsview {
    background-color: $datagrid-base-background-color;
  }

  .dx-sort-up {
    @include dx-icon(sortup);
  }

  .dx-sort-down {
    @include dx-icon(sortdown);
  }

  .dx-sort-down,
  .dx-sort-up {
    font-family: inherit;

    &::before {
      font-family: 'DXIcons', sans-serif;
    }
  }

  .dx-treelist-header-panel {
    .dx-toolbar {
      background-color: transparent;
    }
  }

  .dx-treelist-headers {
    .dx-header-filter {
      outline: none;
    }

    &.dx-state-focused .dx-header-row {
      td .dx-header-filter:focus {
        outline: 2px solid;
        outline-color: $treelist-focused-border-color;
        outline-offset: 2px;
      }
    }
  }

  .dx-header-filter {
    position: relative;
    color: $header-filter-color;

    @include dx-icon(filter);
  }

  .dx-header-filter-empty {
    color: $header-filter-color-empty;
  }

  &.dx-filter-menu {
    .dx-menu-item-content .dx-icon {
      @include dx-icon-sizing(14px);
    }
  }

  .dx-treelist-content-fixed {
    .dx-treelist-table {
      .dx-col-fixed {
        background-color: $treelist-base-background-color;
      }
    }
  }

  .dx-treelist-rowsview.dx-state-focused .dx-data-row {
    & > td.dx-command-edit > a.dx-link:focus {
      outline: 2px solid $datagrid-focused-border-color;
      outline-offset: 2px;
    }

    &.dx-row-focused > td.dx-command-edit > a.dx-link:focus {
      outline-color: $base-focus-color;
      outline-offset: 0;
    }
  }

  .dx-treelist-rowsview {
    .dx-treelist-edit-form {
      background-color: $treelist-base-background-color;
    }

    .dx-virtual-row > td {
      &::before {
        display: block;
        height: 100%;
        content: '';
        background-image: $treelist-text-stub-background-image-path;
        background-repeat: no-repeat repeat;
      }

      &[style*="text-align: right"]::before {
        @include flip-horizontally();
      }
    }
  }

  .dx-treelist-filter-row .dx-filter-range-content {
    color: $treelist-base-color;
  }

  .dx-error-row {
    .dx-error-message {
      @include dx-treelist-error-message();
    }
  }
}

.dx-treelist-filter-panel {
  color: $treelist-base-color;
  border-top: $treelist-border;

  .dx-icon-filter,
  .dx-treelist-filter-panel-text,
  .dx-treelist-filter-panel-clear-filter {
    outline: none;
  }

  &.dx-state-focused {
    .dx-icon-filter:focus,
    .dx-treelist-filter-panel-text:focus,
    .dx-treelist-filter-panel-clear-filter:focus {
      outline: 2px solid $treelist-focused-border-color;
    }
  }
}

.dx-treelist-form-buttons-container {
  float: right;

  .dx-button {
    margin-left: 10px;
    margin-top: 10px;
  }
}

.dx-treelist-export-menu {
  .dx-menu-item .dx-icon-exportxlsx {
    @include dx-icon-sizing(16px);
  }
}

.dx-treelist-adaptive-more {
  cursor: pointer;

  @include dx-icon(more);
  @include dx-icon-sizing(21px);
}

.dx-treelist-edit-popup .dx-error-message {
  @include dx-treelist-error-message();

  color: $treelist-row-error-color;
  margin-bottom: 20px;
}

.dx-rtl {
  .dx-treelist-container {
    .dx-treelist-rowsview {
      .dx-virtual-row > td {
        &::before {
          @include flip-horizontally();
        }

        &[style*="text-align: left"]::before {
          transform: scale(1);
        }
      }
    }
  }

  .dx-treelist-form-buttons-container {
    float: left;

    .dx-button {
      margin-left: 0;
      margin-right: 10px;
    }
  }
}

.dx-treelist-cell-updated-animation {
  animation: dx-treelist-highlight-change 1s;
}

@keyframes dx-treelist-highlight-change {
  from {
    background-color: color.change($treelist-base-color, $alpha: 0.08);
  }

  50% {
    background-color: color.change($treelist-base-color, $alpha: 0.08);
  }
}

.dx-command-ai-header-button .dx-button.dx-state-focused {
  outline: 2px solid $treelist-focused-border-color;
}