{% set section_id = 'accordion-section'|clean_unique_id %}
{% set button_id = 'accordion-button'|clean_unique_id %}

{% set classes = [
  'c-accordion-item',
  'js-accordion-item',
  modifier_classes ? modifier_classes : '',
]|join(' ')|trim %}

<div
  {{ add_attributes({ class: classes }) -}}
  {{- is_open ? ' data-accordion-open="true"' -}}
>
  <div class="c-accordion-item__panel">
    <{{ title_element ?: 'h3' }} class="c-accordion-item__heading">
      <button
        class="c-accordion-item__toggle js-accordion-toggle"
        id="{{ button_id }}"
        aria-expanded="true"
        aria-controls="{{ section_id }}"
        tabindex="-1"
      >
        {% if is_step_list %}
          <span class="c-accordion-item__number"></span>
        {% endif %}

        <span class="c-accordion-item__title">{{ title }}</span>
        <span class="c-accordion-item__icon"></span>
      </button>
    </{{ title_element ?: 'h3' }}>
    <div
      class="c-accordion-item__drawer js-accordion-drawer"
      id="{{ section_id }}"
      role="region"
      aria-labelledby="{{ button_id }}"
    >
      <div class="c-accordion-item__drawer-inner">
        {{ content }}
      </div>
    </div>
  </div>
</div>
