Customizing the style

To style your filters toolbar, you can override the following SCSS variables. Add them to your theme’s stylesheet or a custom CSS file and modify as needed to match your site’s design.

  // Main colors
  --filter-query-block-filter-primary-color: inherit;
  --filter-query-block-filter-background-color: #f0f0f0;

  // Font
  --filter-query-block-filter-font-color: var(--filter-query-block-filter-primary-color);
  --filter-query-block-filter-font-weight: 400;
  --filter-query-block-filter-font-family: inherit;
  --filter-query-block-filter-font-size: 0.9em;

  // General styles
  --filter-query-block-filter-disabled-opacity: 0.65;
  --filter-query-block-filter-transition: all 0.3s ease;
  --filter-query-block-filter-list-gap: 0.5rem;
  --filter-query-block-filter-list-item-background: transparent;
  --filter-query-block-filter-padding: 0.16rem 0.8rem;
  --filter-query-block-filter-radius: 1rem;
  --filter-query-block-filter-border-size: 1px;
  --filter-query-block-filter-border-color: transparent;
  --filter-query-block-icon-color: var(--filter-query-block-filter-primary-color,
      rgb(24, 24, 24));

  // Hover element styles
  --filter-query-block-filter-hover-background: #f0f0f0;
  --filter-query-block-filter-hover-color: inherit;
  --filter-query-block-filter-hover-border-bottom-color: transparent;
  --filter-query-block-filter-hover-border-bottom-size: 0px;

  // Active element styles
  --filter-query-block-filter-active-background: #ebecef;
  --filter-query-block-filter-active-color: inherit;
  --filter-query-block-filter-active-border-bottom-color: transparent;
  --filter-query-block-filter-active-border-bottom-size: 0px;

  // Dropdown
  --filter-query-block-filter-dropdown-header-background: transparent;
  --filter-query-block-filter-dropdown-background: #fff;
  --filter-query-block-filter-count-background: var(--filter-query-block-filter-primary-color,
      rgb(24, 24, 24));
  --filter-query-block-filter-count-color: #fff;
  --filter-query-block-filter-input-height: 2em;
  --filter-query-block-icons-size: 0.75;

  // Search
  --filter-query-block-filter-search-background: var(--filter-query-block-filter-active-background);
  --filter-query-block-filter-search-padding: var(--filter-query-block-filter-padding);
  --filter-query-block-filter-search-border: var(--filter-query-block-filter-border-size) solid var(--filter-query-block-filter-border-color);
  --filter-query-block-filter-search-border-radius: var(--filter-query-block-filter-radius);

  // Toolbar
  --filter-query-block-toolbar-border-bottom: none;
  --filter-query-block-toolbar-padding: 0rem;
  --filter-query-block-toolbar-background: transparent;
  --filter-query-block-toolbar-border: none;
  --filter-query-block-toolbar-border-radius: 0px;

  // Popup filters
  --filter-query-block-filter-popup-icon-padding: 0.5rem;
  --filter-query-block-filter-popup-icon-size: 28px;
  --filter-query-block-filter-popup-icon-border-radius: var(--filter-query-block-filter-radius);
  --filter-query-block-filter-popup-icon-color: var(--filter-query-block-filter-font-color);
  --filter-query-block-filter-popup-button-background: var(--filter-query-block-filter-active-background);
  --filter-query-block-filter-popup-font-family: inherit;

Simply copy and paste the above code into your theme’s stylesheet or a custom CSS file and modify the values to customize the appearance of the filtering toolbar to your liking.