refactor(query-builder): expose private css vars fo easy modification of query builder outer paddings and tree section scrollbar gutter.

Author: desig9stein

projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -122,11 +122,19 @@
         overflow: hidden;
 
         &:has(:not(igx-query-builder-header)) {
-            padding-block-start: if($variant != 'bootstrap', rem(24px), rem(16px))
+            padding-block-start: var(--_query-builder-outer-padding);
+
+            %query-level-0 {
+                padding-block: 0 var(--_query-builder-outer-padding);
+            }
         }
 
         &:has(igx-query-builder-header) {
             padding-block-start: 0;
+
+            %query-level-0 {
+                padding-block: if($variant != 'bootstrap', 0, rem(16px)) var(--_query-builder-outer-padding);
+            }
         }
 
 	    .igx-chip__ghost {
@@ -145,10 +153,8 @@
     %query-level-0 {
         display: block;
         width: 100%;
-        padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
-        padding-block:
-            if($variant != 'bootstrap', 0, rem(16px))
-            if($variant != 'bootstrap', rem(24px), rem(16px));
+
+        padding-inline: var(--_query-builder-outer-padding);
 
         > %advanced-filter__main {
             gap: rem(16px);
@@ -159,7 +165,7 @@
                 max-height: rem(570px);
                 overflow-y: auto;
                 overflow-x: hidden;
-                padding-inline-end: rem(16px);
+                padding-inline-end: var(--_tree-scrollbar-gutter);
             }
         }
     }
@@ -230,8 +236,8 @@
         margin-bottom: 0;
         border-block-end: rem(1px) solid var-get($theme, 'header-border');
 
-        padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
-        padding-block: if($variant != 'bootstrap', rem(24px), rem(16px)) rem(16px);
+        padding-inline: var(--_query-builder-outer-padding);
+        padding-block: var(--_query-builder-outer-padding) rem(16px);
     }
 
     %advanced-filter__title {