<template >
  <div
    class="modal"
    ref="modal"
  >
    <button
      class="modal__button"
      @click="closeModal()"
    >
      <span class="sr-only" v-text="'Close modal'" />
      <svg class="icon-x" viewBox="0 0 51.9 51.1">
        <path d="m2.4 1.7 48.1 48M1.4 49.4l48-48" />
      </svg>
    </button>
    <div class="modal__main">
      <slot />
    </div>
  </div>
</template>

<script>
// The trick with this simple modal
// is that it is completely controlled by
// the active state of it's sibling button
// IE the modal.previousSibling

export default {
  methods: {
    closeModal() {
      const modal = this.$refs.modal;

      modal.previousSibling.click();

      console.log(this);
    }
  }
}
</script>