@syncfusion/ej2-navigations 31.2.16 → 32.1.19

package/styles/fluent2.scss

@@ -1,59 +1,59 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'pager/fluent2-definition.scss';
-@import 'pager/icons/fluent2.scss';
-@import 'pager/all.scss';
-@import 'pager/bigger.scss';
-@import 'h-scroll/fluent2-definition.scss';
-@import 'h-scroll/icons/fluent2.scss';
-@import 'h-scroll/all.scss';
-@import 'h-scroll/bigger.scss';
-@import 'v-scroll/fluent2-definition.scss';
-@import 'v-scroll/icons/fluent2.scss';
-@import 'v-scroll/all.scss';
-@import 'v-scroll/bigger.scss';
-@import 'ej2-buttons/styles/button/fluent2-definition.scss';
-@import 'ej2-popups/styles/popup/fluent2-definition.scss';
-@import 'toolbar/fluent2-definition.scss';
-@import 'toolbar/icons/fluent2.scss';
-@import 'toolbar/all.scss';
-@import 'toolbar/bigger.scss';
-@import 'accordion/fluent2-definition.scss';
-@import 'accordion/icons/fluent2.scss';
-@import 'accordion/all.scss';
-@import 'accordion/bigger.scss';
-@import 'carousel/fluent2-definition.scss';
-@import 'carousel/icons/fluent2.scss';
-@import 'carousel/all.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'pager/fluent2-definition' as *;
+@use 'pager/icons/fluent2' as *;
+@use 'pager/all' as *;
+@use 'pager/bigger' as *;
+@use 'h-scroll/fluent2-definition' as *;
+@use 'h-scroll/icons/fluent2' as *;
+@use 'h-scroll/all' as *;
+@use 'h-scroll/bigger' as *;
+@use 'v-scroll/fluent2-definition' as *;
+@use 'v-scroll/icons/fluent2' as *;
+@use 'v-scroll/all' as *;
+@use 'v-scroll/bigger' as *;
+@use 'ej2-buttons/styles/button/fluent2-definition' as *;
+@use 'ej2-popups/styles/popup/fluent2-definition' as *;
+@use 'toolbar/fluent2-definition' as *;
+@use 'toolbar/icons/fluent2' as *;
+@use 'toolbar/all' as *;
+@use 'toolbar/bigger' as *;
+@use 'accordion/fluent2-definition' as *;
+@use 'accordion/icons/fluent2' as *;
+@use 'accordion/all' as *;
+@use 'accordion/bigger' as *;
+@use 'carousel/fluent2-definition' as *;
+@use 'carousel/icons/fluent2' as *;
+@use 'carousel/all' as *;
 
