@syncfusion/ej2-dropdowns 26.2.11 → 27.1.48

package/styles/highcontrast.scss

@@ -1,7 +1,7 @@
 @import 'ej2-base/styles/definition/highcontrast.scss';
 @import 'drop-down-base/highcontrast-definition.scss';
 @import 'drop-down-base/all.scss';
-
+@import 'drop-down-base/bigger.scss';
 @import 'ej2-inputs/styles/input/highcontrast-definition.scss';
 @import 'ej2-popups/styles/popup/highcontrast-definition.scss';
 @import 'ej2-popups/styles/spinner/highcontrast-definition.scss';
@@ -9,20 +9,25 @@
 @import 'drop-down-list/highcontrast-definition.scss';
 @import 'drop-down-list/icons/highcontrast.scss';
 @import 'drop-down-list/all.scss';
+@import 'drop-down-list/bigger.scss';
 @import 'ej2-navigations/styles/treeview/highcontrast-definition.scss';
 @import 'drop-down-tree/highcontrast-definition.scss';
 @import 'drop-down-tree/icons/highcontrast.scss';
 @import 'drop-down-tree/all.scss';
+@import 'drop-down-tree/bigger.scss';
 @import 'combo-box/highcontrast-definition.scss';
 @import 'combo-box/all.scss';
+
 @import 'auto-complete/highcontrast-definition.scss';
 @import 'auto-complete/all.scss';
 @import 'ej2-buttons/styles/check-box/highcontrast-definition.scss';
 @import 'multi-select/highcontrast-definition.scss';
 @import 'multi-select/icons/highcontrast.scss';
 @import 'multi-select/all.scss';
+@import 'multi-select/bigger.scss';
 @import 'list-box/highcontrast-definition.scss';
 @import 'list-box/icons/highcontrast.scss';
 @import 'list-box/all.scss';
+@import 'list-box/bigger.scss';
 @import 'mention/highcontrast-definition.scss';
 @import 'mention/all.scss';

package/styles/list-box/_bigger.scss

