<div class="mobile-filter-link np-hidden-desktop">Filter
  <i class="fa fa-chevron-down"></i>
</div>
<div class="catalog-filter-sidebar">
  <div class="mobile-filter-header np-hidden-desktop">
    <div class="mobile-filter-open-link">Filter
      <i class="fa fa-chevron-down"></i>
    </div>
    <div class="close-filter">
      <i class="fal fa-times"></i>
    </div>
  </div>
  <div class="filter-header main-header">Filters</div>
  <a class="clear-filters">Clear Filters</a>

  <div class="filter-header">Regions:</div>
  <div class="filter-links region-filters">
    {% include "catalog_filter_checkbox"
    , id: "japan"
    , class: "region"
    , label: "Japan"
  %}
    {% include "catalog_filter_checkbox"
    , id: "emea"
    , class: "region"
    , label: "EMEA"
  %}
    {% include "catalog_filter_checkbox"
    , id: "us"
    , class: "region"
    , label: "US"
  %}
  </div>
</div>

<script>
  window.addEventListener("DOMContentLoaded", function() {
    document.querySelector(".mobile-filter-link").addEventListener("click", function() {
      document.querySelector(".catalog-filter-sidebar").classList.add("open")
    })

    document.querySelector(".close-filter").addEventListener("click", function() {
      document.querySelector(".catalog-filter-sidebar").classList.remove("open")
    })
  })
</script>

<style>
  @media (max-width: 767px) {
    .catalog-filter-sidebar {
      position: fixed;
      top: 0;
      left: -9999px;
      background-color: #fff;
      z-index: 999;
      width: 90%;
      transition: left 0.2s;
      padding: 24px;
      height: 100%;
    }

    .catalog-filter-sidebar.open {
      left: 0;
    }

    .mobile-filter-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 32px;
    }

    .close-filter {
      font-size: 24px;
      color: #ADBDCC;
    }
  }

  .mobile-filter-link,
  .mobile-filter-open-link {
    color: #40A0F4;
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
    margin-bottom: 16px;
  }

  .mobile-filter-link i {
    font-size: 14px;
  }

  .filter-header {
    margin-bottom: 16px;
    font-size: 16px;
    letter-spacing: 0.075em;
    font-weight: 700;
    text-transform: uppercase;
    color: #153d5e;
  }

  .filter-header.main-header {
    margin-bottom: 8px;
    font-size: 20px;
  }

  .clear-filters {
    color: #40A0F4;
    margin-bottom: 24px;
    display: block;
    cursor: pointer;
  }

  .filter-links {
    margin: 16px 0 32px;
  }

  .filter-link {
    margin: 16px 0;
    cursor: pointer;
  }

  .filter-link.active {
    font-weight: 700;
    color: #48b2eb;
  }

  .category-filter-checkbox {
    margin: 10px 0;
  }

  .category-filter-checkbox label {
    margin-left: 6px;
  }

  @media (min-width: 768px) {}
</style>