@syncfusion/ej2-dropdowns 33.2.12 → 34.1.29

package/styles/mention/material3-dark.scss

@@ -1,6 +1,2 @@
-@use 'ej2-base/styles/definition/material3-dark' as *;
-@use 'ej2-popups/styles/popup/material3-dark-definition' as *;
-@use 'ej2-popups/styles/spinner/material3-dark-definition' as *;
-@use '../drop-down-base/material3-dark-definition' as *;
 @use 'material3-dark-definition' as *;
-@use 'all.material3-dark' as *;
+@use 'all' as *;

package/styles/mention/material3.css

@@ -1,3 +1,4 @@
+/* stylelint-disable-line no-empty-source */
 
 
 
@@ -80,59 +81,3 @@
 /* 14px */
 /* 15px */
 /* 16px */
-
-
-/* stylelint-disable-line no-empty-source */
-/* stylelint-disable property-no-vendor-prefix */
-@-webkit-keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 16px;
-          padding-inline-end: 16px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 12px;
-          padding-inline-end: 12px;
-}
-
-/* stylelint-disable-line no-empty-source */
-/* stylelint-disable-line no-empty-source */

package/styles/mention/material3.scss

@@ -1,6 +1,2 @@
-@use 'ej2-base/styles/definition/material3' as *;
-@use 'ej2-popups/styles/popup/material3-definition' as *;
-@use 'ej2-popups/styles/spinner/material3-definition' as *;
-@use '../drop-down-base/material3-definition' as *;
 @use 'material3-definition' as *;
-@use 'all.material3' as *;
+@use 'all' as *;

package/styles/mention/tailwind-dark.css

@@ -1,69 +0,0 @@
-/* stylelint-disable-line no-empty-source */
-/* stylelint-disable property-no-vendor-prefix */
-@-webkit-keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-.e-dropdownbase .e-list-item.e-active,
-.e-dropdownbase .e-list-item.e-active.e-hover {
-  font-weight: 500;
-}
-
-.e-dropdownbase .e-list-group-item,
-.e-fixed-head {
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
-.e-small .e-dropdownbase .e-list-group-item,
-.e-small .e-fixed-head,
-.e-small.e-dropdownbase .e-list-group-item,
-.e-small.e-fixed-head {
-  font-size: 10px;
-}
-
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 4px;
-          padding-inline-end: 4px;
-}

package/styles/mention/tailwind-dark.scss

@@ -1,6 +1,2 @@
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
-@use 'ej2-popups/styles/popup/tailwind-dark-definition' as *;
-@use 'ej2-popups/styles/spinner/tailwind-dark-definition' as *;
-@use '../drop-down-base/tailwind-dark-definition' as *;
 @use 'tailwind-dark-definition' as *;
-@use 'all.tailwind-dark' as *;
+@use 'all' as *;

package/styles/mention/tailwind.css

@@ -1,72 +1 @@
-/* stylelint-disable-line no-empty-source */
-/* stylelint-disable property-no-vendor-prefix */
-@-webkit-keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-.e-dropdownbase .e-list-item.e-active,
-.e-dropdownbase .e-list-item.e-active.e-hover {
-  font-weight: 500;
-}
-
-.e-dropdownbase .e-list-group-item,
-.e-fixed-head {
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
-.e-small .e-dropdownbase .e-list-group-item,
-.e-small .e-fixed-head,
-.e-small.e-dropdownbase .e-list-group-item,
-.e-small.e-fixed-head {
-  font-size: 10px;
-}
-
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 4px;
-          padding-inline-end: 4px;
-}
-
-/* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */

package/styles/mention/tailwind.scss

@@ -1,6 +1,2 @@
-@use 'ej2-base/styles/definition/tailwind' as *;
-@use 'ej2-popups/styles/popup/tailwind-definition' as *;
-@use 'ej2-popups/styles/spinner/tailwind-definition' as *;
-@use '../drop-down-base/tailwind-definition' as *;
 @use 'tailwind-definition' as *;
-@use 'all.tailwind' as *;
+@use 'all' as *;

package/styles/mention/tailwind3.css

@@ -1,3 +1,4 @@
+/* stylelint-disable-line no-empty-source */
 
 
 
@@ -70,71 +71,3 @@
 /* 49px */
 /* 50px */
 /* 5em */
