source: imaps-frontend/src/components/FilterBar/FilterBar.module.css

/* FilterBar.module.css */
* {
  font-family: "Poppins", sans-serif;
}

.wrapper {
  display: flex;
  justify-content: center; /* Centers the scrollable container */
  width: 100%; /* Ensures the container takes full width */
  overflow-x: hidden; /* Prevents the wrapper from overflowing */
}

.scrollableContainer {
  display: flex;
  gap: 10px;
  overflow-x: auto; /* Allows horizontal scrolling */
  white-space: nowrap; /* Prevents buttons from wrapping */
  padding: 0px 0; /* Adds some space around the buttons */
  width: 100%;
}

.buttonValue {
  border: 2px solid #6759ff;
  padding: 0.5em 1.5em;
  border-radius: 3em;
  background-color: transparent;
  color: #6759ff;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap; /* Ensures the text does not wrap */
}

.buttonValue:hover,
.buttonValue:focus {
  background-color: #6759ff;
  color: #ffffff;
}

.active {
  background-color: #6759ff;
  color: #ffffff;
}

.scrollableContainer::-webkit-scrollbar {
  height: 6px;
}

.scrollableContainer::-webkit-scrollbar-thumb {
  background-color: #6759ff;
  border-radius: 3px;
}