refactor(vhelper): use custom property syntax

Author: didimmova

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

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

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

@@ -244,7 +244,7 @@
         position: relative;
 
         igx-display-container {
-            padding-inline-end: var(--igx-vhelper--scrollbar-size, 0);
+            padding-inline-end: var(--vhelper-scrollbar-size, 0)
         }
     }
 

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

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

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

@@ -95,10 +95,6 @@
         --ig-spacing-block-large: 1;
     }
 
-    #{$scope} {
-        --igx-vhelper-scrollbar-size: 1rem;
-    }
-
     @if not(list.index($exclude, 'palette')) {
         @include palette($palette);
     }

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

@@ -13,10 +13,10 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
     @HostBinding('scrollTop')
     public scrollTop;
 
-    @HostBinding('style.--igx-vhelper--scrollbar-size')
+    @HostBinding('style.--vhelper-scrollbar-size')
     public get scrollbarSize(): string {
         const value = `${this.scrollNativeSize}px`;
-        this.document.documentElement.style.setProperty('--igx-vhelper--scrollbar-size', value);
+        this.document.documentElement.style.setProperty('--vhelper-scrollbar-size', value);
         return value;
     }