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

$x-ag-tree-level-maximum: 10    !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");

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