@syncfusion/ej2-dropdowns 33.2.12 → 34.1.29

package/styles/combo-box/tailwind.css

@@ -1,71 +1 @@
-.e-ddl.e-control-wrapper .e-ddl-icon::before {
-  -webkit-transform: rotate(0deg);
-          transform: rotate(0deg);
-  -webkit-transition: -webkit-transform 300ms ease;
-  transition: -webkit-transform 300ms ease;
-  transition: transform 300ms ease;
-  transition: transform 300ms ease, -webkit-transform 300ms ease;
-}
-
-.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
-  -webkit-transition: -webkit-transform 300ms ease;
-  transition: -webkit-transform 300ms ease;
-  transition: transform 300ms ease;
-  transition: transform 300ms ease, -webkit-transform 300ms ease;
-}
-
-.e-dropdownbase .e-list-item.e-active.e-hover {
-  color: #111827;
-}
-
-.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
-.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
-.e-input-group:not(.e-disabled) .e-back-icon:active,
-.e-input-group:not(.e-disabled) .e-back-icon:hover,
-.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
-.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
-  background: transparent;
-}
-
-.e-input-group .e-ddl-icon:not(:active)::after {
-  -webkit-animation: none;
-          animation: none;
-}
-
-.e-ddl.e-popup {
-  border: 0;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  margin-top: 4px;
-}
-
-.e-small .e-ddl.e-popup,
-.e-small.e-ddl.e-popup {
-  border-radius: 2px;
-  margin-top: 2px;
-}
-
-.e-popup.e-ddl .e-dropdownbase {
-  min-height: 26px;
-  padding: 4px 0;
-}
-
-.e-input-group.e-ddl,
-.e-input-group.e-ddl .e-input,
-.e-input-group.e-ddl .e-ddl-icon {
-  background: #fff;
-}
-
-.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
-.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
-  border-bottom-width: 0;
-}
-
-.e-ddl.e-popup.e-outline .e-filter-parent {
-  padding: 4px 8px;
-}
-
 /* stylelint-disable-line no-empty-source */

package/styles/combo-box/tailwind.scss

@@ -1,4 +1,2 @@
-@use 'ej2-base/styles/definition/tailwind' as *;
-@use '../drop-down-list/tailwind-definition' as *;
 @use 'tailwind-definition' as *;
-@use 'all.tailwind' as *;
+@use 'all' as *;

package/styles/combo-box/tailwind3.css

@@ -1,171 +1 @@
-
-
-
-
-
-
-
-
-/* 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 */
-
-
-.e-popup.e-ddl {
-  border-radius: calc(var(--e-radius) * 0.25);
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  margin-top: 3px;
-}
-.e-popup.e-ddl .e-input-group {
-  width: auto;
-}
-.e-popup.e-ddl .e-input-group input {
-  line-height: 15px;
-}
-
-.e-popup.e-ddl .e-dropdownbase {
-  min-height: 26px;
-}
-
-.e-popup.e-ddl .e-filter-parent .e-input-group {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  width: auto;
-}
-.e-popup.e-ddl .e-filter-parent .e-input-group .e-back-icon {
-  border: 0;
-}
-
-.e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
-.e-float-input.e-control-wrapper.e-ddl input[readonly] {
-  background: transparent;
-}
-
-.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
-.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
-  background: var(--color-sf-content-bg-color-alt2);
-}
-
-.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
-.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
-.e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
-.e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:hover,
-.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active,
-.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:hover,
-.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
-.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:hover {
-  background: transparent;
-  color: var(--color-sf-icon-color);
-}
-
-.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
-.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
-.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
-.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
-  background: transparent;
-  color: var(--color-sf-icon-color);
-}
-
-.e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
-.e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
-.e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
-.e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
-  background: var(--color-sf-content-bg-color-alt2);
-}
-
-.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
-.e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
-.e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
-.e-control.e-dropdownlist .e-input-group.e-ddl .e-input-group-icon {
-  border: 0;
-}
-
-.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-input-group-icon:active,
-.e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
-.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
-.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-
-.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
-  background: transparent;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
-.e-ddl.e-popup .e-filter-parent .e-input-group,
-.e-ddl.e-popup .e-filter-parent {
-  background: var(--color-sf-content-bg-color);
-}
-
-.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
-  font-size: 14px;
-}
-
 /* stylelint-disable-line no-empty-source */

