@syncfusion/ej2-navigations 31.2.16 → 32.1.19

package/styles/treeview/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable */
 .e-filled.e-float-input.e-error label.e-float-text,
@@ -15,6 +85,54 @@
   color: var(--color-sf-danger) !important;
 }
 
+.e-underline.e-input-group.e-control-wrapper,
+.e-underline.e-input-group,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-float-input,
+.e-underline.e-float-input.e-control-wrapper,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid var(--color-sf-border);
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
+.e-filled.e-input-group,
+.e-filled.e-input-group.e-control-wrapper {
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  padding: 0 10px 0 12px;
+}
+
+.e-filled.e-float-input,
+.e-filled.e-float-input.e-control-wrapper {
+  border: 1px solid;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  border-width: 1px;
+  margin-top: 0;
+  padding: 0;
+}
+
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid;
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
@@ -69,7 +187,7 @@
   white-space: nowrap;
   border: 1px solid;
   border-color: var(--color-sf-border-light);
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
   background: var(--color-sf-content-bg-color);
 }
 .e-treeview.e-virtualization {
@@ -139,7 +257,7 @@
 }
 .e-treeview .e-list-item div.e-icons.interaction {
   -webkit-transition: -webkit-transform 0.3s ease-in-out;
-  border-radius: 15px;
+  border-radius: calc(var(--e-radius) * 0.9375);
   transition: -webkit-transform 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
@@ -276,7 +394,7 @@
 .e-treeview .e-icon-collapsible::before,
 .e-treeview .e-icon-expandable::before {
   display: inline-block;
-  padding: 0px;
+  padding: 0;
 }
 .e-treeview .e-load {
   -webkit-animation: rotation 0.5s infinite linear;
@@ -308,7 +426,7 @@
   z-index: 99999;
 }
 .e-treeview .e-popup .e-content {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   border-style: solid;
   border-width: 1px;
   font-size: 14px;
@@ -388,11 +506,11 @@
 .e-treeview.e-drag-item .e-icon-collapsible::before,
 .e-treeview.e-drag-item .e-icon-expandable::before {
   font-size: 16px;
-  padding: 0px 8px;
+  padding: 0 8px;
 }
 .e-treeview.e-drag-item .e-drop-count {
   border: 1px solid;
-  border-radius: 15px;
+  border-radius: calc(var(--e-radius) * 0.9375);
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   font-size: 12px;
@@ -640,7 +758,7 @@
 }
 .e-treeview.e-drag-item {
   background-color: var(--color-sf-content-bg-color-alt4);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
 }
 .e-treeview.e-drag-item .e-icon-collapsible::before,
 .e-treeview.e-drag-item .e-icon-expandable::before {
@@ -664,7 +782,7 @@
 
 .e-bigger .e-treeview,
 .e-treeview.e-bigger {
-  border-radius: 8px;
+  border-radius: calc(var(--e-radius) * 0.5);
 }
 .e-bigger .e-treeview .e-navigable .e-list-text,
 .e-treeview.e-bigger .e-navigable .e-list-text {
@@ -824,4 +942,8 @@
 .e-treeview.e-bigger .e-icon-collapsible::before,
 .e-treeview.e-bigger .e-icon-expandable::before {
   font-size: 24px;
+}
+.e-bigger .e-treeview .e-list-item.e-editing .e-list-text .e-input-group.e-input-focus .e-input,
+.e-treeview.e-bigger .e-list-item.e-editing .e-list-text .e-input-group.e-input-focus .e-input {
+  padding-bottom: 8px;
 }

package/styles/treeview/tailwind3.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-inputs/styles/input/tailwind3-definition.scss';
-@import 'ej2-buttons/styles/check-box/tailwind3-definition.scss';
-@import 'tailwind3-definition.scss';
-@import 'icons/tailwind3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-inputs/styles/input/tailwind3-definition' as *;
+@use 'ej2-buttons/styles/check-box/tailwind3-definition' as *;
+@use 'tailwind3-definition' as *;
+@use 'icons/tailwind3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/v-scroll/_all.scss

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

package/styles/v-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 */
 $vscroll-skin: $skin-name !default;
 $vscroll-nav-nrml-height: 38px !default;

package/styles/v-scroll/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('v-scroll-bigger') {
   .e-bigger #{&}.e-vscroll,
   #{&}.e-vscroll.e-bigger {

package/styles/v-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
 $vscroll-skin: 'bootstrap' !default;
 $vscroll-nav-nrml-height: 40px !default;

package/styles/v-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 */
 $vscroll-skin: 'bootstrap' !default;
 $vscroll-nav-nrml-height: 40px !default;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
+
 /*! component's theme wise override definitions and variables */
 $vscroll-skin: 'bootstrap4' !default;
 $vscroll-nav-nrml-height: 40px !default;

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

@@ -1 +1,52 @@
-@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 */
+$vscroll-skin: 'bootstrap5' !default;
+$vscroll-nav-nrml-height: 38px !default;
+$vscroll-hover-font: $content-text-color-alt2 !default;
+$vscroll-active-font-color: $content-text-color-alt2 !default;
+$vscroll-border-size: 1px !default;
+$vscroll-border-type: solid !default;
+
+$vscroll-default-bg: $content-bg-color-alt2 !default;
+$vscroll-nav-nrml-minheight: 38px !default;
+$vscroll-nav-bgr-minheight: 48px !default;
+$vscroll-nav-nrml-width: 28px !default;
+$vscroll-nav-bgr-width: 48px !default;
+$vscroll-nrml-padding: 0 $vscroll-nav-nrml-width !default;
+$vscroll-bgr-padding: $vscroll-nav-bgr-width 0 !default;
+$vscroll-box-shadow: none !default;
+$vscroll-overlay-opacity: .5 !default;
+$vscroll-overlay-bg: $content-bg-color-alt2 !default;
+$vscroll-overlay-start: rgba($vscroll-overlay-bg, 0) !default;
+$vscroll-overlay-end: rgba($vscroll-overlay-bg, 1) !default;
+$vscroll-right-bg: linear-gradient(-270deg, $vscroll-overlay-start 0%, $vscroll-overlay-end 100%) !default;
+$vscroll-left-bg:  linear-gradient(-270deg, $vscroll-overlay-end 0%, $vscroll-overlay-start 100%) !default;
+
+$vscroll-device-arrow-box-shadow: $shadow !default;
+$vscroll-device-arrow-rtl-box-shadow: $shadow !default;
+$vscroll-device-arrow-bg: $content-bg-color-alt2 !default;
+$vscroll-device-arrow-border-size: 1px !default;
+$vscroll-device-arrow-border-color: $icon-color !default;
+$vscroll-device-arrow-color: $icon-color !default;
+$vscroll-device-arrow-size: 14px !default;
+$vscroll-device-arrow-width: 48px !default;
+
+$vscroll-default-icon-color: $icon-color !default;
+$vscroll-hover-bg: $content-bg-color-alt3 !default;
+$vscroll-press-bg: $content-bg-color-alt3 !default;
+$vscroll-default-border: $icon-color !default;
+$vscroll-focus-border: 0 !default;
+$vscroll-active-border: 0 !default;
+$vscroll-hover-border: 0 !default;
+$vscroll-hover-border-color: transparent !default;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
+
+@mixin vscroll-btn-animation {
+  content: '';
+}
+
+@mixin vscroll-btn-animation-after {
+  content: '';
+}

package/styles/v-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 */
 $vscroll-skin: 'bootstrap5' !default;
 $vscroll-nav-nrml-height: 38px !default;

package/styles/v-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 */
 $vscroll-skin: 'bootstrap5' !default;
 $vscroll-nav-nrml-height: 38px !default;

package/styles/v-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
 $vscroll-skin: 'fabric' !default;
 $vscroll-nav-nrml-height: 40px !default;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
+
 /*! component's theme wise override definitions and variables */
 $vscroll-skin: 'fabric' !default;
 $vscroll-nav-nrml-height: 40px !default;

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

@@ -1 +1,52 @@
-@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 */
+$vscroll-skin: 'FluentUI' !default;
+$vscroll-nav-nrml-height: 38px !default;
+$vscroll-hover-font: $content-text-color-alt2 !default;
+$vscroll-active-font-color: $content-text-color-alt2 !default;
+$vscroll-border-size: 1px !default;
+$vscroll-border-type: solid !default;
+
+$vscroll-default-bg: $content-bg-color-alt2 !default;
+$vscroll-nav-nrml-minheight: 38px !default;
+$vscroll-nav-bgr-minheight: 48px !default;
+$vscroll-nav-nrml-width: 28px !default;
+$vscroll-nav-bgr-width: 48px !default;
+$vscroll-nrml-padding: 0 $vscroll-nav-nrml-width !default;
+$vscroll-bgr-padding: $vscroll-nav-bgr-width 0 !default;
+$vscroll-box-shadow: none !default;
+$vscroll-overlay-opacity: .5 !default;
+$vscroll-overlay-bg: $content-bg-color-alt2 !default;
+$vscroll-overlay-start: rgba($vscroll-overlay-bg, 0) !default;
+$vscroll-overlay-end: rgba($vscroll-overlay-bg, 1) !default;
+$vscroll-right-bg: linear-gradient(-270deg, $vscroll-overlay-start 0%, $vscroll-overlay-end 100%) !default;
+$vscroll-left-bg:  linear-gradient(-270deg, $vscroll-overlay-end 0%, $vscroll-overlay-start 100%) !default;
+
+$vscroll-device-arrow-box-shadow: $shadow !default;
+$vscroll-device-arrow-rtl-box-shadow: $shadow !default;
+$vscroll-device-arrow-bg: $content-bg-color-alt2 !default;
+$vscroll-device-arrow-border-size: 1px !default;
+$vscroll-device-arrow-border-color: $icon-color !default;
+$vscroll-device-arrow-color: $icon-color !default;
+$vscroll-device-arrow-size: 14px !default;
+$vscroll-device-arrow-width: 48px !default;
+
+$vscroll-default-icon-color: $icon-color !default;
+$vscroll-hover-bg: $content-bg-color-alt3 !default;
+$vscroll-press-bg: $content-bg-color-alt3 !default;
+$vscroll-default-border: $icon-color !default;
+$vscroll-focus-border: 0 !default;
+$vscroll-active-border: 0 !default;
+$vscroll-hover-border: 0 !default;
+$vscroll-hover-border-color: transparent !default;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
+
+@mixin vscroll-btn-animation {
+  content: '';
+}
+
+@mixin vscroll-btn-animation-after {
+  content: '';
+}

package/styles/v-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 */
 $vscroll-skin: 'FluentUI' !default;
 $vscroll-nav-nrml-height: 38px !default;

package/styles/v-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 */
 $vscroll-skin: $skin-name !default;
 $vscroll-nav-nrml-height: 38px !default;

package/styles/v-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 */
 $vscroll-skin: 'bootstrap5' !default;
 $vscroll-nav-nrml-height: 38px !default;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
+
 /*! component's theme wise override definitions and variables */
 $vscroll-skin: 'highcontrast' !default;
 $vscroll-nav-nrml-height: 40px !default;

package/styles/v-scroll/_highcontrast-light-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
+
 //default
 $vscroll-skin: 'highcontrast' !default;
 $vscroll-nav-nrml-height: 40px !default;

package/styles/v-scroll/_layout.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('v-scroll') {
 
   /*! v-scroll layout */

package/styles/v-scroll/_material-dark-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
+
 //default
 $vscroll-skin: 'material' !default;
 $vscroll-nav-nrml-height: 40px !default;

package/styles/v-scroll/_material-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/material' as *;
+@forward 'ej2-base/styles/definition/material';
+
 /*! component's theme wise override definitions and variables */
 $vscroll-skin: 'material' !default;
 $vscroll-nav-nrml-height: 40px !default;

package/styles/v-scroll/_material3-dark-definition.scss

@@ -1 +1,52 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+
+/*! component's theme wise override definitions and variables */
+$vscroll-skin: 'material3' !default;
+$vscroll-nav-nrml-height: 48px !default;
+$vscroll-hover-font: $content-bg-color-hover !default;
+$vscroll-active-font-color: rgba($content-bg-color-selected) !default;
+$vscroll-border-size: 1px !default;
+$vscroll-border-type: solid !default;
+
+$vscroll-default-bg: linear-gradient(0deg, rgba(103, 80, 164, .08), rgba(103, 80, 164, .08)), $content-bg-color-alt1 !default;
+$vscroll-nav-nrml-minheight: 48px !default;
+$vscroll-nav-bgr-minheight: 56px !default;
+$vscroll-nav-nrml-width: 40px !default;
+$vscroll-nav-bgr-width: 46px !default;
+$vscroll-nrml-padding: 0 $vscroll-nav-nrml-width !default;
+$vscroll-bgr-padding: $vscroll-nav-bgr-width 0 !default;
+$vscroll-box-shadow: none !default;
+$vscroll-overlay-opacity: .5 !default;
+$vscroll-overlay-bg: rgba($content-bg-color) !default;
+$vscroll-overlay-start: ($vscroll-overlay-bg, 0) !default;
+$vscroll-overlay-end: ($vscroll-overlay-bg, 1) !default;
+$vscroll-right-bg: linear-gradient(-270deg, $vscroll-overlay-start 0%, $vscroll-overlay-end 100%) !default;
+$vscroll-left-bg:  linear-gradient(-270deg, $vscroll-overlay-end 0%, $vscroll-overlay-start 100%) !default;
+
+$vscroll-device-arrow-box-shadow: rgba($shadow) !default;
+$vscroll-device-arrow-rtl-box-shadow: rgba($shadow) !default;
+$vscroll-device-arrow-bg: linear-gradient(0deg, rgba(103, 80, 164, .08), rgba(103, 80, 164, .08)), $content-bg-color-alt1 !default;
+$vscroll-device-arrow-border-size: 1px !default;
+$vscroll-device-arrow-border-color: rgba($icon-color) !default;
+$vscroll-device-arrow-color: rgba($icon-color) !default;
+$vscroll-device-arrow-size: 14px !default;
+$vscroll-device-arrow-width: 48px !default;
+
+$vscroll-default-icon-color: rgba($icon-color) !default;
+$vscroll-hover-bg: $content-bg-color-hover !default;
+$vscroll-press-bg: $content-bg-color-pressed !default;
+$vscroll-default-border: rgba($border-light) !default;
+$vscroll-focus-border: 0 !default;
+$vscroll-active-border: 0 !default;
+$vscroll-hover-border: 0 !default;
+$vscroll-hover-border-color: transparent !default;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
+
+@mixin vscroll-btn-animation {
+  content: '';
+}
+
+@mixin vscroll-btn-animation-after {
+  content: '';
+}

package/styles/v-scroll/_material3-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
+
 /*! component's theme wise override definitions and variables */
 $vscroll-skin: 'material3' !default;
 $vscroll-nav-nrml-height: 48px !default;

package/styles/v-scroll/_tailwind-dark-definition.scss

@@ -1 +1,52 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+
+/*! component's theme wise override definitions and variables */
+$vscroll-skin: 'tailwind' !default;
+$vscroll-nav-nrml-height: 38px !default;
+$vscroll-hover-font: $content-text-color-alt2 !default;
+$vscroll-active-font-color: $content-text-color-alt2 !default;
+$vscroll-border-size: 1px !default;
+$vscroll-border-type: solid !default;
+
+$vscroll-default-bg: $content-bg-color-alt2 !default;
+$vscroll-nav-nrml-minheight: 38px !default;
+$vscroll-nav-bgr-minheight: 48px !default;
+$vscroll-nav-nrml-width: 28px !default;
+$vscroll-nav-bgr-width: 48px !default;
+$vscroll-nrml-padding: 0 $vscroll-nav-nrml-width !default;
+$vscroll-bgr-padding: $vscroll-nav-bgr-width 0 !default;
+$vscroll-box-shadow: none !default;
+$vscroll-overlay-opacity: .5 !default;
+$vscroll-overlay-bg: $content-bg-color-alt2 !default;
+$vscroll-overlay-start: rgba($vscroll-overlay-bg, 0) !default;
+$vscroll-overlay-end: rgba($vscroll-overlay-bg, 1) !default;
+$vscroll-right-bg: linear-gradient(-270deg, $vscroll-overlay-start 0%, $vscroll-overlay-end 100%) !default;
+$vscroll-left-bg:  linear-gradient(-270deg, $vscroll-overlay-end 0%, $vscroll-overlay-start 100%) !default;
+
+$vscroll-device-arrow-box-shadow: $shadow !default;
+$vscroll-device-arrow-rtl-box-shadow: $shadow !default;
+$vscroll-device-arrow-bg: $content-bg-color-alt2 !default;
+$vscroll-device-arrow-border-size: 1px !default;
+$vscroll-device-arrow-border-color: $icon-color !default;
+$vscroll-device-arrow-color: $icon-color !default;
+$vscroll-device-arrow-size: 14px !default;
+$vscroll-device-arrow-width: 48px !default;
+
+$vscroll-default-icon-color: $icon-color !default;
+$vscroll-hover-bg: $content-bg-color-alt3 !default;
+$vscroll-press-bg: $content-bg-color-alt3 !default;
+$vscroll-default-border: $icon-color !default;
+$vscroll-focus-border: 0 !default;
+$vscroll-active-border: 0 !default;
+$vscroll-hover-border: 0 !default;
+$vscroll-hover-border-color: transparent !default;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
+
+@mixin vscroll-btn-animation {
+  content: '';
+}
+
+@mixin vscroll-btn-animation-after {
+  content: '';
+}

package/styles/v-scroll/_tailwind-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
+
 /*! component's theme wise override definitions and variables */
 $vscroll-skin: 'tailwind' !default;
 $vscroll-nav-nrml-height: 38px !default;

package/styles/v-scroll/_tailwind3-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
+
 /*! component's theme wise override definitions and variables */
 $vscroll-skin: 'bootstrap5' !default;
 $vscroll-nav-nrml-height: 38px !default;

package/styles/v-scroll/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/v-scroll/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('v-scroll-theme') {
 
   /*! v-scroll theme */

package/styles/v-scroll/bds.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'bds-definition.scss';
-@import 'icons/bds.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'bds-definition' as *;
+@use 'icons/bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/v-scroll/bootstrap-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'icons/bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/v-scroll/bootstrap.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'bootstrap-definition.scss';
-@import 'icons/bootstrap.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'bootstrap-definition' as *;
+@use 'icons/bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;