<div class="np-filter">
  <div class="dropdown">
    <button
      class="np-button dropdown-button"
      data-toggle-class="is-open"
      data-toggle-escape
      data-toggle-outside
      data-toggle-target-next
      type="button"
    >
      {% t shared.filters.filter %}
    </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-button .dropdown-button{
	color: #FFFFFF;
	background: #307fe2;
	text-transform: uppercase;
	font-family: Jost,sans-serif;
}

.np-button .dropdown-button:hover {
	background: #59D7C9;
	transition: color .5s ease, background .5s ease, border .5s;
	border: 1px solid #59D7C9;
	color: #211579;
}

</style>