// Set default customise component variables here,
// Override it in theme variables files

$x-ag-tree-level-maximum: 10    !default;
$x-ag-row-child-opacity: 0.8   !default;

$x-ag-tree-indent-width: map_get($spacers, 3) + map_get($spacers, 1);
$x-ag-tree-indicator-icon:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 48'%3E%3Cpath d='M1,24 L5,24 L5,25 L1,25 L1,27 L0,27 L0,22 L1,22 L1,24 Z M0,0 L1,0 L1,4 L0,4 L0,0 Z M0,6 L1,6 L1,10 L0,10 L0,6 Z M0,12 L1,12 L1,16 L0,16 L0,12 Z M0,17 L1,17 L1,21 L0,21 L0,17 Z M0,28 L1,28 L1,32 L0,32 L0,28 Z M0,33 L1,33 L1,37 L0,37 L0,33 Z M0,38 L1,38 L1,42 L0,42 L0,38 Z M0,43 L1,43 L1,47 L0,47 L0,43 Z M6,25 L6,24 L10,24 L10,25 L6,25 Z M11,25 L11,24 L15,24 L15,25 L11,25 Z' fill='#{$border-color}'%3E%3C/path%3E%3C/svg%3E"), "#", "%23");

$x-ag-tree-indent-indicator-icon:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 48'%3E%3Cpath d='M13,27 L12,27 L12,22 L13,22 L13,27 Z M12,0 L13,0 L13,4 L12,4 L12,0 Z M12,6 L13,6 L13,10 L12,10 L12,6 Z M12,12 L13,12 L13,16 L12,16 L12,12 Z M12,17 L13,17 L13,21 L12,21 L12,17 Z M12,28 L13,28 L13,32 L12,32 L12,28 Z M12,33 L13,33 L13,37 L12,37 L12,33 Z M12,38 L13,38 L13,42 L12,42 L12,38 Z M12,43 L13,43 L13,47 L12,47 L12,43 Z' fill='#{$border-color}'%3E%3C/path%3E%3C/svg%3E"), "#", "%23");


@for $i from 0 through $x-ag-tree-level-maximum {
    .ag-row-level-#{$i}:not(.x-no-border-gap) {
      &:before {
        @extend .position-relative,
                .d-block;

        background: inherit;
        content: "";
        top: 100%;

      @if ($i != 0) {
        @include size(1rem + 2rem * $i, 1px);
      } @else  {
        @include size(0);
      }
      &:not(.ag-row-group-expanded):not(ag-row-group-contracted) {
        @if ($i != 0) {
          @include size(1rem + 2rem * ($i + 1),  1px);
        } @else  {
          @include size(0);
        }
      }
    }
    &.ag-row-group-expanded {
      &:before {
        @include size(1rem + 2rem * ($i + 1), 1px);
      }
    }
  }
}

.ag-tree-item {
  @extend %font-size-sm,
	        .align-items-center,
	 				.d-flex,
					.position-relative,
					.text-default;

  @for $i from 0 through $x-ag-tree-level-maximum {
    .ag-row-level-#{$i} & {
      margin-left: 2rem + $i * 0.5rem;
    }
  }
}

.ag-tree-icon {
	@extend .align-items-center,
					.d-flex,
					.justify-content-center,
					.position-absolute,
					.x-icon-md;
	left: -1.25rem;

  .ag-icon-down:empty::after {
    margin-left: -0.2rem;
  }
}

.ag-tree-item {
  .ag-row:not(.ag-row-level-0) .x-tree-cell:before,
  .ag-row:not(.ag-row-level-0):not(.ag-row-level-1) .x-text-icon-cell:before {
    @extend .position-absolute,
            .d-block,
            .h-100;
    content: '';
    top: 0;
  }
}

.x-tree-cell {
  @extend .align-items-center,
          .d-flex,
          .text-default,
          .text-nowrap;
  &:before {
    background-image: $x-ag-tree-indicator-icon;
    width: $x-ag-tree-indent-width;
    margin-left: -$x-ag-tree-indent-width;
  }
}

.x-text-icon-cell {
  @extend .mw-100;

  &:before  {
    background: $x-ag-tree-indent-indicator-icon;
  }
}

@for $i from 1 through $x-ag-tree-level-maximum {
  .ag-row-level-#{$i} {
    .x-tree-cell {
      margin-left: 2rem * $i;
    }

    @if $i > 1 {
      .x-text-icon-cell:before {
        width: 2rem * ($i - 1);
      }
    }
  }
}

// Invoice tree

$dragging-col-width: 2rem; // 32px
$cell-padding: map_get($spacers, 2); // px-2, 0.5rem
$fixed-indent: $dragging-col-width + $cell-padding;

$invoice-indent: 1.75rem;

.x-ag-invoice-tree {
  // Trees with dragging icons
  @for $i from 0 through $x-ag-tree-level-maximum {
    .ag-row-level-#{$i} {
      .x-tree-cell {
        margin-left: $invoice-indent * $i;
      }

      @if $i > 1 {
        @extend .font-italic;
        opacity: $x-ag-row-child-opacity;

        .x-text-icon-cell:before {
          width: $invoice-indent * ($i - 1);
        }
      }

      &:before {
        @include size($fixed-indent + $invoice-indent * $i, 1px);
      }

      .ag-cell-inline-editing {
        &.x-tree-indent-editor {
          margin-left: $invoice-indent * $i;
          z-index: 9999;
        }
      }
    }
  }

  // Trees with no dragging icons, therefore smaller indentation
  &.x-ag-small-indent {
    @for $i from 0 through $x-ag-tree-level-maximum {
      .ag-row-level-#{$i} {
        &:before {
          @include size($cell-padding + $invoice-indent * $i, 1px);
        }
      }
    }
  }
}

.x-ag-fixing-footer {
  @extend .d-flex,
          .flex-auto,
          .flex-column;
  .ag-root-wrapper,
  .ag-root-wrapper-body,
  .ag-root {
    @extend .flex-auto;
  }

  .ag-floating-bottom {
    @extend .mt-auto;
  }
}


// Tree view override ag-grid height flickering
sc-move-correspondence-modal sc-folder-tree .ag-center-cols-clipper {
  max-height: 300px !important;
}