@@ -0,0 +1,173 @@
+@include export-module('listbox-bigger') {
+  .e-bigger .e-listbox-wrapper,
+  .e-listbox-wrapper.e-bigger,
+  .e-bigger .e-listbox-container,
+  .e-listbox-container.e-bigger {
+    @if ($skin-name == 'bootstrap4') {
+      font-size: 16px;
+    }
+    @if ($theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark') {
+      border-radius: 6px;
+    }
+
+    &.e-listboxtool-container .e-list-wrap {
+      @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' {
+        width: calc(100% - 20%) !important; /* stylelint-disable-line declaration-no-important */
+      }
+      @else if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' {
+        width: calc(100% - 15%) !important; /* stylelint-disable-line declaration-no-important */
+      }
+      @else if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
+        width: calc(100% - 17%) !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+
+    .e-list-item {
+      border-bottom: $listbox-border-bottom solid $listbox-border-bottom-color;
+      border-left: $listbox-border-left solid $listbox-border-left-color;
+      border-right: $listbox-border-right solid $listbox-border-right-color;
+      border-top: $listbox-border-top solid $listbox-border-top-color;
+    }
+
+    &:not(.e-list-template) .e-list-item,
+    .e-selectall-parent,
+    .e-list-group-item,
+    .e-list-header {
+      padding: $listbox-bigger-item-padding;
+    }
+
+    &:not(.e-list-template) .e-list-item,
+    .e-selectall-parent {
+      height: $listbox-touch-item-height;
+      line-height: $listbox-touch-item-line-height;
+      position: relative;
+      @if ($skin-name == 'bootstrap4') {
+        padding: 12px 20px;
+      }
+      @if ($theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark') {
+        font-size: 16px;
+      }
+    }
+
+    .e-list-parent {
+      min-height: $listbox-touch-item-height;
+    }
+
+    .e-text-content {
+      font-size: $listbox-touch-item-font-size;
+    }
+
+    .e-list-group-item {
+      height: $listbox-touch-groupheader-height;
+      line-height: $listbox-touch-groupheader-line-height;
+      @if ($skin-name == 'bootstrap4') {
+        font-size: 16px;
+        padding: 12px 20px;
+      }
+      @if $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
+        padding: 9px 16px;
+      }
+    }
+
+    .e-list-header {
+      align-items: center;
+      display: flex;
+      font-weight: $listbox-touch-header-font-weight;
+      height: $listbox-touch-header-height;
+      @if ($skin-name == 'bootstrap4') {
+        font-size: 20px;
+        line-height: 1.2;
+        padding: 0 0 0 20px;
+      }
+    }
+
+    .e-list-header .e-text.header,
+    .e-list-header .e-headertemplate-text.nested-header {
+      display: none;
+    }
+
+    .e-list-header .e-text {
+      font-size: $listbox-touch-header-font-size;
+    }
+
+    .e-but-back {
+      @if ($skin-name == 'bootstrap4') {
+        margin-top: -3px;
+        padding-right: 12px;
+      }
+    }
+
+    .e-list-icon {
+      @if ($skin-name == 'bootstrap4') {
+        margin-right: 12px;
+      }
+    }
+
+    .e-icon-collapsible {
+      @if ($skin-name == 'bootstrap4') {
+        font-size: 12px;
+      }
+    }
+
+    .e-checkbox-wrapper {
+      @if ($skin-name == 'bootstrap4') {
+        margin: 0 12px 0 0;
+      }
+    }
+
+    &.e-rtl {
+      .e-checkbox-wrapper {
+        @if ($skin-name == 'bootstrap4') {
+          margin: 0 0 0 12px;
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-list-parent {
+    height: $listbox-filter-bigger-height !important; /* stylelint-disable-line declaration-no-important */
+  }
+  .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
+    height: $listbox-mat-filter-bigger-height !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-bigger .e-listbox-container.e-filter-list .e-list-parent,
+  .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent,
+  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent,
+  .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
+    height: 100%;
+  }
+
+  .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
+  .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
+    height: $listbox-filterselect-bigger-height !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
+  .e-bigger .e-listbox-container .e-selectall-parent + .e-list-wrap {
+    height: $listbox-select-bigger-height !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
+  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
+    height: $listbox-filter-bigger-small-height !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
+    height: $listbox-ej2-filterselect-bigger-height !important;/* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-bigger.e-listbox-wrapper,
+  .e-bigger.e-listbox-container {
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      font-size: $listbox-touch-item-font-size;
+    }
+
+    & .e-list-header,
+    & .e-list-group-item {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+        font-size: $listbox-touch-header-font-size;
+      }
+    }
+  }
+}

package/styles/list-box/_bootstrap5-definition.scss

@@ -92,6 +92,7 @@ $listbox-border-left-color: transparent !default;
 $listbox-text-hover-color: $content-text-color !default;
 $listbox-item-active-bg: $content-bg-color-alt2 !default;
 $listbox-text-active-color: rgba($content-text-color, .87) !default;
+$listbox-text-selected-color: rgba($content-text-color, .87) !default;
 $listbox-header-text-color: $content-text-color-alt2 !default;
 $listbox-header-text-disabled: $content-text-color-disabled !default;
 $listbox-header-bg: $content-bg-color-alt2 !default;

package/styles/list-box/_bootstrap5.3-definition.scss

@@ -14,24 +14,24 @@ $listbox-header-font-weight: $font-weight-medium !default;
 $listbox-header-line-height: 18px !default;
 $listbox-header-padding-bottom: 0 !default;
 $listbox-touch-back-icon-padding: 0 !default;
-$listbox-border-bottom: 0 !default;
+$listbox-border-bottom: 1px !default;
 $listbox-border-top: 0 !default;
 $listbox-border-left: 0 !default;
 $listbox-border-right: 0 !default;
 $listbox-group-first-border-bottom: 0 !default;
 $listbox-group-border-top: 1px !default;
-$listbox-group-border-bottom: 0 !default;
-$listbox-groupheader-item-height: 30px !default;
-$listbox-groupheader-item-line-height: 10px !default;
-$listbox-groupheader-font-size: $text-xs !default;
+$listbox-group-border-bottom: 1px !default;
+$listbox-groupheader-item-height: 36px !default;
+$listbox-groupheader-item-line-height: 22px !default;
+$listbox-groupheader-font-size: 14px !default;
 $listbox-border-size: 0 !default;
 $listbox-font-size: $text-sm !default;
 $listbox-back-padding-right: 8px !default;
-$listbox-touch-item-height: 48px !default;
-$listbox-touch-item-line-height: 1.6 !default;
+$listbox-touch-item-height: 42px !default;
+$listbox-touch-item-line-height: 24px !default;
 $listbox-touch-item-font-size: $text-base !default;
-$listbox-touch-groupheader-height: 40px !default;
-$listbox-touch-groupheader-line-height: 25px !default;
+$listbox-touch-groupheader-height: 42px !default;
+$listbox-touch-groupheader-line-height: 22px !default;
 $listbox-touch-header-height: 22px !default;
 $listbox-touch-header-font-weight: $font-weight-medium !default;
 $listbox-touch-header-font-size: $text-sm !default;
@@ -81,17 +81,18 @@ $listbox-text-color: $content-text-color !default;
 $listbox-text-disabled: $content-text-color-disabled !default;
 $listbox-icon-color: $icon-color !default;
 $listbox-icon-disabled: $icon-color-disabled !default;
-$listbox-item-hover-bg: $content-bg-color-alt2 !default;
+$listbox-item-hover-bg: $content-bg-color-hover !default;
 $listbox-background: $transparent !default;
 $listbox-line-color: $border-light !default;
 $listbox-hover-border-color: transparent !default;
-$listbox-border-bottom-color: transparent !default;
+$listbox-border-bottom-color: $border-light !default;
 $listbox-border-top-color: transparent !default;
 $listbox-border-right-color: transparent !default;
 $listbox-border-left-color: transparent !default;
 $listbox-text-hover-color: $content-text-color !default;
-$listbox-item-active-bg: $content-bg-color-alt2 !default;
+$listbox-item-active-bg: $content-bg-color-selected !default;
 $listbox-text-active-color: rgba($content-text-color, .87) !default;
+$listbox-text-selected-color: $content-text-color-selected !default;
 $listbox-header-text-color: $content-text-color-alt2 !default;
 $listbox-header-text-disabled: $content-text-color-disabled !default;
 $listbox-header-bg: $content-bg-color-alt2 !default;
@@ -101,8 +102,8 @@ $listbox-header-border: rgba($black, .12) !default;
 $checkmark-bgcolor: $primary !default;
 $checkmark-border-color: transparent !default;
 $checkmark-color: $primary-text-color !default;
-$listbox-groupheader-text-color: $black !default;
-$listbox-groupheader-bg: $content-bg-color-alt2 !default;
+$listbox-groupheader-text-color: $content-text-color-alt2 !default;
+$listbox-groupheader-bg: transparent !default;
 $listbox-groupheader-border: $black !default;
 $listbox-groupheader-icon: $icon-color !default;
 $listbox-template-multiline-header-color: $content-text-color !default;
@@ -118,3 +119,5 @@ $listbox-filter-height: calc(100% - 50px) !default;
 $listbox-filter-bigger-height: calc(100% - 56px) !default;
 $listbox-ej2-filterselect-height: calc(100% - 86px) !default;
 $listbox-ej2-filterselect-bigger-height: calc(100% - 104px) !default;
+$listbox-dragged-item-bg-color: $content-bg-color-dragged !default;
+$listbox-dragged-item-text-color: $content-text-color-dragged !default;

package/styles/list-box/_fluent2-definition.scss

@@ -117,3 +117,5 @@ $listbox-mat-filter-height: calc(100% - 50px) !default;
 $listbox-mat-filter-bigger-height: calc(100% - 58px) !default;
 $listbox-ej2-filterselect-height: calc(100% - 87.5px) !default;
 $listbox-ej2-filterselect-bigger-height: calc(100% - 106px) !default;
+$listbox-dragged-item-bg-color: $content-bg-color-alt3 !default;
+$listbox-dragged-item-text-color: $content-text-color !default;

package/styles/list-box/_layout.scss

@@ -15,12 +15,12 @@
       box-sizing: border-box;
     }
 
-    @if $skin-name == 'fluent2' {
+    @if $skin-name == 'fluent2' or $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
       border-radius: 4px;
     }
 
     &.e-listboxtool-container .e-list-wrap {
-      @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
+      @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' {
         width: calc(100% - 16%) !important; /* stylelint-disable-line declaration-no-important */
       }
       @else if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' or $skin-name == 'fabric' {
@@ -118,8 +118,10 @@
     }
 
     & .e-list-group-item:first-child {
-      border: 0;
-      border-bottom: $listbox-group-first-border-bottom solid $listbox-border-bottom-color;
+      @if $theme-name != 'bootstrap5.3' and $theme-name != 'bootstrap5.3-dark' {
+        border: 0;
+        border-bottom: $listbox-group-first-border-bottom solid $listbox-border-bottom-color;
+      }
     }
 
     & .e-list-group-item {
@@ -133,7 +135,12 @@
       }
       height: $listbox-groupheader-item-height;
       line-height: $listbox-groupheader-item-line-height;
-      padding: $listbox-item-padding;
+      @if $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
+        padding: 7px 12px;
+      }
+      @else {
+        padding: $listbox-item-padding;
+      }
     }
 
     & .e-icon-collapsible {
@@ -312,6 +319,9 @@
       @if $skin-name == 'fluent2' {
         border: 2px solid $badge-bgcolor;
       }
+      @else if $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
+        height: 2px;
+      }
       @else {
         height: 1px;
       }
