feat(igx-vhelper): create and use css var for scrollbar size (#15863)

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

@@ -12,6 +12,7 @@
     position: absolute;
     top: 0;
     inset-inline-end: 0;
+    width: var(--vhelper-scrollbar-size);
 }
 
 %vhelper--horizontal {

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -242,6 +242,10 @@
         overflow-x: hidden;
         -webkit-overflow-scrolling: touch;
         position: relative;
+
+        igx-display-container {
+            padding-inline-end: var(--vhelper-scrollbar-size);
+        }
     }
 
     %igx-drop-down__content {

projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

@@ -124,6 +124,12 @@
         inherits: true;
     }
 
+    @property --vhelper-scollbar-size {
+        syntax: '<length>';
+        initial-value: 16px;
+        inherits: true;
+    }
+
     // Component styles
     @include ripple.component();
     @include action-strip.component();

projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts

@@ -13,13 +13,11 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
     @HostBinding('scrollTop')
     public scrollTop;
 
-    @HostBinding('style.width.px')
     public scrollWidth;
 
     @ViewChild('container', { read: ViewContainerRef, static: true }) public _vcr;
     @Input() public itemsLength: number;
 
-
     @HostBinding('class')
     public cssClasses = 'igx-vhelper--vertical';
 
@@ -29,6 +27,10 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
 
     public ngOnInit() {
         this.scrollWidth = this.scrollNativeSize;
+        this.document.documentElement.style.setProperty(
+            '--vhelper-scrollbar-size',
+            `${this.scrollNativeSize}px`
+        );
     }
 
     protected override restoreScroll() {