$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 "../icons" as *;
@use "./common";

$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-column-lines > td {
    &:first-child {
      border-left: none;
    }

    &:last-child {
      border-right: none;
    }
  }

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

.dx-treelist-container {
  color: $treelist-base-color;
  background-color: $treelist-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-headers {
    .dx-header-row > td,
    .dx-header-filter {
      outline: none;
    }

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

      td:focus {
        outline-offset: -2px;
      }

      td .dx-header-filter:focus {
        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-data-row,
  .dx-treelist-rowsview .dx-freespace-row,
  .dx-datagrid-rowsview .dx-virtual-row,
  .dx-datagrid-rowsview .dx-header-row,
  .dx-treelist-headers .dx-row {
    td.dx-pointer-events-none {
      border-left: 2px solid $treelist-border-color;
      border-right: 2px solid $treelist-border-color;

      &.dx-first-cell {
        border-left: none;
      }

      &.dx-last-cell {
        border-right: none;
      }
    }
  }

  .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 {
      position: relative;

      &::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 {
    td {
      color: $datagrid-row-error-color;
      padding: 0;
    }

    .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 {
    .dx-column-lines > td {
      &:first-child {
        border-right: none;
        border-left: $treelist-border;
      }

      &:last-child {
        border-left: none;
        border-right: $treelist-border;
      }
    }
  }

  .dx-treelist-container {
    .dx-treelist-rowsview .dx-data-row,
    .dx-treelist-rowsview .dx-freespace-row,
    .dx-datagrid-rowsview .dx-virtual-row,
    .dx-datagrid-rowsview .dx-header-row,
    .dx-treelist-headers .dx-row {
      td.dx-pointer-events-none {
        border-left: 2px solid $treelist-border-color;
        border-right: 2px solid $treelist-border-color;

        &.dx-first-cell {
          border-right: none;
        }

        &.dx-last-cell {
          border-left: none;
        }
      }
    }

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