<div class="mobile-filter np-hidden">
  <div class="mobile-filter-header">
    <div class="mobile-filter-header-button">
      Filter <i class="fa-solid fa-angle-up"></i>
    </div>
    <i class="fal fa-times mobile-filter-header-close"></i>
  </div>
  <div class="mobile-filter-content">
    <div class='filter-section'>
      <div class='filter-title'>
        CATEGORY
      </div>
      <div class='filter-element-category category-selected' category='none'>
        All
      </div>
      {% for cat in co_unique_categories %}
        {% assign number_of_courses = co_categories | split: cat %}
        {% assign number_of_courses = number_of_courses.size | minus: 1 %}
        <div class='filter-element-category' category='{{cat}}'>
          {{ cat }} ({{ number_of_courses }})
        </div>
      {% endfor %}
    </div>
  
    <div class='filter-section'>
      <div class='filter-title'>
        DIFFICULTY
      </div>
      <div class='filter-element-diff {% if diff_1 == 0 %} disabled {% endif %}' diff='1'>
        <i class="fal fa-square"></i>
        <i class="fa-solid fa-square-check"></i>
        Beginner ({{ diff_1 }})
      </div>
      <div class='filter-element-diff {% if diff_2 == 0 %} disabled {% endif %}' diff='2'>
        <i class="fal fa-square"></i>
        <i class="fa-solid fa-square-check"></i>
        Advanced ({{ diff_2 }})
      </div>
      <div class='filter-element-diff {% if diff_3 == 0 %} disabled {% endif %}' diff='3'>
        <i class="fal fa-square"></i>
        <i class="fa-solid fa-square-check"></i>
        Expert ({{ diff_3 }})
      </div>
    </div>
  
    <div class='filter-section'>
      <div class='filter-title'>
        DURATION
      </div>
      <div class='filter-element-time {% if time_1 == 0 %} disabled {% endif %}' time='1'>
        <i class="fal fa-square"></i>
        <i class="fa-solid fa-square-check"></i>
        &lt; 10 mins ({{ time_1 }})
      </div>
      <div class='filter-element-time {% if time_2 == 0 %} disabled {% endif %}' time='2'>
        <i class="fal fa-square"></i>
        <i class="fa-solid fa-square-check"></i>
        10-30 mins ({{ time_2 }})
      </div>
      <div class='filter-element-time {% if time_3 == 0 %} disabled {% endif %}' time='3'>
        <i class="fal fa-square"></i>
        <i class="fa-solid fa-square-check"></i>
        30-60 mins ({{ time_3 }})
      </div>
      <div class='filter-element-time {% if time_4 == 0 %} disabled {% endif %}' time='4'>
        <i class="fal fa-square"></i>
        <i class="fa-solid fa-square-check"></i>
        1-2 hours ({{ time_4 }})
      </div>
      <div class='filter-element-time {% if time_5 == 0 %} disabled {% endif %}' time='5'>
        <i class="fal fa-square"></i>
        <i class="fa-solid fa-square-check"></i>
        &gt; 2 hours ({{ time_5 }})
      </div>
    </div>
  </div>
</div>

<style>
  .mobile-filter-header {
    position: fixed;
    width: 100vw;
    height: 64px;
    top: 0;
    left: 0;
    display: flex;
    z-index: 10;
    background-color: white;
    justify-content: space-between;
    height: 64px;
    padding: 16px 5%;
    border-bottom: 1px solid #b6b6b6;
  }
  .mobile-filter-header-button {
    font-size: 20px;
  }
  .mobile-filter-header-close {
    font-size: 32px;
    align-self: center;
    right: 20px;
    position: relative;
  }
  .mobile-filter-content {
    position: fixed;
    width: 300px;
    height: calc(100vh - 64px);
    top: 64px;
    left: 0;
    display: block;
    z-index: 10;
    background-color: white;
    overflow-y: auto !important;
    padding-top: 32px;
    padding-left: 30px;
  }
  @media only screen and (max-width: 350px) {
    .mobile-filter-content {
      width: 100vw;
    }
  }
</style>