-@import 'context-menu/fluent2-definition.scss';
-@import 'context-menu/icons/fluent2.scss';
-@import 'context-menu/all.scss';
-@import 'context-menu/bigger.scss';
-@import 'tab/fluent2-definition.scss';
-@import 'tab/icons/fluent2.scss';
-@import 'tab/all.scss';
-@import 'tab/bigger.scss';
-@import 'ej2-inputs/styles/input/fluent2-definition.scss';
-@import 'ej2-buttons/styles/check-box/fluent2-definition.scss';
-@import 'treeview/fluent2-definition.scss';
-@import 'treeview/icons/fluent2.scss';
-@import 'treeview/all.scss';
-@import 'treeview/bigger.scss';
-@import 'sidebar/fluent2-definition.scss';
-@import 'sidebar/all.scss';
-@import 'menu/fluent2-definition.scss';
-@import 'menu/icons/fluent2.scss';
-@import 'menu/all.scss';
-@import 'menu/bigger.scss';
-@import 'breadcrumb/fluent2-definition.scss';
-@import 'breadcrumb/icons/fluent2.scss';
-@import 'breadcrumb/all.scss';
-@import 'breadcrumb/bigger.scss';
-@import 'appbar/fluent2-definition.scss';
-@import 'appbar/all.scss';
-@import 'appbar/bigger.scss';
-@import 'ej2-popups/styles/tooltip/fluent2-definition.scss';
-@import 'stepper/fluent2-definition.scss';
-@import 'stepper/icons/fluent2.scss';
-@import 'stepper/all.scss';
-@import 'stepper/bigger.scss';
+@use 'context-menu/fluent2-definition' as *;
+@use 'context-menu/icons/fluent2' as *;
+@use 'context-menu/all' as *;
+@use 'context-menu/bigger' as *;
+@use 'tab/fluent2-definition' as *;
+@use 'tab/icons/fluent2' as *;
+@use 'tab/all' as *;
+@use 'tab/bigger' as *;
+@use 'ej2-inputs/styles/input/fluent2-definition' as *;
+@use 'ej2-buttons/styles/check-box/fluent2-definition' as *;
+@use 'treeview/fluent2-definition' as *;
+@use 'treeview/icons/fluent2' as *;
+@use 'treeview/all' as *;
+@use 'treeview/bigger' as *;
+@use 'sidebar/fluent2-definition' as *;
+@use 'sidebar/all' as *;
+@use 'menu/fluent2-definition' as *;
+@use 'menu/icons/fluent2' as *;
+@use 'menu/all' as *;
+@use 'menu/bigger' as *;
+@use 'breadcrumb/fluent2-definition' as *;
+@use 'breadcrumb/icons/fluent2' as *;
+@use 'breadcrumb/all' as *;
+@use 'breadcrumb/bigger' as *;
+@use 'appbar/fluent2-definition' as *;
+@use 'appbar/all' as *;
+@use 'appbar/bigger' as *;
+@use 'ej2-popups/styles/tooltip/fluent2-definition' as *;
+@use 'stepper/fluent2-definition' as *;
+@use 'stepper/icons/fluent2' as *;
+@use 'stepper/all' as *;
+@use 'stepper/bigger' as *;

package/styles/h-scroll/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/h-scroll/_bds-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 /*! component's theme wise override definitions and variables */
 $hscroll-skin: $skin-name !default;
 $border-type: solid;
@@ -11,6 +14,8 @@ $hscroll-nav-nrml-minheight: 38px !default;
 $hscroll-nav-bgr-minheight: 48px !default;
 $hscroll-mob-nav-nrml-width: 40px !default;
 $hscroll-nav-nrml-width: 28px !default;
+$hscroll-nav-bgr-left: 48px !default;
+$hscroll-nav-bgr-right: 48px !default;
 $hscroll-nav-bgr-width: 48px !default;
 $hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
 $hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
@@ -40,6 +45,9 @@ $hscroll-device-arrow-size: 18px !default;
 $hscroll-device-arrow-icon-size: 18px !default;
 $hscroll-device-arrow-size-bigger: 22px !default;
 $hscroll-device-arrow-width: 48px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
 
 $hscroll-default-border: $hscroll-hover-border-color !default;
 $hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;

package/styles/h-scroll/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('h-scroll-bigger') {
   .e-bigger #{&}.e-hscroll,
   #{&}.e-hscroll.e-bigger {
@@ -21,13 +23,13 @@
     }
 
     &.e-rtl .e-scroll-overlay.e-scroll-right-overlay {
-      left: $hscroll-nav-bgr-width;
+      left: $hscroll-nav-bgr-left;
     }
 
     .e-scroll-overlay {
 
       &.e-scroll-right-overlay {
-        right: $hscroll-nav-bgr-width;
+        right: $hscroll-nav-bgr-right;
       }
     }
 

package/styles/h-scroll/_bootstrap-dark-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
+
 //default
 $hscroll-skin: 'bootstrap' !default;
 $hscroll-default-bg: $grey-darker !default;
@@ -25,10 +28,15 @@ $hscroll-border-type: solid !default;
 $hscroll-hover-font: $hover-font-color !default;
 $hscroll-active-font-color: $active-font-color !default;
 $hscroll-nav-nrml-width: 40px !default;
