Filters

<filters-trigger>
  <button type="button"
    class="filters-trigger__btn btn btn--icon-square"
    aria-label="Show Filters">
    <tk-icon class="filters-trigger__icon"
      name="filters"
      size="small">
    </tk-icon>
  </button>
</filters-trigger>

<filters-trigger>
  <button type="button"
    class="filters-trigger__btn btn btn--icon-square active"
    aria-label="Show Filters">
    <span class="filters-trigger__count mr-2x">5</span>
    <tk-icon class="filters-trigger__icon"
      name="filters"
      size="small">
    </tk-icon>
  </button>
</filters-trigger>

<div class="filters-overlay-container">
  <filters-overlay>
    <div class="filters-overlay__header">
      <h2 class="filters-header__title mr-3x">Filters</h2>
    </div>

    <div class="filters-overlay__body">
      <accordion>
        <accordion-trigger class="mb-3x">
          <button type="button" class="accordion-trigger__btn btn">
            <span class="accordion-trigger__title">
              Potion Names
              <tk-icon class="icon-arrow--up ml-2x"
                name="dropdown"
                size="xs">
              </tk-icon>
            </span>
            <span class="accordion-trigger__count">1 Selected</span>
          </button>
        </accordion-trigger>

        <accordion-content>
          <div class="filters-input-container">
            <filters-input class="filters-input search">
              <input class="form-input filters-input__input" placeholder="Filter by potion name">
            </filters-input>

            <filters-results class="filters-input-container__results">
              <tk-tabs-container>
                <tk-tabs>
                  <tk-tab-button tab-selected="yourFunction()" is-active="true" tab-title="My potions" badge-text="2"></tk-tab-button>
                  <tk-tab-button tab-selected="yourOtherFunction()" tab-title="All potions" badge-type="light" badge-text="188"></tk-tab-button>
                </tk-tabs>
              </tk-tabs-container>

              <hr class="filters-overlay__rule">

              <label class="form__label form__label--checkbox form__label--medium">
                <input type="checkbox" class="input-checkbox input-checkbox--medium">
                Felix Felicis
              </label>
              <label class="form__label form__label--checkbox form__label--medium">
                <input type="checkbox" class="input-checkbox input-checkbox--medium">
                Polyjuice Potion
              </label>
            </filters-results>
          </div>
        </accordion-content>
      </accordion>

      <hr class="filters-overlay__rule">

      <accordion>
        <accordion-trigger>
          <button type="button" class="accordion-trigger__btn btn">
            <span class="accordion-trigger__title">
              Ingredients
              <tk-icon class="ml-2x"
                name="dropdown"
                size="xs">
              </tk-icon>
            </span>
            <span class="accordion-trigger__count">3 Selected</span>
          </button>
        </accordion-trigger>
      </accordion>
    </div>

    <div class="filters-overlay__footer">
      <filters-submit class="ml-auto">
        <button type="button" class="btn btn--tertiary filters-overlay__clear">Clear</button>
        <button type="button" class="ml-3x btn btn--primary">Apply</button>
      </filters-submit>
    </div>
  </filters-overlay>
</div>