package/styles/combo-box/tailwind3.scss

@@ -1,4 +1,2 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@use '../drop-down-list/tailwind3-definition' as *;
 @use 'tailwind3-definition' as *;
-@use 'all.tailwind3' as *;
+@use 'all' as *;

package/styles/drop-down-base/_all.scss

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

package/styles/drop-down-base/_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-list-line-height: 32px !default;
 $ddl-header-font-weight: $font-weight-medium !default;
 $ddl-last-child-bottom-border: 0 !default;
@@ -67,7 +66,7 @@ $ddl-list-active-border-color: $content-bg-color !default;
 $mention-popup-bg-color: $content-bg-color !default;
 $ddl-list-active-font-color: $content-text-color !default;
 $mention-active-font-color: $primary !default;
-$ddl-list-active-bg-color: $flyout-bg-color-hover !default;
+$ddl-list-active-bg-color: $cool-gray-200 !default;
 $ddl-list-hover-border-color: $content-bg-color !default;
 $ddl-list-hover-bg-color: $content-bg-color-hover !default;
 $ddl-list-hover-font-color: $content-text-color-hover !default;

package/styles/drop-down-base/_bigger.scss

@@ -1,11 +1,11 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('dropdownbase-bigger') {
   
   .e-bigger .e-dropdownbase,
   .e-dropdownbase.e-bigger {
     min-height: $bgr-drop-base-height;
     @at-root {
-      #{if(&, '&', '*')} .e-list-item {
+      & .e-list-item {
         line-height: $ddl-line-height;
         text-indent: $ddl-bigger-text-indent;
         @if $skin-name == 'tailwind3' {
@@ -13,15 +13,15 @@
         }
       }
 
-      #{if(&, '&', '*')} .e-list-group-item,
-      #{if(&, '&', '*')} .e-fixed-head {
+      & .e-list-group-item,
+      & .e-fixed-head {
         line-height: $ddl-line-height;
         @if $skin-name != 'tailwind' {
           text-indent: $ddl-bigger-text-indent;
         }
       }
 
-      #{if(&, '&', '*')} .e-list-item .e-list-icon {
+      & .e-list-item .e-list-icon {
         font-size: $ddl-bgr-list-item-icon-font-size;
       }
     }
@@ -58,15 +58,15 @@
   .e-bigger.e-rtl,
   .e-bigger .e-rtl,
   .e-rtl .e-bigger {
-    #{if(&, '&', '*')} .e-dropdownbase {
-      #{if(&, '&', '*')} .e-list-group-item,
-      #{if(&, '&', '*')} .e-fixed-head {
+    & .e-dropdownbase {
+      & .e-list-group-item,
+      & .e-fixed-head {
         @if $skin-name == 'tailwind' {
           padding-right: $ddl-list-header-bigger-padding-left;
         }
       }
 
-      #{if(&, '&', '*')}.e-dd-group .e-list-item {
+      &.e-dd-group .e-list-item {
         @if $skin-name == 'tailwind' {
           padding-right: $ddl-group-list-bigger-padding-left;
         }
@@ -79,20 +79,20 @@
   .e-rtl .e-small.e-bigger,
   .e-small .e-rtl.e-bigger,
   .e-bigger .e-rtl.e-small {
-    #{if(&, '&', '*')} .e-dropdownbase {
-      #{if(&, '&', '*')} .e-list-item {
+    & .e-dropdownbase {
+      & .e-list-item {
         padding-left: $ddl-list-rtl-padding-left;
         padding-right: $ddl-list-rtl-padding-right;
       }
 
-      #{if(&, '&', '*')}.e-dd-group .e-list-item {
+      &.e-dd-group .e-list-item {
         @if $skin-name == 'tailwind' {
           padding-right: $ddl-group-list-bigger-small-padding-left;
         }
       }
 
-      #{if(&, '&', '*')} .e-list-group-item,
-      #{if(&, '&', '*')} .e-fixed-head {
+      & .e-list-group-item,
+      & .e-fixed-head {
         @if $skin-name == 'tailwind' {
           padding-right: $ddl-list-header-bigger-small-padding-left;
         }
@@ -102,8 +102,8 @@
 
   .e-bigger .e-dropdownbase {
     @at-root {
-      #{if(&, '&', '*')} .e-list-group-item,
-      #{if(&, '&', '*')} .e-fixed-head {
+      & .e-list-group-item,
+      & .e-fixed-head {
         font-size: $ddl-bigger-list-header-font-size;
         padding-left: $ddl-list-header-bigger-padding-left;
       }
@@ -113,8 +113,8 @@
   .e-bigger.e-small .e-dropdownbase,
   .e-dropdownbase.e-bigger.e-small  {
     @at-root {
-      #{if(&, '&', '*')} .e-list-group-item,
-      #{if(&, '&', '*')} .e-fixed-head {
+      & .e-list-group-item,
+      & .e-fixed-head {
         font-size: $ddl-bigger-small-list-header-font-size;
       }
     }
@@ -123,21 +123,21 @@
   .e-bigger.e-small .e-dropdownbase,
   .e-dropdownbase.e-small.e-bigger {
     @at-root {
-      #{if(&, '&', '*')} .e-list-item {
+      & .e-list-item {
         color: $ddl-bigger-small-list-font-color;
         line-height: $ddl-bigger-small-line-height;
         min-height: $ddl-bigger-small-line-height;
         text-indent: $ddl-bigger-small-list-text-indent;
       }
 
-      #{if(&, '&', '*')} .e-list-group-item,
-      #{if(&, '&', '*')} .e-fixed-head {
+      & .e-list-group-item,
+      & .e-fixed-head {
         line-height: $ddl-bigger-small-line-height;
         min-height: $ddl-bigger-small-line-height;
         padding-left: $ddl-list-header-bigger-small-padding-left;
       }
 
-      #{if(&, '&', '*')} .e-list-item .e-list-icon {
+      & .e-list-item .e-list-icon {
         font-size: $ddl-bigger-small-icon-font-size;
       }
     }

package/styles/drop-down-base/_bootstrap-dark-definition.scss

@@ -1,7 +1,5 @@
 @use 'sass:color';
-@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-last-child-bottom-border: 0 !default;

package/styles/drop-down-base/_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-last-child-bottom-border: 0 !default;
 $ddl-default-font-family: inherit !default;
 $ddl-list-border-size: 1px !default;

package/styles/drop-down-base/_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-last-child-bottom-border: 0 !default;
 $ddl-default-font-family: inherit !default;

package/styles/drop-down-base/_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-list-line-height: 30px !default;
 $ddl-header-font-weight: $font-weight-medium !default;
 $ddl-last-child-bottom-border: 0 !default;

package/styles/drop-down-base/_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-list-line-height: 30px !default;
 $ddl-header-font-weight: $font-weight-medium !default;
 $ddl-last-child-bottom-border: 0 !default;

package/styles/drop-down-base/_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-list-line-height: 30px !default;
 $ddl-header-font-weight: 600 !default;
 $ddl-last-child-bottom-border: 0 !default;

package/styles/drop-down-base/_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-header-font-weight: 600 !default;

package/styles/drop-down-base/_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-header-font-weight: 600 !default;
 $ddl-last-child-bottom-border: 0 !default;
 $ddl-default-font-family: inherit !default;

package/styles/drop-down-base/_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-list-line-height: 36px !default;
 $ddl-header-font-weight: $font-weight-medium !default;
 $ddl-last-child-bottom-border: 0 !default;

package/styles/drop-down-base/_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-list-line-height: 36px !default;
 $ddl-header-font-weight: $font-weight-medium !default;
 $ddl-last-child-bottom-border: 0 !default;

package/styles/drop-down-base/_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-list-line-height: 32px !default;
 $ddl-header-font-weight: $font-weight-medium !default;
 $ddl-last-child-bottom-border: 0 !default;

package/styles/drop-down-base/_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-list-line-height: 30px !default;
 $ddl-header-font-weight: $font-weight-medium !default;
 $ddl-last-child-bottom-border: 0 !default;

package/styles/drop-down-base/_highcontrast-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/highcontrast' as *;
-@forward 'ej2-base/styles/definition/highcontrast';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-header-font-weight: 600 !default;
 $ddl-last-child-bottom-border: 0 !default;
 $ddl-default-font-family: inherit !default;
@@ -88,24 +87,24 @@ $ddl-bgr-dropbase-list-icon-item-padding: 12px !default;
 
 @include export-module('dropdownbase-highcontrast') {
   .e-dropdownbase {
-    #{if(&, '&', '*')} .e-list-item {
-      #{if(&, '&', '*')} .e-list-icon {
+    & .e-list-item {
+      & .e-list-icon {
         padding-inline-end: 10px;
       }
-      #{if(&, '&', '*')}:not(.e-active) {
-        #{if(&, '&', '*')}.e-hover {
+      &:not(.e-active) {
+        &.e-hover {
           border: 2px solid $hover-border;
         }
-        #{if(&, '&', '*')}:not(.e-hover) {
-          #{if(&, '&', '*')}:not(.e-item-focus) {
+        &:not(.e-hover) {
+          &:not(.e-item-focus) {
             border: 2px solid $bg-base-0;
           }
         }
       }
-      #{if(&, '&', '*')}.e-active {
+      &.e-active {
         border: 2px solid $selection-border;
       }
-      #{if(&, '&', '*')}.e-item-focus {
+      &.e-item-focus {
         border: 2px solid $hover-bg;
       }
     }

package/styles/drop-down-base/_highcontrast-light-definition.scss

@@ -1,6 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/highcontrast-light' as *;
-@forward 'ej2-base/styles/definition/highcontrast-light';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $ddl-header-font-weight: 600 !default;
@@ -89,24 +87,24 @@ $ddl-bgr-dropbase-list-icon-item-padding: 12px !default;
 
 @include export-module('dropdownbase-highcontrast-light') {
   .e-dropdownbase {
-    #{if(&, '&', '*')} .e-list-item {
-      #{if(&, '&', '*')} .e-list-icon {
+    & .e-list-item {
+      & .e-list-icon {
         padding-inline-end: 10px;
       }
-      #{if(&, '&', '*')}:not(.e-active) {
-        #{if(&, '&', '*')}.e-hover {
+      &:not(.e-active) {
+        &.e-hover {
           border: 2px solid $hover-border;
         }
-        #{if(&, '&', '*')}:not(.e-hover) {
-          #{if(&, '&', '*')}:not(.e-item-focus) {
+        &:not(.e-hover) {
+          &:not(.e-item-focus) {
             border: 2px solid $bg-base-0;
           }
         }
       }
-      #{if(&, '&', '*')}.e-active {
+      &.e-active {
         border: 2px solid $selection-border;
       }
-      #{if(&, '&', '*')}.e-item-focus {
+      &.e-item-focus {
         border: 2px solid $hover-bg;
       }
     }

package/styles/drop-down-base/_layout.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('dropdownbase-layout') {
   .e-dropdownbase {
     display: block;
@@ -7,17 +7,17 @@
     position: relative;
     width: $ddl-full-width;
     @at-root {
-      #{if(&, '&', '*')} .e-list-parent {
+      & .e-list-parent {
         margin: $ddl-list-zero-padding;
         padding: $ddl-list-zero-padding;
       }
 
-      #{if(&, '&', '*')} .e-list-group-item,
-      #{if(&, '&', '*')} .e-fixed-head {
+      & .e-list-group-item,
+      & .e-fixed-head {
         cursor: default;
       }
 
-      #{if(&, '&', '*')} .e-list-item {
+      & .e-list-item {
         cursor: pointer;
         overflow: hidden;
         position: relative;
@@ -27,12 +27,12 @@
         width: $ddl-full-width;
       }
 
-      #{if(&, '&', '*')} .e-list-item .e-list-icon {
+      & .e-list-item .e-list-icon {
         font-size: $ddl-nrml-list-item-icon-font-size;
         vertical-align: middle;
       }
 
-      #{if(&, '&', '*')} .e-fixed-head {
+      & .e-fixed-head {
         position: absolute;
         top: $ddl-zero-spacing;
       }

package/styles/drop-down-base/_material-dark-definition.scss

@@ -1,6 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/material-dark' as *;
-@forward 'ej2-base/styles/definition/material-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $ddl-list-line-height: 36px !default;