<div
  class="SuperModal {{@modifierClassName}}"
  ...attributes
>
  <div
    class="SuperModal-outer flex justify-center flex-col flex-no-wrap {{@outerClassNames}}"
  >

    {{#if @disableOverlayClose}}
      <div
        class="SuperModal-overlay {{@overlayClassNames}}"
        data-test-selector="modal-overlay"
      >
      </div>
    {{else}}
      {{! template-lint-disable no-invalid-interactive }}
      <div
        class="SuperModal-overlay {{@overlayClassNames}}"
        {{on "click" (fn this.closeModal)}}
        data-test-selector="modal-overlay"
      >
      </div>
      {{! template-lint-enable no-invalid-interactive }}
    {{/if}}

    <div class="SuperModal-inner Grid-cell {{@innerClassNames}}">

      {{#unless @hideCloseButton}}
        <button
          type="button"
          class="SuperModal-closeButton {{@closeButtonClassNames}}"
          {{on "click" (fn this.closeModal)}}
          data-test-selector="modal-close-button"
          aria-label="Close"
        >
          &times;
        </button>
      {{/unless}}

      {{yield}}

    </div>
  </div>
</div>
