@syncfusion/ej2-navigations 25.2.6 → 26.1.35-750253

package/styles/v-scroll/fluent2.scss

@@ -0,0 +1,4 @@
+@import 'ej2-base/styles/definition/fluent2.scss';
+@import 'fluent2-definition.scss';
+@import 'icons/fluent2.scss';
+@import 'all.scss';

package/styles/v-scroll/highcontrast-light.css

@@ -42,12 +42,14 @@
   width: inherit;
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav {
-  transform: skewX(-16deg) translateX(-6px);
+  -webkit-transform: skewX(-16deg) translateX(-6px);
+          transform: skewX(-16deg) translateX(-6px);
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
   left: 52px;
   right: auto;
-  transform: skewX(-16deg) translateX(-6px);
+  -webkit-transform: skewX(-16deg) translateX(-6px);
+          transform: skewX(-16deg) translateX(-6px);
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
   left: auto;
@@ -57,13 +59,15 @@
   padding: 0 40px;
 }
 .e-vscroll.e-scroll-device .e-scroll-nav {
-  transform: skewX(-16deg) translateX(6px);
+  -webkit-transform: skewX(-16deg) translateX(6px);
+          transform: skewX(-16deg) translateX(6px);
   width: 52px;
   z-index: 1001;
 }
 .e-vscroll.e-scroll-device .e-scroll-nav .e-nav-arrow {
   font-size: 14px;
-  transform: skewX(16deg);
+  -webkit-transform: skewX(16deg);
+          transform: skewX(16deg);
 }
 .e-vscroll.e-scroll-device .e-scroll-overlay {
   opacity: 0.5;
@@ -75,7 +79,8 @@
 .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
   left: auto;
   right: 52px;
-  transform: skewX(-16deg) translateX(6px);
+  -webkit-transform: skewX(-16deg) translateX(6px);
+          transform: skewX(-16deg) translateX(6px);
 }
 .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
   left: 0;
@@ -102,9 +107,11 @@
   right: auto;
 }
 .e-vscroll .e-scroll-nav {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 40px;
@@ -137,13 +144,15 @@
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   border-color: #000;
-  box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
+          box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
 }
 .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   background-color: #d8d8d8;
   border-color: #000;
   border-width: 1px;
-  box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
+          box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
 }
 .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
   color: #400074;