-
-
-/* stylelint-disable-line no-empty-source */
-/* stylelint-disable property-no-vendor-prefix */
-@-webkit-keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-.e-dropdownbase .e-list-group-item,
-.e-fixed-head {
-  font-size: 12px;
-}
-
-.e-small .e-dropdownbase .e-list-group-item,
-.e-small .e-fixed-head,
-.e-small.e-dropdownbase .e-list-group-item,
-.e-small.e-fixed-head {
-  font-size: 10px;
-}
-
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 6px;
-          padding-inline-end: 6px;
-}
-
-/* stylelint-disable-line no-empty-source */
-/* stylelint-disable-line no-empty-source */

package/styles/mention/tailwind3.scss

@@ -1,6 +1,2 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@use 'ej2-popups/styles/popup/tailwind3-definition' as *;
-@use 'ej2-popups/styles/spinner/tailwind3-definition' as *;
-@use '../drop-down-base/tailwind3-definition' as *;
 @use 'tailwind3-definition' as *;
-@use 'all.tailwind3' as *;
+@use 'all' as *;

package/styles/multi-select/_all.scss

@@ -1,2 +1,2 @@
-@use 'layout' as *;
-@use 'theme' as *;
+@forward 'layout';
+@forward 'theme';

package/styles/multi-select/_bds-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bds' as *;
-@forward 'ej2-base/styles/definition/bds';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-chip-mobile-close-font: 16px !default;
 $ddl-multiselect-skin-name: $skin-name !default;
 $ddl-delim-font-size: $text-sm !default;
@@ -218,9 +217,10 @@ $ddl-bigger-small-input-height: 32px !default;
 $ddl-delim-bigger-small-font-size: $text-sm !default;
 $ddl-delimviewheight-bigger-small: 32px !default;
 $ddl-closer-margin-top-bigger-small: -1.64em !default;
+$ddl-list-padding-right: 16px !default;
+$ddl-list-rtl-padding-left: 16px !default;
 
 // color
-
 $ddl-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
 $ddl-chip-selected-shadow-value: 0 2px 3px 1px $ddl-list-box-shadow-color !default;
 $ddl-chip-mobile-font: $content-text-color !default;