+$hscroll-nav-bgr-left: 50px !default;
+$hscroll-nav-bgr-right: 50px !default;
 $hscroll-nav-bgr-width: 50px !default;
 $hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
 $hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
 $hscroll-box-shadow: none !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
 
 $hscroll-default-icon-color: $grey-dark-font !default;
 $hscroll-hover-bg: $grey-light !default;

package/styles/h-scroll/_bootstrap-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
+
 /*! component's theme wise override definitions and variables */
 $hscroll-skin: 'bootstrap' !default;
 $hscroll-border-type: solid !default;
@@ -9,6 +12,8 @@ $hscroll-nav-nrml-minheight: 40px !default;
 $hscroll-nav-bgr-minheight: 50px !default;
 $hscroll-mob-nav-nrml-width: 50px !default;
 $hscroll-nav-nrml-width: 40px !default;
+$hscroll-nav-bgr-left: 50px !default;
+$hscroll-nav-bgr-right: 50px !default;
 $hscroll-nav-bgr-width: 50px !default;
 $hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
 $hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
@@ -30,6 +35,9 @@ $hscroll-device-arrow-size: 14px !default;
 $hscroll-device-arrow-icon-size: 12px !default;
 $hscroll-device-arrow-size-bigger: 14px !default;
 $hscroll-device-arrow-width: 52px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
 
 $hscroll-default-icon-color: $grey-light-font !default;
 $hscroll-hover-bg: $grey-e6 !default;

package/styles/h-scroll/_bootstrap4-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
 /*! component's theme wise override definitions and variables */
 $hscroll-skin: 'bootstrap4' !default;
@@ -11,6 +13,8 @@ $hscroll-nav-nrml-minheight: 38px !default;
 $hscroll-nav-bgr-minheight: 50px !default;
 $hscroll-mob-nav-nrml-width: 50px !default;
 $hscroll-nav-nrml-width: 32px !default;
+$hscroll-nav-bgr-left: 38px !default;
+$hscroll-nav-bgr-right: 38px !default;
 $hscroll-nav-bgr-width: 38px !default;
 $hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
 $hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
@@ -32,6 +36,9 @@ $hscroll-device-arrow-size: 14px !default;
 $hscroll-device-arrow-icon-size: 12px !default;
 $hscroll-device-arrow-size-bigger: 14px !default;
 $hscroll-device-arrow-width: 52px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
 
 $hscroll-default-icon-color: #333 !default;
 $hscroll-hover-bg: color.adjust($gray-600, $lightness: -7.5%) !default;

package/styles/h-scroll/_bootstrap5-dark-definition.scss

