<template>
  <div class="-mx-1.5 -my-1.5">
    <button type="button" class="inline-flex p-1.5 opacity-50 hover:opacity-75" aria-label="Dismiss" @click="$emit('dismiss', $event)">
      <span class="sr-only">Dismiss</span>
      <svg class="h-5 w-5" x-description="Heroicon name: solid/x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>
</template>

<script>
export default {
  emits: ['dismiss']
}
</script>
