@infineon/infineon-design-system-stencil 35.5.0--canary.1904.c3cb7254ae476891ebdb18f1579f66379ad24854.0 → 36.0.0--canary.1926.3b76d5defe8b9a743d9ec0dd5e6879c04e8055c0.0

package/dist/collection/components/select/multi-select/multiselect.css

@@ -7,12 +7,6 @@
   box-sizing: border-box;
   font-family: var(--ifx-font-family);
 }
-.ifx-multiselect-container.small-select {
-  height: 36px;
-}
-.ifx-multiselect-container.medium-select {
-  height: 40px;
-}
 .ifx-multiselect-container:hover {
   cursor: pointer;
 }
@@ -36,7 +30,6 @@
 .ifx-multiselect-container .ifx-multiselect-wrapper {
   background-color: #FFFFFF;
   box-sizing: border-box;
-  position: relative;
   display: flex;
   align-items: center;
   border: 1px solid #8D8786;
@@ -44,15 +37,8 @@
   width: 100%;
   font-weight: 400;
   font-style: normal;
-}
-.ifx-multiselect-container .ifx-multiselect-wrapper.small-select {
-  height: 36px;
-  padding: 8px 12px;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select {
   height: 40px;
+  line-height: 24px;
   padding: 8px 16px;
   font-size: 1rem;
   line-height: 1.5rem;
@@ -125,89 +111,92 @@
 }
 .ifx-multiselect-container .ifx-multiselect-icon-container {
   margin-left: auto;
+  display: flex;
   align-items: center;
+  gap: 8px;
+}
+.ifx-multiselect-container .ifx-multiselect-icon-container .ifx-multiselect-icon-container {
+  display: flex;
+}
+.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper {
   display: flex;
+  align-items: center;
+  transition: transform 0.2s ease-in-out;
+}
+.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper--open {
+  transform: rotate(180deg);
 }
 .ifx-multiselect-container .ifx-clear-button {
   display: flex;
+  align-items: center;
 }
 .ifx-multiselect-container .ifx-clear-button.hide {
   display: none;
 }
 .ifx-multiselect-container .ifx-multiselect-dropdown-menu {
+  box-sizing: border-box;
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
-  margin-top: 2px;
+  margin-top: 4px;
+  border: 1px solid #EEEDED;
   background-color: #fff;
   box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);
   max-height: 300px;
-  /* Adjust based on your design */
-  overflow-y: auto;
   z-index: 1000;
+  display: flex;
+  flex-direction: column;
 }
-.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input {
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  padding: 8px 16px;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-style: normal;
-  font-weight: 400;
-  box-sizing: border-box;
-  background-color: #FFFFFF;
-  border: none;
-  border-bottom: 1px solid #8D8786;
-}
-.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus {
-  outline: none;
-  border: 1px solid #0A8276;
+
+.ifx-multiselect-dropdown-functions {
+  padding: 12px 16px;
+  border-bottom: 1px solid #EEEDED;
+  flex-shrink: 0;
 }
-.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder {
-  color: #999;
+
+.ifx-multiselect-dropdown-search {
+  margin-bottom: 12px;
 }
-.ifx-multiselect-container .option {
-  position: relative;
-  padding: 8px 16px;
+
+.ifx-multiselect-dropdown-controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   gap: 8px;
-  align-items: center;
+}
+.ifx-multiselect-dropdown-controls .select-all-wrapper {
   display: flex;
-  font-style: normal;
-  font-weight: 400;
 }
-.ifx-multiselect-container .option.small-select {
+.ifx-multiselect-dropdown-controls .expand-collapse-controls {
+  display: flex;
+  gap: 12px;
+}
+.ifx-multiselect-dropdown-controls .control-item {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.ifx-multiselect-container .option.medium-select {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-.ifx-multiselect-container .option:hover {
-  background-color: #EEEDED;
-}
-.ifx-multiselect-container .option:focus:not(.disabled) {
-  background-color: #BFBBBB;
+.ifx-multiselect-dropdown-controls .control-item:focus {
   outline: none;
 }
-.ifx-multiselect-container .option.is-highlighted {
-  background-color: #EEEDED;
-}
-.ifx-multiselect-container .option.sub-option {
-  padding-left: 30px;
-  /* or however much indentation you want */
+.ifx-multiselect-dropdown-controls .control-item:focus-visible {
+  outline: 2px solid #0A8276;
+  outline-offset: 2px;
+  border-radius: 1px;
 }
-.ifx-multiselect-container .option.disabled:hover {
-  cursor: default;
+
+.ifx-multiselect-options {
+  flex: 1;
+  overflow-y: auto;
+  padding-top: 12px;
+  padding-bottom: 12px;
 }
-.ifx-multiselect-container .option label {
-  cursor: inherit;
+.ifx-multiselect-options.show-no-results .ifx-multiselect-no-results {
+  display: block;
 }
 
-.select-all-wrapper {
-  padding-top: 8px;
+.ifx-multiselect-no-results {
+  padding-left: 16px;
+  padding-right: 16px;
+  display: none;
 }