@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../common/mixins" as *;
@use "../../base/icon_fonts" as *;
@use "../gridBase/colors" as *;
@use "../treeView/sizes" as *;
@use "../button/mixins" as *;
@use "../button/colors" as *;
@use "../../base/pivotGrid" as basePivotGrid with (
  $pivotgrid-drag-header-border-color: $pivotgrid-drag-header-border-color,
  $pivotgrid-drag-header-first-shadow-color: $pivotgrid-drag-header-first-shadow-color,
  $pivotgrid-drag-header-second-shadow-color: $pivotgrid-drag-header-second-shadow-color,
  $pivotgrid-border-color: $pivotgrid-border-color,
  $pivotgrid-common-left-right-padding: $pivotgrid-common-left-right-padding,
  $pivotgrid-area-color: $pivotgrid-area-color,
  $header-filter-color: $header-filter-color,
  $header-filter-color-empty: $header-filter-color-empty,
  $pivotgrid-area-background: $pivotgrid-area-background,
  $pivotgrid-common-top-bottom-padding: $pivotgrid-common-top-bottom-padding,
  $pivotgrid-header-top-bottom-padding: $pivotgrid-header-top-bottom-padding,
  $pivotgrid-field-indicators-offset: $pivotgrid-field-indicators-offset,
  $pivotgrid-indicators-line-height: $pivotgrid-indicators-line-height,
  $pivotgrid-totalcolor: $pivotgrid-totalcolor,
  $pivotgrid-field-area-text-color: $pivotgrid-field-area-text-color,
  $pivotgrid-data-area-color: $pivotgrid-data-area-color,
  $pivotgrid-grandtotalcolor: $pivotgrid-grandtotalcolor,
  $pivotgrid-accent-color: $pivotgrid-accent-color,
  $pivotgrid-empty-area-text-padding: $pivotgrid-empty-area-text-padding,
  $pivotgrid-button-top-padding: $pivotgrid-button-top-padding,
);

// adduse


$material-pivotgrid-headers-font-size: 12px;
$material-pivotgrid-area-font-size: 13px;
$material-pivotgrid-chevron-icon-size: 20px;

$material-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15);
$material-pivotgridfieldchooser-field-min-height: 36px;

.dx-pivotgrid-fields-container {
  &.dx-drag {
    .dx-area-field.dx-area-box {
      background-color: color.change($pivotgrid-field-area-box-background-color, $alpha: 0.9);
      border: none;
      box-shadow: $material-pivotgrid-drag-header-shadow;
    }
  }

  .dx-area-field.dx-area-box {
    color: $pivotgrid-field-area-box-text-color;
    background-color: $pivotgrid-field-area-box-background-color;
    border-radius: 16px;
    border: none;
    font-size: $material-pivotgrid-headers-font-size;
    font-weight: 500;

    .dx-header-filter {
      color: $base-accent;

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


.dx-pivotgrid {
  background-color: $pivotgrid-area-background;

  .dx-pivotgrid-area {
    &.dx-pivotgrid-area-data {
      font-size: $material-pivotgrid-area-font-size;
    }

    &.dx-pivotgrid-vertical-headers,
    &.dx-pivotgrid-horizontal-headers {
      font-size: $material-pivotgrid-headers-font-size;

      td {
        font-weight: 500;
      }

      .dx-grandtotal,
      .dx-total {
        color: $base-text-color;
      }
    }

    td {
      padding: $material-pivotgrid-cell-padding;

      &.dx-pivotgrid-collapsed,
      &.dx-pivotgrid-expanded {
        padding: $material-pivotgrid-expanded-cell-padding;

        > span {
          padding: 0 5px 0 10px;
        }
      }
    }
  }


  .dx-area-description-cell {
    .dx-pivotgrid-toolbar {
      padding-left: 8px;

      .dx-button {
        @include dx-button-flat-color-styling($base-text-color, transparent, color.change($button-normal-bg-inverted, $alpha: 0.08), color.change($button-normal-bg-inverted, $alpha: 0.08), color.change($button-normal-bg-inverted, $alpha: 0.3));
      }
    }
  }

  .dx-row-total,
  .dx-grandtotal {
    &.dx-last-cell {
      padding-left: $material-pivotgrid-total-text-left-padding;
    }
  }

  .dx-column-header,
  .dx-filter-header {
    .dx-pivotgrid-toolbar {
      .dx-button {
        @include dx-button-flat-color-styling($base-text-color, transparent, color.change($button-normal-bg-inverted, $alpha: 0.08), color.change($button-normal-bg-inverted, $alpha: 0.08), color.change($button-normal-bg-inverted, $alpha: 0.3));
      }
    }
  }

  .dx-expand-icon-container {
    margin: 0;

    @include dx-icon(chevronright);

    font-size: $material-pivotgrid-headers-font-size;

    &::before {
      visibility: hidden;
    }
  }

  .dx-pivotgrid-collapsed .dx-expand {
    @include dx-icon(chevronright);
    @include dx-icon-font-centered-sizing($material-pivotgrid-chevron-icon-size);

    color: $pivotgrid-chevron-icon-color;
  }

  .dx-pivotgrid-expanded .dx-expand {
    @include dx-icon(chevrondown);
    @include dx-icon-font-centered-sizing($material-pivotgrid-chevron-icon-size);

    color: $pivotgrid-chevron-icon-color;
  }

  .dx-area-tree-view {
    td.dx-white-space-column {
      width: $pivotgrid-empty-column-width;
      min-width: $pivotgrid-empty-column-width;
    }
  }
}

.dx-pivotgridfieldchooser {
  background-color: $pivotgrid-area-background;

  .dx-area-icon {
    width: $material-button-icon-size;
    height: $material-button-icon-size;
    font-size: $material-button-icon-size;
  }

  .dx-area {
    .dx-area-caption {
      text-transform: uppercase;
      font-size: $material-pivotgrid-headers-font-size;
      font-weight: 500;
      color: $pivotgrid-area-color;
      vertical-align: bottom;
    }

    .dx-area-fields {
      margin-top: 8px;
    }
  }

  .dx-treeview-border-visible .dx-scrollable-content > .dx-treeview-node-container {
    padding-right: 8px;
  }

  .dx-treeview-item {
    min-height: $material-pivotgridfieldchooser-field-min-height;
    padding: 9px 8px;
    line-height: normal;
  }

  .dx-treeview-item-with-checkbox {
    .dx-checkbox {
      top: 9px;
    }

    .dx-treeview-item {
      .dx-icon {
        margin: 0 5px 2px 0;

        @include dx-icon-sizing($material-button-icon-size);
      }
    }
  }

  .dx-treeview-toggle-item-visibility {
    height: $material-pivotgridfieldchooser-field-min-height;
  }
}

.dx-pivotgrid-fields-container { // stylelint-disable-line no-duplicate-selectors
  .dx-position-indicator {
    background-color: $pivotgrid-position-indicator-color;
  }
}