/* Default state (no border) */

.filter-button {
  border: 1px solid var(--bs-white);
}

/* Hover state (border added with secondary color) */

.filter-button:hover {
  border: 1px solid var(--bs-secondary);
}

/* Active state (border added with primary color) */

.filter-button.active {
  border: 1px solid var(--bs-primary);
}

.filter-button-text {
  cursor: pointer;
}

.filter-button-text.active {
  border: 1px solid var(--bs-primary);
  padding: 5px;
}

/* Filter colors */

.filtergrey {
  color: #C4C4C3;
}

.filterbeige {
  color: #BFB39B;
}

.filterbrown {
  color: #59372A;
}

.filterblue {
  color: #2D4473;
}

.filtergreen {
  color: #2F5932;
}

.filteryellow {
  color: #F2CA50;
}

.filterred {
  color: #B64926;
}