@@ -1 +1,91 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+
+/*! component's theme wise override definitions and variables */
+$hscroll-skin: 'bootstrap5' !default;
+$border-type: solid;
+$hscroll-hover-font: $icon-color !default;
+$hscroll-active-font-color: $content-text-color-alt2 !default;
+$hscroll-default-bg: $content-bg-color-alt2 !default;
+$hscroll-press-bg: $content-bg-color-alt2 !default;
+$hscroll-active-bg: $content-bg-color-alt2 !default;
+$hscroll-border-size: 1px !default;
+$hscroll-nav-nrml-minheight: 38px !default;
+$hscroll-nav-bgr-minheight: 46px !default;
+$hscroll-mob-nav-nrml-width: 40px !default;
+$hscroll-nav-nrml-width: 32px !default;
+$hscroll-nav-bgr-left: 38px !default;
+$hscroll-nav-bgr-right: 38px !default;
+$hscroll-nav-bgr-width: 38px !default;
+$hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
+$hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
+$hscroll-border-type: $border-type !default;
+$hscroll-box-shadow: none !default;
+$hscroll-hover-bg: $content-bg-color-alt3 !default;
+$hscroll-hover-border-color: $border-light !default;
+$hscroll-default-icon-color: $icon-color !default;
+$hscroll-focus-border: 0 !default;
+$hscroll-active-border: 0 !default;
+$hscroll-hover-border: 0 !default;
+$hscroll-active-box-shadow: none !default;
+$hscroll-overlay-opacity: .5 !default;
+$hscroll-overlay-bg: $content-bg-color-alt2 !default;
+$hscroll-overlay-start: rgba($hscroll-overlay-bg, 0) !default;
+$hscroll-overlay-end: rgba($hscroll-overlay-bg, 1) !default;
+$hscroll-right-bg: linear-gradient(-270deg, $hscroll-overlay-start 0%, $hscroll-overlay-end 100%) !default;
+$hscroll-left-bg:  linear-gradient(-270deg, $hscroll-overlay-end 0%, $hscroll-overlay-start 100%) !default;
+
+$hscroll-device-arrow-box-shadow: $shadow !default;
+$hscroll-device-arrow-rtl-box-shadow: $shadow !default;
+$hscroll-device-arrow-bg: $content-bg-color-alt2 !default;
+$hscroll-device-arrow-border-size: 1px !default;
+$hscroll-device-arrow-border-color: $border-light !default;
+$hscroll-device-arrow-color: $icon-color !default;
+$hscroll-device-arrow-size: 18px !default;
+$hscroll-device-arrow-icon-size: 18px !default;
+$hscroll-device-arrow-size-bigger: 22px !default;
+$hscroll-device-arrow-width: 48px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
+
+$hscroll-default-border: $hscroll-hover-border-color !default;
+$hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;
+$hscroll-ribble-animation-shadow-frame: 0 0 0 0 $hscroll-ribble-animation-border-frame !default;
+$hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !default;
+
+$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
+$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
+$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
+$hscroll-nav-focus-border: $hscroll-focus-border !default;
+$hscroll-nav-active-color: $hscroll-default-icon-color !default;
+
+@mixin hscroll-btn-animation {
+  background-color: transparent;
+  border-radius: 50%;
+  border-width: 1px;
+  box-sizing: border-box;
+  content: '';
+  height: 1px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  visibility: hidden;
+  width: 1px;
+}
+
+@mixin hscroll-btn-animation-after {
+  animation: hscroll-popup-shadow .6s ease-out 0ms;
+  visibility: visible;
+}
+
+@keyframes hscroll-popup-shadow {
+  0% {
+    border-color: $hscroll-ribble-animation-border-frame;
+    box-shadow: $hscroll-ribble-animation-shadow-frame;
+  }
+
+  100% {
+    box-shadow: $hscroll-ribble-animation-shadow-frame-end;
+  }
+}

package/styles/h-scroll/_bootstrap5-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
+
 /*! component's theme wise override definitions and variables */
 $hscroll-skin: 'bootstrap5' !default;
 $border-type: solid;
@@ -11,6 +14,8 @@ $hscroll-nav-nrml-minheight: 38px !default;
 $hscroll-nav-bgr-minheight: 46px !default;
 $hscroll-mob-nav-nrml-width: 40px !default;
 $hscroll-nav-nrml-width: 32px !default;
+$hscroll-nav-bgr-left: 38px !default;
+$hscroll-nav-bgr-right: 38px !default;
 $hscroll-nav-bgr-width: 38px !default;
 $hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
 $hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
@@ -40,6 +45,9 @@ $hscroll-device-arrow-size: 18px !default;
 $hscroll-device-arrow-icon-size: 18px !default;
 $hscroll-device-arrow-size-bigger: 22px !default;
 $hscroll-device-arrow-width: 48px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
 
 $hscroll-default-border: $hscroll-hover-border-color !default;
 $hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;

package/styles/h-scroll/_bootstrap5.3-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
+
 /*! component's theme wise override definitions and variables */
 $hscroll-skin: 'bootstrap5.3' !default;
 $border-type: solid;
