{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes, data) %}

<div id="{{data.id}}" class="o-overlay {{classes}}">
  <div
    class="o-overlay__background {{'is-hidden' if not data.hasBackground}} {{'js-overlay-trigger' if data.overlay}}"
    {% if data.overlay %}data-overlay-target="{{data.overlay}}"{% endif %}
  ></div>

  <div class="o-overlay__content">
    {% if data.hasCloseButton %}
      <button
        class="o-overlay__close js-overlay-trigger"
        data-overlay-target="{{data.id}} {{data.overlay}}"
      >
      </button>
    {% endif %}

    <div class="o-overlay__content-container">

      {{data.content | safe}}

    </div>

    {% if data.footer %}
      <div class="o-overlay__footer-container {{data.footerClasses}}">

        {{data.footer | safe}}

      </div>
    {% endif %}
  </div>
</div>

{% endmacro %}