@@ -435,122 +445,6 @@
       }
     }
   }
-
-  .e-bigger .e-listbox-wrapper,
-  .e-listbox-wrapper.e-bigger,
-  .e-bigger .e-listbox-container,
-  .e-listbox-container.e-bigger {
-    @if ($skin-name == 'bootstrap4') {
-      font-size: 16px;
-    }
-
-    &.e-listboxtool-container .e-list-wrap {
-      @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
-        width: calc(100% - 20%) !important; /* stylelint-disable-line declaration-no-important */
-      }
-      @else if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' {
-        width: calc(100% - 15%) !important; /* stylelint-disable-line declaration-no-important */
-      }
-      @else if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-        width: calc(100% - 17%) !important; /* stylelint-disable-line declaration-no-important */
-      }
-    }
-
-    .e-list-item {
-      border-bottom: $listbox-border-bottom solid $listbox-border-bottom-color;
-      border-left: $listbox-border-left solid $listbox-border-left-color;
-      border-right: $listbox-border-right solid $listbox-border-right-color;
-      border-top: $listbox-border-top solid $listbox-border-top-color;
-    }
-
-    &:not(.e-list-template) .e-list-item,
-    .e-selectall-parent,
-    .e-list-group-item,
-    .e-list-header {
-      padding: $listbox-bigger-item-padding;
-    }
-
-    &:not(.e-list-template) .e-list-item,
-    .e-selectall-parent {
-      height: $listbox-touch-item-height;
-      line-height: $listbox-touch-item-line-height;
-      position: relative;
-      @if ($skin-name == 'bootstrap4') {
-        padding: 12px 20px;
-      }
-    }
-
-    .e-list-parent {
-      min-height: $listbox-touch-item-height;
-    }
-
-    .e-text-content {
-      font-size: $listbox-touch-item-font-size;
-    }
-
-    .e-list-group-item {
-      height: $listbox-touch-groupheader-height;
-      line-height: $listbox-touch-groupheader-line-height;
-      @if ($skin-name == 'bootstrap4') {
-        font-size: 16px;
-        padding: 12px 20px;
-      }
-    }
-
-    .e-list-header {
-      align-items: center;
-      display: flex;
-      font-weight: $listbox-touch-header-font-weight;
-      height: $listbox-touch-header-height;
-      @if ($skin-name == 'bootstrap4') {
-        font-size: 20px;
-        line-height: 1.2;
-        padding: 0 0 0 20px;
-      }
-    }
-
-    .e-list-header .e-text.header,
-    .e-list-header .e-headertemplate-text.nested-header {
-      display: none;
-    }
-
-    .e-list-header .e-text {
-      font-size: $listbox-touch-header-font-size;
-    }
-
-    .e-but-back {
-      @if ($skin-name == 'bootstrap4') {
-        margin-top: -3px;
-        padding-right: 12px;
-      }
-    }
-
-    .e-list-icon {
-      @if ($skin-name == 'bootstrap4') {
-        margin-right: 12px;
-      }
-    }
-
-    .e-icon-collapsible {
-      @if ($skin-name == 'bootstrap4') {
-        font-size: 12px;
-      }
-    }
-
-    .e-checkbox-wrapper {
-      @if ($skin-name == 'bootstrap4') {
-        margin: 0 12px 0 0;
-      }
-    }
-
-    &.e-rtl {
-      .e-checkbox-wrapper {
-        @if ($skin-name == 'bootstrap4') {
-          margin: 0 0 0 12px;
-        }
-      }
-    }
-  }
 }
 
 .e-listbox-wrapper,
