/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.FilterButton {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 500em;
  border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
  color: var(--colorsTextDefault, #141414);
  font-size: 12px;
  cursor: pointer;
  background-color: transparent;
  align-self: flex-start;
}
.FilterButton .BodyText {
  color: inherit;
  white-space: nowrap;
}
.FilterButton.FilterButton--focus-visible:focus {
  outline: 0;
  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
}
.FilterButton .FilterButton__Icon {
  height: 21px;
  width: 21px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.FilterButton .FilterButton__ExpandIcon,
.FilterButton .FilterButton__Tag {
  margin-left: 4px;
}
.FilterButton.FilterButton--active {
  color: var(--colorsTextSecondary, #6954c0);
  border-color: transparent;
  background-color: var(--colorsSurfaceSecondarySubdued, #f1edff);
  padding: 4px 8px;
}
.FilterButton.FilterButton--active .FilterButton__Icon,
.FilterButton.FilterButton--active .FilterButton__ExpandIcon {
  color: var(--colorsTextSecondary, #6954c0);
}

/*# sourceMappingURL=FilterButton.css.map */