package/styles/multi-select/_bigger.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('multiselect-bigger') {
   .e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon,
   .e-bigger.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
@@ -519,7 +519,7 @@
 
   .e-bigger {
     .e-multiselect.e-outline .e-multi-select-wrapper,
-    #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
+    &.e-multiselect.e-outline .e-multi-select-wrapper {
       @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
         min-height: $outline-multiselect-bigger-height;
         padding: $outline-multiselect-bigger-overall-padding;
@@ -527,7 +527,7 @@
     }
 
     .e-small {
-      #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
+      &.e-multiselect.e-outline .e-multi-select-wrapper {
         @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
           min-height: $ddl-outline-multiselect-height;
           padding: $outline-multiselect-overall-padding;
@@ -535,9 +535,9 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-small {
+    &.e-small {
       .e-multiselect.e-outline .e-multi-select-wrapper,
-      #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
+      &.e-multiselect.e-outline .e-multi-select-wrapper {
         @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
           min-height: $ddl-outline-multiselect-height;
           padding: $outline-multiselect-overall-padding;
@@ -548,7 +548,7 @@
 
   .e-small {
     .e-bigger {
-      #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
+      &.e-multiselect.e-outline .e-multi-select-wrapper {
         @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
           min-height: $ddl-outline-multiselect-height;
           padding: $outline-multiselect-overall-padding;
@@ -556,7 +556,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-bigger {
+    &.e-bigger {
       .e-multiselect.e-outline .e-multi-select-wrapper {
         @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
           min-height: $ddl-outline-multiselect-height;
@@ -1565,10 +1565,10 @@
   }
   @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
     #{&}.e-popup {
-      #{if(&, '&', '*')}.e-multi-select-list-wrapper {
-        #{if(&, '&', '*')}.e-ddl,
-        .e-bigger #{if(&, '&', '*')}.e-ddl {
-          #{if(&, '&', '*')}.e-checkbox .e-filter-parent .e-clear-icon {
+      &.e-multi-select-list-wrapper {
+        &.e-ddl,
+        .e-bigger &.e-ddl {
+          &.e-checkbox .e-filter-parent .e-clear-icon {
             padding-left: 0;
           }
         }

package/styles/multi-select/_bootstrap-dark-definition.scss

@@ -1,6 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $ddl-chip-mobile-close-font: 16px !default;
@@ -160,6 +158,8 @@ $ddl-bgr-filled-float-input-wrapper-padding: 19px 12px 0 16px !default;
 $ddl-bgr-small-filled-float-wrapper-padding: 11px 12px 0 !default;
 $ddl-multiselect-zero-padding-margin: 0 !default;
 $ddl-small-float-input-wrapper: 3px 12px 0 4px !default;
+$ddl-list-padding-right: 20px !default;
+$ddl-list-rtl-padding-left: 20px !default;
 
 $ddl-multi-wrapper-down-icon-padding: 0 48px 0 0 !default;
 $ddl-wrapper-down-icon-padding: 0 0 0 48px !default;

package/styles/multi-select/_bootstrap-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bootstrap' as *;
-@forward 'ej2-base/styles/definition/bootstrap';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-chip-mobile-close-font: 16px !default;
 
 $ddl-multiselect-skin-name: 'bootstrap' !default;
@@ -209,6 +208,8 @@ $ddl-bigger-small-input-height: 34px !default;
 $ddl-delim-bigger-small-font-size: 14px !default;
 $ddl-delimviewheight-bigger-small: 34px !default;
 $ddl-closer-margin-top-bigger-small: -4em !default;
+$ddl-list-padding-right: 20px !default;
+$ddl-list-rtl-padding-left: 20px !default;
 
 $ddl-bigger-small-filled-chip-height: 28px !default;
 $ddl-bigger-filled-chip-height: 24px !default;

package/styles/multi-select/_bootstrap4-definition.scss

@@ -1,7 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bootstrap4' as *;
-@forward 'ej2-base/styles/definition/bootstrap4';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $ddl-chip-mobile-close-font: 16px !default;
 $ddl-multiselect-skin-name: 'bootstrap4' !default;
@@ -213,6 +211,8 @@ $ddl-chip-close-hooker-small-left: 4px !default;
 $ddl-chip-close-hooker-small-bigger-left: 4px !default;
 $ddl-chip-close-hooker-small-top: 7px !default;
 $ddl-delimviewheight-small: 22px !default;
+$ddl-list-padding-right: 24px !default;
+$ddl-list-rtl-padding-left: 24px !default;
 
 // Touch Small size
 $ddl-select-all-height-bigger-small: 34px !default;

package/styles/multi-select/_bootstrap5-dark-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap5-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-chip-mobile-close-font: 16px !default;
 $ddl-multiselect-skin-name: $skin-name !default;
 $ddl-delim-font-size: $text-sm !default;
@@ -237,6 +236,8 @@ $ddl-multi-list-hover-bg-color: $content-bg-color-hover !default;
 $ddl-delim-font-color: $content-text-color !default;
 $ddl-close-icon-color: $content-text-color !default;
 $ddl-close-down-icon-left: 35px !default;
+$ddl-list-padding-right: 16px !default;
+$ddl-list-rtl-padding-left: 16px !default;
 
 $ddl-bigger-small-filled-chip-height: 28px !default;
 $ddl-bigger-filled-chip-height: 24px !default;

package/styles/multi-select/_bootstrap5-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bootstrap5' as *;
-@forward 'ej2-base/styles/definition/bootstrap5';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-chip-mobile-close-font: 16px !default;
 $ddl-multiselect-skin-name: $skin-name !default;
 $ddl-delim-font-size: $text-sm !default;
@@ -188,6 +187,8 @@ $ddl-multiselect-filled-input-min-height-small: 32px !default;
 $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
 $ddl-multiselect-filled-chip-clear-icon-size-small: 10px !default;
+$ddl-list-padding-right: 16px !default;
+$ddl-list-rtl-padding-left: 16px !default;
 
 // Touch
 $ddl-multiselect-filled-input-min-height-bigger: 52px !default;

package/styles/multi-select/_bootstrap5.3-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bootstrap5.3' as *;
-@forward 'ej2-base/styles/definition/bootstrap5.3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-chip-mobile-close-font: 16px !default;
 $ddl-multiselect-skin-name: $skin-name !default;
 $ddl-delim-font-size: $text-sm !default;
@@ -188,6 +187,8 @@ $ddl-multiselect-filled-input-min-height-small: 32px !default;
 $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
 $ddl-multiselect-filled-chip-clear-icon-size-small: 10px !default;
+$ddl-list-padding-right: 16px !default;
+$ddl-list-rtl-padding-left: 16px !default;
 
 // Touch
 $ddl-multiselect-filled-input-min-height-bigger: 52px !default;

package/styles/multi-select/_fabric-dark-definition.scss

@@ -1,6 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/fabric-dark' as *;
-@forward 'ej2-base/styles/definition/fabric-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $ddl-chip-mobile-close-font: 16px !default;
@@ -209,6 +207,8 @@ $ddl-bigger-small-input-height: 34px !default;
 $ddl-delim-bigger-small-font-size: 14px !default;
 $ddl-delimviewheight-bigger-small: 34px !default;
 $ddl-closer-margin-top-bigger-small: -3.2em !default;
+$ddl-list-padding-right: 16px !default;
+$ddl-list-rtl-padding-left: 16px !default;
 
 $ddl-bigger-small-filled-chip-height: 28px !default;
 $ddl-bigger-filled-chip-height: 24px !default;

package/styles/multi-select/_fabric-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/fabric' as *;
-@forward 'ej2-base/styles/definition/fabric';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-chip-mobile-close-font: 16px !default;
 
 $ddl-multiselect-skin-name: 'fabric' !default;
@@ -179,6 +178,8 @@ $ddl-small-filled-float-chiupcontent-font-size: 10px !default;
 $ddl-filled-float-mob-chipcontent-font-size: 13px !default;
 $ddl-filled-float-mob-chipcontent-padding-right: 4px !default;
 $ddl-filled-wrapper-chip-close-margin-top: -38px !default;
+$ddl-list-padding-right: 16px !default;
+$ddl-list-rtl-padding-left: 16px !default;
 
 // Small size
 $ddl-select-all-height-small: 26px !default;

package/styles/multi-select/_fluent-dark-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/fluent-dark' as *;
-@forward 'ej2-base/styles/definition/fluent-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-chip-mobile-close-font: 16px !default;
 $ddl-multiselect-skin-name: $skin-name !default;
 $ddl-delim-font-size: $text-sm !default;
@@ -248,6 +247,8 @@ $ddl-list-header-font-color: $primary-outline !default;
 $ddl-closer-hooker-font-small: 8px !default;
 $ddl-small-clear-icon-height: 12px !default;
 $ddl-small-clear-icon-width: 12px !default;
+$ddl-list-padding-right: 16px !default;
+$ddl-list-rtl-padding-left: 16px !default;
 
 $ddl-bigger-small-filled-chip-height: 28px !default;
 $ddl-bigger-filled-chip-height: 24px !default;

package/styles/multi-select/_fluent-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/fluent' as *;
-@forward 'ej2-base/styles/definition/fluent';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-chip-mobile-close-font: 16px !default;
 $ddl-multiselect-skin-name: $skin-name !default;
 $ddl-delim-font-size: $text-sm !default;
@@ -215,6 +214,8 @@ $ddl-delimviewheight-bigger-small: 28px !default;
 $ddl-closer-margin-top-bigger-small: -2.4em !default;
 $ddl-biggersmall-chip-down-icon-font: 12px !default;
 $ddl-close-icon-bigger-right: 42px !default;
+$ddl-list-padding-right: 16px !default;
+$ddl-list-rtl-padding-left: 16px !default;
 
 // color
 

package/styles/multi-select/_fluent2-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/fluent2' as *;
-@forward 'ej2-base/styles/definition/fluent2';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-chip-mobile-close-font: 16px !default;
 $ddl-multiselect-skin-name: 'fluent2' !default;
 $ddl-multiselect-skin-name: $skin-name !default;
@@ -183,6 +182,8 @@ $ddl-small-filled-float-chiupcontent-font-size: 10px !default;
 $ddl-filled-float-mob-chipcontent-font-size: 13px !default;
 $ddl-filled-float-mob-chipcontent-padding-right: 4px !default;
 $ddl-filled-wrapper-chip-close-margin-top: -38px !default;
+$ddl-list-padding-right: 16px !default;
+$ddl-list-rtl-padding-left: 16px !default;
 
 // Small size
 $ddl-select-all-height-small: 24px !default;

package/styles/multi-select/_fusionnew-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/fusionnew' as *;
-@forward 'ej2-base/styles/definition/fusionnew';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-chip-mobile-close-font: 16px !default;
 $ddl-multiselect-skin-name: $skin-name !default;
 $ddl-delim-font-size: $text-sm !default;
@@ -207,6 +206,8 @@ $ddl-bigger-small-input-height: 32px !default;
 $ddl-delim-bigger-small-font-size: 13px !default;
 $ddl-delimviewheight-bigger-small: 28px !default;
 $ddl-closer-margin-top-bigger-small: -2em !default;
+$ddl-list-padding-right: 16px !default;
+$ddl-list-rtl-padding-left: 16px !default;
 
 // color