@@ -569,9 +463,3 @@
     }
   }
 }
-
-.e-listbox-wrapper:not(.e-list-template) .e-list-parent li {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}

package/styles/list-box/_theme.scss

@@ -11,22 +11,6 @@
     height: $listbox-filter-small-height !important; /* stylelint-disable-line declaration-no-important */
   }
 
-  .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-list-parent {
-    height: $listbox-filter-bigger-height !important; /* stylelint-disable-line declaration-no-important */
-  }
-  .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
-    height: $listbox-mat-filter-bigger-height !important; /* stylelint-disable-line declaration-no-important */
-  }
-
-  .e-bigger .e-listbox-container.e-filter-list .e-list-parent,
-  .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent,
-  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent,
-  .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
-    height: 100%;
-  }
-
-  .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
-  .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent,
   .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
     height: $listbox-filterselect-bigger-height !important; /* stylelint-disable-line declaration-no-important */
   }
@@ -35,44 +19,16 @@
     height: $listbox-filter-height !important; /* stylelint-disable-line declaration-no-important */
   }
 
-  .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
-  .e-bigger .e-listbox-container .e-selectall-parent + .e-list-wrap {
-    height: $listbox-select-bigger-height !important; /* stylelint-disable-line declaration-no-important */
-  }
-
-  .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
-  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
-    height: $listbox-filter-bigger-small-height !important; /* stylelint-disable-line declaration-no-important */
-  }
-
   .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
     height: $listbox-ej2-filterselect-height !important;/* stylelint-disable-line declaration-no-important */
   }
 
