<div
    class="modal fade component-backend-modal"
    role="dialog"
    aria-modal="true"
    v-if="visible"
    v-bind:aria-labelledby="ariaLabeledBy"
    :style="containerStyle"
    :class="containerCssClass"
    @click="onOverlayClick"
>
    <div
        ref="document"
        role="document"
        class="modal-dialog"
        :class="cssClass"
    >
        <div
            ref="content"
            class="modal-content"
            :class="contentCssClassName"
            :style="modalStyle"
            @mousedown="onMouseDown"
            @transitionend="onTransitionEnd"
        >
            <slot name="content"></slot>

            <template v-if="resizable">
                <div v-if="resizable === true || resizable === 'vertical'" class="resize-handle" data-side="bt"></div>
                <div v-if="resizable === true || resizable === 'vertical'" class="resize-handle" data-side="tp"></div>
                <div v-if="resizable === true || resizable === 'horizontal'" class="resize-handle" data-side="lf"></div>
                <div v-if="resizable === true || resizable === 'horizontal'" class="resize-handle" data-side="rt"></div>
                <div v-if="resizable === true" class="resize-handle" data-side="bt-rt"></div>
                <div v-if="resizable === true" class="resize-handle" data-side="bt-lf"></div>
                <div v-if="resizable === true" class="resize-handle" data-side="tp-rt"></div>
                <div v-if="resizable === true" class="resize-handle" data-side="tp-lf"></div>
            </template>
        </div>
    </div>
</div>