<div class="np-filter">
  <div class="dropdown">
    <button
      class="np-button dropdown-button filter-button"
      data-toggle-class="is-open"
      data-toggle-escape
      data-toggle-outside
      data-toggle-target-next
      type="button"
    >
      Filter <i class="fa-light fa-sliders filter-icon"></i>
    </button>

    <div class="dropdown-menu" data-test="modal">
      <form method="get">
        {%
          include "filter_select",
          filters: filters,
          key: key,
          label: label
        %}

        <button
          class="np-button dropdown-button-apply"
          data-toggle-trigger-off
          type="submit"
        >
          {% t shared.filters.apply %}
        </button>
      </form>
    </div>
  </div>
</div>

<style>
  .np-filter {
    display: block;
    margin: auto
  }
  .filter-button {
    background: none !important;
    font-size: 1.5rem;
    font-weight: 400;
    color: #2D373C;
  }
  .filter-icon {
    font-size: 1.5rem;
    margin-left: 2rem;
  }
  .dropdown-menu {
    padding: 10px 15px;
    min-width: 240px;
  }
  .choices {
    min-width: 200px;
  }
  .dropdown-menu > form:nth-child(1) {
    min-width: 200px;
  }
  .dropdown-menu.is-open {
    display: block !important;
  }
  .np-search-header .np-filter {
    margin-right: 0;
  }
</style>