{% if categories is defined and categories|length > 0 %}
  <div class="{{ category_style }}">
    <div class="paper vertical-padding-small bottom-margin-medium border-gray hidden-overflow text-word-wrap aside-filter js-aside-category cc-sm-bg cc-sm-bd">
      <div class="full-width vertical-padding-small horizontal-padding-medium">
        <span class="text-medium text-bold cc-sm-tt"{% if title_heading_title is defined %} title="{{ title_heading_title }}"{% endif %}>{{ heading_title }}</span>
      </div>
      <hr class="bottom-border-gray vertical-margin-small cc-sm-bd">
      {% for category in categories %}
        <div class="full-width">
          <a href="{{ category.href }}" class="flex flex-row nowrap-xs between-xs middle-xs text-medium text-ellipsis horizontal-padding-medium vertical-padding-small cursor-pointer aside-category-first-level-children cc-sm-tx{% if category.children %} js-accordion-control{% endif %}">
            <span class="text-ellipsis{% if category.category_id == category_id %} text-bold{% endif %}">{{ category.name }}</span>
            {% if category.children %}
              <i class="fas fa-angle-down" aria-hidden="true"></i>
            {% endif %}
          </a>
          {% if category.children %}
            <div class="full-width js-accordion-content" style="display: {{category.category_id == category_id ? 'block' : 'none'}};">
              <a href="{{ category.href }}" class="visible-block full-width vertical-padding-small left-padding-large text-medium cc-sm-tx">
                <span>{{ text_see_all }}</span>
              </a>
              {% for child in category.children %}
                <a href="{{ child.href }}" class="visible-block full-width vertical-padding-small left-padding-large text-medium text-ellipsis cc-sm-tx" title="{{ child.name }}">
                  <span class="text-ellipsis{% if child.category_id == child_id %} text-bold{% endif %}">{{ child.name }}</span>
                </a>
                {% if child.children is defined and child.children %}
                  {% for subchild in child.children %}
                    <a href="{{ subchild.href }}" class="visible-block full-width vertical-padding-small left-padding-x-large text-small text-ellipsis cc-sm-tx" title="{{ subchild.name }}">
                      <span class="text-ellipsis{% if subchild.category_id == subchild_id %} text-bold{% endif %}">{{ subchild.name }}</span>
                    </a>
                  {% endfor %}
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </div>
{% endif %}
