/* ==========================================================================
   Locations: Global
   ========================================================================== */

.button--drop-filter {
  @extend .button, .button--primary-bounded, .drop__toggle--caret;
  display: flex;

  &::after {
    margin-left: auto;
  }
}

.filter-pill {
  @extend .button, .button--small;
  background-color: rbga($base-color, 0);
  color: $secondary-color;
  border: 0.5px solid $secondary-color;
  width: min-content;

  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}


.filters {
  display: grid;
  grid-gap: $global-spacing;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  padding: $global-spacing 0;
}
.drop__menu.scrollable {
   max-height: 10rem;
   overflow-y: scroll;
 }




/* ==========================================================================
   Locations: Global
   ========================================================================== */

.button--drop-filter {
  @extend .button, .button--base-bounded, .drop__toggle--caret;
  display: flex;

  &::after {
    margin-left: auto;
  }
}

.filter-pill {
  @extend .button, .button--small;
  background-color: rbga($base-color, 0);
  color: $secondary-color;
  border: 0.5px solid $secondary-color;
  width: min-content;

  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}


.filters {
  display: grid;
  grid-gap: $global-spacing;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  padding: $global-spacing 0;
}
.drop__menu.scrollable {
   max-height: 10rem;
   overflow-y: scroll;
 }




Use base button style for dropdowns
Use base button style for dropdowns