-  .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
-    height: $listbox-ej2-filterselect-bigger-height !important;/* stylelint-disable-line declaration-no-important */
-  }
-
   .e-listbox-wrapper,
   .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
   .e-listboxtool-container.e-listbox-container .e-ul {
     border: 1px solid $listbox-border-color;
   }
 
-  .e-bigger.e-listbox-wrapper,
-  .e-bigger.e-listbox-container {
-    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
-      font-size: $listbox-touch-item-font-size;
-    }
-
-    & .e-list-header,
-    & .e-list-group-item {
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
-        font-size: $listbox-touch-header-font-size;
-      }
-    }
-  }
-
   .e-listbox-wrapper,
   .e-listbox-container,
   .e-listboxtool-wrapper {
@@ -129,14 +85,21 @@
       & .e-list-item.e-focused.e-selected.e-checklist,
       & .e-list-item.e-selected {
         background-color: $listbox-item-active-bg;
-        color: $listbox-text-active-color;
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
+          color: $listbox-text-selected-color;
+        }
+        @else {
+          color: $listbox-text-active-color;
+        }
       }
 
       & .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
       & .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
-        background-color: $checkmark-bgcolor;
-        border-color: $checkmark-border-color;
-        color: $checkmark-color;
+        @if $skin-name != 'fluent2' {
+          background-color: $checkmark-bgcolor;
+          border-color: $checkmark-border-color;
+          color: $checkmark-color;
+        }
       }
 
       & .e-list-group-item {
@@ -321,10 +284,10 @@
 
   .e-listbox-wrapper.e-sortableclone,
   .e-listbox-container.e-sortableclone {
-    @if $skin-name == 'fluent2' {
+    @if $skin-name == 'fluent2' or $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
       & .e-list-item {
-        background-color: $content-bg-color-alt3 !important; /* stylelint-disable-line declaration-no-important */
-        color: $content-text-color !important; /* stylelint-disable-line declaration-no-important */
+        background-color: $listbox-dragged-item-bg-color !important; /* stylelint-disable-line declaration-no-important */
+        color: $listbox-dragged-item-text-color !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }