custom-select-react/dist/MultiSelectDropdown.css

The `MultiSelectDropdown` is a highly customizable React component that allows users to select multiple items from a dropdown list. It supports search functionality, custom styling, and a variety of configuration options.

.msd-container {
  position: relative;
  width: 100%;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  min-width: 250px;
  
}

.msd-disabled-item {
  opacity: 0.6;
  pointer-events: none;
}

.msd-selected-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 40px; /* Set a maximum height to prevent expansion */
  overflow-y: hidden; /* Allow scrolling for overflow */
  padding: 0; /* Remove unnecessary padding */
  margin: 0; /* Remove unnecessary margin */
  box-sizing: border-box; /* Ensure padding doesn't affect size */
}

.msd-selected-item {
  background: #e0f7fa;
  border: 1px solid #4caf50;
  border-radius: 5px;
  padding: 6px 8px; /* Adjust padding to reduce size */
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words */
  overflow: hidden; /* Prevent overflow */


  line-height: 1; /* Adjust line height to match input */
}

.msd-close-icon {
  cursor: pointer;
  color: #f44336;
  font-size: 12px; /* Adjust size to match overall layout */
  line-height: 1; /* Keep consistent line height */
}

.msd-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px; /* Match the padding of the input */
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  height: 40px; /* Set a consistent height */
}

.msd-container {
  height: auto; /* Allow the container to adapt without altering height */
}

/* .msd-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
} */

.msd-placeholder {
  color: #999;
}

/* .msd-selected-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.msd-selected-item {
  background: #e0f7fa;
  border: 1px solid #4caf50;
  border-radius: 5px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #333;
} */


.msd-close-icon {
  cursor: pointer;
  color: #f44336;
  font-size: 14px;
}

.msd-caret {
  border: solid #333;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  margin-left: 10px;
  margin-right: 5px;
}

.msd-caret-open {
  transform: rotate(-135deg);
}

.msd-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}

.msd-dropdown-list {
  max-height: 200px; /* Set a max height for the dropdown */
  overflow-y: auto; /* Enable vertical scrolling */
}

/* Custom scrollbar styles */
.msd-dropdown-list::-webkit-scrollbar {
  width: 10px; /* Set the width of the scrollbar */
  cursor: pointer;
}

.msd-dropdown-list::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Set the track (background) color */
  border-radius: 10px; /* Round the corners of the track */
}

.msd-dropdown-list::-webkit-scrollbar-thumb {
  background-color: #888; /* Set the thumb (scrollbar handle) color */
  border-radius: 10px; /* Round the corners of the thumb */
  border: 2px solid #f1f1f1; /* Add a border around the thumb for contrast */
  cursor: pointer;

}

.msd-dropdown-list::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Change the thumb color when hovered */
  cursor: pointer;

}


.msd-search-bar {
  padding: 5px;
  border-bottom: 1px solid #ccc;
    position: sticky;
  top: 0;
  z-index: 1; /* Ensure the search bar stays above other elements */
  background-color: white; /* Optional: to make sure the background is visible */
}

.msd-search-input {
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 5px;
}
.msd-search-input {
  padding: 8px;
  border: none;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
  font-family: Arial, sans-serif;

  font-size: 14px;
  
  outline: none; /* Removes the default outline */
}

.msd-search-input:focus,
.msd-search-input:active {
  border: none; /* Removes the border */
  box-shadow: none; /* Removes any shadow */
}

.msd-dropdown-item {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.msd-dropdown-item:hover {
  background: #f1f1f1;
}

.msd-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.msd-single-select-item.msd-selected {
  font-weight: bold;
  color: #4caf50;
  border-radius: 5px;
  padding: 2px 8px; /* Adjust padding to reduce size */
  display: flex;
}
.msd-item-count {
  display: flex;
      justify-content: center;
      align-items: center;
      /* background-color: #f0f0f0; */
      /* color: #333; */
      /* border-radius: 50%; */
      width: 24px;
      color: #5e5b5b;
      /* height: 24px; */
      font-size: 18px;
      /* font-weight: bold; */
      /* margin-left: 8px; */
      text-align: center
}