@@ -153,9 +162,11 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
+  background-image: -webkit-gradient(linear, left top, right top, from(#e4e4e4), to(rgba(228, 228, 228, 0)));
   background-image: linear-gradient(-270deg, #e4e4e4 0%, rgba(228, 228, 228, 0) 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(228, 228, 228, 0)), to(#e4e4e4));
   background-image: linear-gradient(-270deg, rgba(228, 228, 228, 0) 0%, #e4e4e4 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {
@@ -181,7 +192,8 @@
 .e-vscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #400074;
   border: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: #000;
 }
 .e-vscroll .e-scroll-nav {

package/styles/v-scroll/highcontrast.css

@@ -43,12 +43,14 @@
   width: inherit;
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav {
-  transform: skewX(-16deg) translateX(-6px);
+  -webkit-transform: skewX(-16deg) translateX(-6px);
+          transform: skewX(-16deg) translateX(-6px);
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
   left: 52px;
   right: auto;
-  transform: skewX(-16deg) translateX(-6px);
+  -webkit-transform: skewX(-16deg) translateX(-6px);
+          transform: skewX(-16deg) translateX(-6px);
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
   left: auto;
@@ -58,13 +60,15 @@
   padding: 0 40px;
 }
 .e-vscroll.e-scroll-device .e-scroll-nav {
-  transform: skewX(-16deg) translateX(6px);
+  -webkit-transform: skewX(-16deg) translateX(6px);
+          transform: skewX(-16deg) translateX(6px);
   width: 52px;
   z-index: 1001;
 }
 .e-vscroll.e-scroll-device .e-scroll-nav .e-nav-arrow {
   font-size: 14px;
-  transform: skewX(16deg);
+  -webkit-transform: skewX(16deg);
+          transform: skewX(16deg);
 }
 .e-vscroll.e-scroll-device .e-scroll-overlay {
   opacity: 0.5;
@@ -76,7 +80,8 @@
 .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
   left: auto;
   right: 52px;
-  transform: skewX(-16deg) translateX(6px);
+  -webkit-transform: skewX(-16deg) translateX(6px);
+          transform: skewX(-16deg) translateX(6px);
 }
 .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
   left: 0;
@@ -103,9 +108,11 @@
   right: auto;
 }
 .e-vscroll .e-scroll-nav {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 40px;
@@ -138,13 +145,15 @@
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   border-color: #fff;
-  box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
+          box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
 }
 .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   background-color: #262626;
   border-color: #fff;
   border-width: 1px;
-  box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
+          box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
 }
 .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
   color: #ffd939;
@@ -154,9 +163,11 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
+  background-image: -webkit-gradient(linear, left top, right top, from(#1a1a1a), to(rgba(26, 26, 26, 0)));
   background-image: linear-gradient(-270deg, #1a1a1a 0%, rgba(26, 26, 26, 0) 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(26, 26, 26, 0)), to(#1a1a1a));
   background-image: linear-gradient(-270deg, rgba(26, 26, 26, 0) 0%, #1a1a1a 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {
@@ -182,7 +193,8 @@
 .e-vscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #ffd939;
   border: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: #fff;
 }
 .e-vscroll .e-scroll-nav {

package/styles/v-scroll/icons/_bootstrap5.3.scss

@@ -0,0 +1,27 @@
+@include export-module('vscroll-bootstrap5-icons') {
+
+  /*! vscroll icons */
+  #{&}.e-vscroll {
+
+    &.e-scroll-device {
+
+      .e-nav-up-arrow::before {
+        content: '\e7dd';
+      }
+
+      .e-nav-down-arrow::before {
+        content: '\e734';
+      }
+    }
+
+    .e-nav-up-arrow::before {
+      content: '\e776';
+      line-height: normal;
+    }
+
+    .e-nav-down-arrow::before {
+      content: '\e729';
+      line-height: normal;
+    }
+  }
+}

package/styles/v-scroll/icons/_fluent2.scss

@@ -0,0 +1,27 @@
+@include export-module('vscroll-fluent2-icons') {
+
+  /*! vscroll icons */
+  #{&}.e-vscroll {
+
+    &.e-scroll-device {
+
+      .e-nav-up-arrow::before {
+        content: '\e7dd';
+      }
+
+      .e-nav-down-arrow::before {
+        content: '\e734';
+      }
+    }
+
+    .e-nav-up-arrow::before {
+      content: '\e776';
+      line-height: normal;
+    }
+
+    .e-nav-down-arrow::before {
+      content: '\e729';
+      line-height: normal;
+    }
+  }
+}

package/styles/v-scroll/material-dark.css

@@ -1,10 +1,23 @@
+@-webkit-keyframes vscroll-popup-shadow {
+  0% {
+    border-color: rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
 @keyframes vscroll-popup-shadow {
   0% {
     border-color: rgba(255, 255, 255, 0.5);
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
   }
   100% {
-    box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+    -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
   }
 }
 /*! vscroll icons */
@@ -51,12 +64,14 @@
   width: inherit;
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav {
-  transform: skewX(-16deg) translateX(-6px);
+  -webkit-transform: skewX(-16deg) translateX(-6px);
+          transform: skewX(-16deg) translateX(-6px);
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
   left: 56px;
   right: auto;
-  transform: skewX(-16deg) translateX(-6px);
+  -webkit-transform: skewX(-16deg) translateX(-6px);
+          transform: skewX(-16deg) translateX(-6px);
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
   left: auto;
@@ -66,13 +81,15 @@
   padding: 0 16px;
 }
 .e-vscroll.e-scroll-device .e-scroll-nav {
-  transform: skewX(-16deg) translateX(6px);
+  -webkit-transform: skewX(-16deg) translateX(6px);
+          transform: skewX(-16deg) translateX(6px);
   width: 56px;
   z-index: 1001;
 }
 .e-vscroll.e-scroll-device .e-scroll-nav .e-nav-arrow {
   font-size: 14px;
-  transform: skewX(16deg);
+  -webkit-transform: skewX(16deg);
+          transform: skewX(16deg);
 }
 .e-vscroll.e-scroll-device .e-scroll-overlay {
   opacity: 0.5;
@@ -84,7 +101,8 @@
 .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
   left: auto;
   right: 56px;
-  transform: skewX(-16deg) translateX(6px);
+  -webkit-transform: skewX(-16deg) translateX(6px);
+          transform: skewX(-16deg) translateX(6px);
 }
 .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
   left: 0;
@@ -111,9 +129,11 @@
   right: auto;
 }
 .e-vscroll .e-scroll-nav {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 40px;
@@ -146,13 +166,15 @@
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   border-color: rgba(0, 0, 0, 0.12);
-  box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
+          box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
 }
 .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   background-color: #fafafa;
   border-color: rgba(0, 0, 0, 0.12);
   border-width: 1px;
-  box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
+          box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
 }
 .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
   color: #00b0ff;
@@ -162,9 +184,11 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
+  background-image: -webkit-gradient(linear, left top, right top, from(#fafafa), to(rgba(250, 250, 250, 0)));
   background-image: linear-gradient(-270deg, #fafafa 0%, rgba(250, 250, 250, 0) 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(250, 250, 250, 0)), to(#fafafa));
   background-image: linear-gradient(-270deg, rgba(250, 250, 250, 0) 0%, #fafafa 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {
@@ -190,7 +214,8 @@
 .e-vscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #bdbdbd;
   border: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: #000;
 }
 .e-vscroll .e-scroll-nav {
@@ -206,7 +231,8 @@
   background-color: transparent;
   border-radius: 50%;
   border-width: 1px;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   content: "";
   height: 1px;
   left: 50%;
@@ -216,6 +242,7 @@
   width: 1px;
 }
 .e-vscroll .e-scroll-nav:active::after {
-  animation: vscroll-popup-shadow 0.6s ease-out 0ms;
+  -webkit-animation: vscroll-popup-shadow 0.6s ease-out 0ms;
+          animation: vscroll-popup-shadow 0.6s ease-out 0ms;
   visibility: visible;
 }

package/styles/v-scroll/material.css

@@ -1,11 +1,24 @@
 /*! component's theme wise override definitions and variables */
+@-webkit-keyframes vscroll-popup-shadow {
+  0% {
+    border-color: rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
 @keyframes vscroll-popup-shadow {
   0% {
     border-color: rgba(255, 255, 255, 0.5);
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
   }
   100% {
-    box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+    -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
   }
 }
 /*! vscroll icons */
@@ -52,12 +65,14 @@
   width: inherit;
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav {
-  transform: skewX(-16deg) translateX(-6px);
+  -webkit-transform: skewX(-16deg) translateX(-6px);
+          transform: skewX(-16deg) translateX(-6px);
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
   left: 56px;
   right: auto;
-  transform: skewX(-16deg) translateX(-6px);
+  -webkit-transform: skewX(-16deg) translateX(-6px);
+          transform: skewX(-16deg) translateX(-6px);
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
   left: auto;
@@ -67,13 +82,15 @@
   padding: 0 16px;
 }
 .e-vscroll.e-scroll-device .e-scroll-nav {
-  transform: skewX(-16deg) translateX(6px);
+  -webkit-transform: skewX(-16deg) translateX(6px);
+          transform: skewX(-16deg) translateX(6px);
   width: 56px;
   z-index: 1001;
 }
 .e-vscroll.e-scroll-device .e-scroll-nav .e-nav-arrow {
   font-size: 14px;
-  transform: skewX(16deg);
+  -webkit-transform: skewX(16deg);
+          transform: skewX(16deg);
 }
 .e-vscroll.e-scroll-device .e-scroll-overlay {
   opacity: 0.5;
@@ -85,7 +102,8 @@
 .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
   left: auto;
   right: 56px;
-  transform: skewX(-16deg) translateX(6px);
+  -webkit-transform: skewX(-16deg) translateX(6px);
+          transform: skewX(-16deg) translateX(6px);
 }
 .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
   left: 0;
@@ -112,9 +130,11 @@
   right: auto;
 }
 .e-vscroll .e-scroll-nav {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 40px;
@@ -147,13 +167,15 @@
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   border-color: rgba(0, 0, 0, 0.12);
-  box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
+          box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
 }
 .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   background-color: #fafafa;
   border-color: rgba(0, 0, 0, 0.12);
   border-width: 1px;
-  box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
+          box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
 }
 .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
   color: #e3165b;
@@ -163,9 +185,11 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
+  background-image: -webkit-gradient(linear, left top, right top, from(#fafafa), to(rgba(250, 250, 250, 0)));
   background-image: linear-gradient(-270deg, #fafafa 0%, rgba(250, 250, 250, 0) 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(250, 250, 250, 0)), to(#fafafa));
   background-image: linear-gradient(-270deg, rgba(250, 250, 250, 0) 0%, #fafafa 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {
@@ -191,7 +215,8 @@
 .e-vscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #bdbdbd;
   border: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: #000;
 }
 .e-vscroll .e-scroll-nav {
@@ -207,7 +232,8 @@
   background-color: transparent;
   border-radius: 50%;
   border-width: 1px;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   content: "";
   height: 1px;
   left: 50%;
@@ -217,6 +243,7 @@
   width: 1px;
 }
 .e-vscroll .e-scroll-nav:active::after {
-  animation: vscroll-popup-shadow 0.6s ease-out 0ms;
+  -webkit-animation: vscroll-popup-shadow 0.6s ease-out 0ms;
+          animation: vscroll-popup-shadow 0.6s ease-out 0ms;
   visibility: visible;
 }

package/styles/v-scroll/material3-dark.css

@@ -44,7 +44,7 @@
   --color-sf-on-warning: 99, 52, 0;
   --color-sf-on-warning-container: 255, 220, 193;
   --color-sf-spreadsheet-gridline: 231, 224, 236;
-  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
   --color-sf-success-text: 0, 0, 0;
   --color-sf-warning-text: 0, 0, 0;
   --color-sf-info-text: 0, 0, 0;
@@ -98,12 +98,14 @@
   width: inherit;
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav {
-  transform: skewX(-16deg) translateX(-6px);
+  -webkit-transform: skewX(-16deg) translateX(-6px);
+          transform: skewX(-16deg) translateX(-6px);
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
   left: 48px;
   right: auto;
-  transform: skewX(-16deg) translateX(-6px);
+  -webkit-transform: skewX(-16deg) translateX(-6px);
+          transform: skewX(-16deg) translateX(-6px);
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
   left: auto;
@@ -113,13 +115,15 @@
   padding: 0 40px;
 }
 .e-vscroll.e-scroll-device .e-scroll-nav {
-  transform: skewX(-16deg) translateX(6px);
+  -webkit-transform: skewX(-16deg) translateX(6px);
+          transform: skewX(-16deg) translateX(6px);
   width: 48px;
   z-index: 1001;
 }
 .e-vscroll.e-scroll-device .e-scroll-nav .e-nav-arrow {
   font-size: 14px;
-  transform: skewX(16deg);
+  -webkit-transform: skewX(16deg);
+          transform: skewX(16deg);
 }
 .e-vscroll.e-scroll-device .e-scroll-overlay {
   opacity: 0.5;
@@ -131,7 +135,8 @@
 .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
   left: auto;
   right: 48px;
-  transform: skewX(-16deg) translateX(6px);
+  -webkit-transform: skewX(-16deg) translateX(6px);
+          transform: skewX(-16deg) translateX(6px);
 }
 .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
   left: 0;
@@ -158,9 +163,11 @@
   right: auto;
 }
 .e-vscroll .e-scroll-nav {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 48px;
@@ -193,13 +200,15 @@
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   border-color: rgba(var(--color-sf-on-surface-variant));
-  box-shadow: rgba(var(--color-sf-shadow));
+  -webkit-box-shadow: rgba(var(--color-sf-shadow));
+          box-shadow: rgba(var(--color-sf-shadow));
 }
 .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   background-color: linear-gradient(0deg, rgba(103, 80, 164, 0.08), rgba(103, 80, 164, 0.08)), linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-on-surface-variant));
   border-width: 1px;
-  box-shadow: rgba(var(--color-sf-shadow));
+  -webkit-box-shadow: rgba(var(--color-sf-shadow));
+          box-shadow: rgba(var(--color-sf-shadow));
 }
 .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
   color: rgba(var(--color-sf-on-surface-variant));
@@ -209,12 +218,15 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-surface))), color-stop(0%, 1), color-stop(rgba(var(--color-sf-surface))), to(0));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-surface)), 1 0%, rgba(var(--color-sf-surface)), 0 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-surface))), color-stop(0%, 0), color-stop(rgba(var(--color-sf-surface))), to(1));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-surface)), 0 0%, rgba(var(--color-sf-surface)), 1 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(103, 80, 164, 0.08)), to(rgba(103, 80, 164, 0.08))), -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(103, 80, 164, 0.08), rgba(103, 80, 164, 0.08)), linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-vscroll.e-rtl .e-scroll-nav:hover {
@@ -237,10 +249,12 @@
 .e-vscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: rgba(var(--color-sf-on-surface), 0.08);
   border: 0;
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   color: rgba(var(--color-sf-primary-container));
 }
 .e-vscroll .e-scroll-nav {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(103, 80, 164, 0.08)), to(rgba(103, 80, 164, 0.08))), -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(103, 80, 164, 0.08), rgba(103, 80, 164, 0.08)), linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-vscroll .e-scroll-nav.e-scroll-up-nav {