@@ -11,6 +14,8 @@ $hscroll-nav-nrml-minheight: 38px !default;
 $hscroll-nav-bgr-minheight: 46px !default;
 $hscroll-mob-nav-nrml-width: 40px !default;
 $hscroll-nav-nrml-width: 32px !default;
+$hscroll-nav-bgr-left: 38px !default;
+$hscroll-nav-bgr-right: 38px !default;
 $hscroll-nav-bgr-width: 38px !default;
 $hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
 $hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
@@ -40,6 +45,9 @@ $hscroll-device-arrow-size: 18px !default;
 $hscroll-device-arrow-icon-size: 18px !default;
 $hscroll-device-arrow-size-bigger: 18px !default;
 $hscroll-device-arrow-width: 48px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
 
 $hscroll-default-border: $hscroll-hover-border-color !default;
 $hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;
@@ -54,7 +62,7 @@ $hscroll-nav-active-color: $secondary-text-color-pressed !default;
 
 @mixin hscroll-btn-animation {
   background-color: transparent;
-  border-radius: 50%;
+  border-radius: $border-radius-50p;
   border-width: 1px;
   box-sizing: border-box;
   content: '';

package/styles/h-scroll/_fabric-dark-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
+
 //default
 $hscroll-skin: 'fabric' !default;
 $hscroll-default-bg: $neutral-lighter !default;
@@ -27,6 +30,8 @@ $hscroll-border-type: solid !default;
 $hscroll-hover-font: $hover-font-color !default;
 $hscroll-active-font-color: $active-font-color !default;
 $hscroll-nav-nrml-width: 40px !default;
+$hscroll-nav-bgr-left: 50px !default;
+$hscroll-nav-bgr-right: 50px !default;
 $hscroll-nav-bgr-width: 50px !default;
 $hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
 $hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
@@ -40,6 +45,9 @@ $hscroll-active-border: 0 !default;
 $hscroll-hover-border: 0 !default;
 $hscroll-active-box-shadow: none !default;
 $hscroll-default-icon-color: $theme-primary-font !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
 
 $hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
 $hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;

package/styles/h-scroll/_fabric-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
 $hscroll-skin: 'fabric' !default;
 $hscroll-border-type: solid !default;
 $hscroll-hover-font: $hover-font-color !default;
@@ -9,6 +11,8 @@ $hscroll-nav-nrml-minheight: 40px !default;
 $hscroll-nav-bgr-minheight: 50px !default;
 $hscroll-mob-nav-nrml-width: 50px !default;
 $hscroll-nav-nrml-width: 40px !default;
+$hscroll-nav-bgr-left: 50px !default;
+$hscroll-nav-bgr-right: 50px !default;
 $hscroll-nav-bgr-width: 50px !default;
 $hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
 $hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
@@ -39,6 +43,9 @@ $hscroll-device-arrow-size: 14px !default;
 $hscroll-device-arrow-icon-size: 14px !default;
 $hscroll-device-arrow-size-bigger: 18px !default;
 $hscroll-device-arrow-width: 52px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
 
 $hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
 $hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;

package/styles/h-scroll/_fluent-dark-definition.scss

@@ -1 +1,91 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+
+/*! component's theme wise override definitions and variables */
+$hscroll-skin: 'FluentUI' !default;
+$border-type: solid;
+$hscroll-hover-font: $icon-color !default;
+$hscroll-active-font-color: $content-text-color-alt2 !default;
+$hscroll-default-bg: $content-bg-color-alt2 !default;
+$hscroll-press-bg: $content-bg-color-alt2 !default;
+$hscroll-active-bg: $content-bg-color-alt2 !default;
+$hscroll-border-size: 1px !default;
+$hscroll-nav-nrml-minheight: 38px !default;
+$hscroll-nav-bgr-minheight: 48px !default;
+$hscroll-mob-nav-nrml-width: 40px !default;
+$hscroll-nav-nrml-width: 28px !default;
+$hscroll-nav-bgr-left: 48px !default;
+$hscroll-nav-bgr-right: 48px !default;
+$hscroll-nav-bgr-width: 48px !default;
+$hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
+$hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
+$hscroll-border-type: $border-type !default;
+$hscroll-box-shadow: none !default;
+$hscroll-hover-bg: $content-bg-color-alt3 !default;
+$hscroll-hover-border-color: $border-light !default;
+$hscroll-default-icon-color: $icon-color !default;
+$hscroll-focus-border: 0 !default;
+$hscroll-active-border: 0 !default;
+$hscroll-hover-border: 0 !default;
+$hscroll-active-box-shadow: none !default;
+$hscroll-overlay-opacity: .5 !default;
+$hscroll-overlay-bg: $content-bg-color-alt2 !default;
+$hscroll-overlay-start: rgba($hscroll-overlay-bg, 0) !default;
+$hscroll-overlay-end: rgba($hscroll-overlay-bg, 1) !default;
+$hscroll-right-bg: linear-gradient(-270deg, $hscroll-overlay-start 0%, $hscroll-overlay-end 100%) !default;
+$hscroll-left-bg:  linear-gradient(-270deg, $hscroll-overlay-end 0%, $hscroll-overlay-start 100%) !default;
+
+$hscroll-device-arrow-box-shadow: $shadow !default;
+$hscroll-device-arrow-rtl-box-shadow: $shadow !default;
+$hscroll-device-arrow-bg: $content-bg-color-alt2 !default;
+$hscroll-device-arrow-border-size: 1px !default;
+$hscroll-device-arrow-border-color: $border-light !default;
+$hscroll-device-arrow-color: $icon-color !default;
+$hscroll-device-arrow-size: 18px !default;
+$hscroll-device-arrow-icon-size: 12px !default;
+$hscroll-device-arrow-size-bigger: 22px !default;
+$hscroll-device-arrow-width: 48px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
+
+$hscroll-default-border: $hscroll-hover-border-color !default;
+$hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;
+$hscroll-ribble-animation-shadow-frame: 0 0 0 0 $hscroll-ribble-animation-border-frame !default;
+$hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !default;
+
+$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
+$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
+$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
+$hscroll-nav-focus-border: $hscroll-focus-border !default;
+$hscroll-nav-active-color: $hscroll-default-icon-color !default;
+
+@mixin hscroll-btn-animation {
+  background-color: transparent;
+  border-radius: 50%;
+  border-width: 1px;
+  box-sizing: border-box;
+  content: '';
+  height: 1px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  visibility: hidden;
+  width: 1px;
+}
+
+@mixin hscroll-btn-animation-after {
+  animation: hscroll-popup-shadow .6s ease-out 0ms;
+  visibility: visible;
+}
+
+@keyframes hscroll-popup-shadow {
+  0% {
+    border-color: $hscroll-ribble-animation-border-frame;
+    box-shadow: $hscroll-ribble-animation-shadow-frame;
+  }
+
+  100% {
+    box-shadow: $hscroll-ribble-animation-shadow-frame-end;
+  }
+}

package/styles/h-scroll/_fluent-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fluent' as *;
+@forward 'ej2-base/styles/definition/fluent';
+
 /*! component's theme wise override definitions and variables */
 $hscroll-skin: 'FluentUI' !default;
 $border-type: solid;
@@ -11,6 +14,8 @@ $hscroll-nav-nrml-minheight: 38px !default;
 $hscroll-nav-bgr-minheight: 48px !default;
 $hscroll-mob-nav-nrml-width: 40px !default;
 $hscroll-nav-nrml-width: 28px !default;
+$hscroll-nav-bgr-left: 48px !default;
+$hscroll-nav-bgr-right: 48px !default;
 $hscroll-nav-bgr-width: 48px !default;
 $hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
 $hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
@@ -40,6 +45,9 @@ $hscroll-device-arrow-size: 18px !default;
 $hscroll-device-arrow-icon-size: 12px !default;
 $hscroll-device-arrow-size-bigger: 22px !default;
 $hscroll-device-arrow-width: 48px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
 
 $hscroll-default-border: $hscroll-hover-border-color !default;
 $hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;

package/styles/h-scroll/_fluent2-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@forward 'ej2-base/styles/definition/fluent2';
+
 /*! component's theme wise override definitions and variables */
 $hscroll-skin: $skin-name !default;
 $border-type: solid;
@@ -11,6 +14,8 @@ $hscroll-nav-nrml-minheight: 40px !default;
 $hscroll-nav-bgr-minheight: 48px !default;
 $hscroll-mob-nav-nrml-width: 40px !default;
 $hscroll-nav-nrml-width: 28px !default;
+$hscroll-nav-bgr-left: 40px !default;
+$hscroll-nav-bgr-right: 40px !default;
 $hscroll-nav-bgr-width: 40px !default;
 $hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
 $hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
@@ -40,6 +45,9 @@ $hscroll-device-arrow-size: 18px !default;
 $hscroll-device-arrow-icon-size: 16px !default;
 $hscroll-device-arrow-size-bigger: 18px !default;
 $hscroll-device-arrow-width: 48px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
 
 $hscroll-default-border: $hscroll-hover-border-color !default;
 $hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;
@@ -54,7 +62,7 @@ $hscroll-nav-active-color: $icon-color-pressed !default;
 
 @mixin hscroll-btn-animation {
   background-color: transparent;
-  border-radius: 50%;
+  border-radius: $border-radius-50p;
   border-width: 1px;
   box-sizing: border-box;
   content: '';

package/styles/h-scroll/_fusionnew-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fusionnew' as *;
+@forward 'ej2-base/styles/definition/fusionnew';
+
 /*! component's theme wise override definitions and variables */
 $hscroll-skin: 'bootstrap5' !default;
 $border-type: solid;
@@ -11,6 +14,8 @@ $hscroll-nav-nrml-minheight: 38px !default;
 $hscroll-nav-bgr-minheight: 46px !default;
 $hscroll-mob-nav-nrml-width: 40px !default;
 $hscroll-nav-nrml-width: 32px !default;
+$hscroll-nav-bgr-left: 38px !default;
+$hscroll-nav-bgr-right: 38px !default;
 $hscroll-nav-bgr-width: 38px !default;
 $hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
 $hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
@@ -40,6 +45,9 @@ $hscroll-device-arrow-size: 18px !default;
 $hscroll-device-arrow-icon-size: 18px !default;
 $hscroll-device-arrow-size-bigger: 22px !default;
 $hscroll-device-arrow-width: 48px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
 
 $hscroll-default-border: $hscroll-hover-border-color !default;
 $hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;

package/styles/h-scroll/_highcontrast-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
 $hscroll-skin: 'highcontrast' !default;
 $hscroll-border-type: solid !default;
 $hscroll-hover-font: $hover-font-color !default;
@@ -9,6 +11,8 @@ $hscroll-nav-nrml-minheight: 40px !default;
 $hscroll-nav-bgr-minheight: 50px !default;
 $hscroll-mob-nav-nrml-width: 50px !default;
 $hscroll-nav-nrml-width: 40px !default;
+$hscroll-nav-bgr-left: 50px !default;
+$hscroll-nav-bgr-right: 50px !default;
 $hscroll-nav-bgr-width: 50px !default;
 $hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
 $hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
@@ -42,6 +46,9 @@ $hscroll-device-arrow-size: 14px !default;
 $hscroll-device-arrow-icon-size: 12px !default;
 $hscroll-device-arrow-size-bigger: 18px !default;
 $hscroll-device-arrow-width: 52px !default;
+$hscroll-border-none: 0 !default;
+$hscroll-item-height: inherit !default;
+$hscroll-item-line-height: normal !default;
 
 $hscroll-nav-hover-press-bg: $hscroll-press-bg !default;
 $hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;