<template>
  <section>
    <DisneyButton @click="showDialog">Show</DisneyButton>
    
    <dialog>
      <div class="content">        
        <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 0.5C16.7491 0.5 16.9511 0.701969 16.9511 0.95111V5.6922C22.5664 5.92255 27.0774 10.4336 27.3078 16.0489H32.0489C32.298 16.0489 32.5 16.2509 32.5 16.5C32.5 16.7491 32.298 16.9511 32.0489 16.9511H27.3078C27.0774 22.5664 22.5664 27.0774 16.9511 27.3078V32.0489C16.9511 32.298 16.7491 32.5 16.5 32.5C16.2509 32.5 16.0489 32.298 16.0489 32.0489V27.3078C10.4336 27.0774 5.92255 22.5664 5.6922 16.9511H0.95111C0.701969 16.9511 0.5 16.7491 0.5 16.5C0.5 16.2509 0.701969 16.0489 0.95111 16.0489H5.6922C5.92255 10.4336 10.4336 5.92255 16.0489 5.6922V0.95111C16.0489 0.701969 16.2509 0.5 16.5 0.5ZM6.59574 16.0383C6.82989 10.9299 10.9299 6.82989 16.0383 6.59574C15.8042 11.7042 11.7042 15.8042 6.59574 16.0383ZM16.0383 26.4043C10.9299 26.1701 6.82989 22.0701 6.59574 16.9617C11.7042 17.1958 15.8042 21.2958 16.0383 26.4043ZM16.5 23.7647C15.4603 20.2844 12.7156 17.5397 9.23526 16.5C12.7156 15.4603 15.4603 12.7156 16.5 9.23526C17.5397 12.7156 20.2844 15.4603 23.7647 16.5C20.2844 17.5397 17.5397 20.2844 16.5 23.7647ZM16.9617 26.4043C17.1958 21.2958 21.2958 17.1958 26.4043 16.9617C26.1701 22.0701 22.0701 26.1701 16.9617 26.4043ZM16.9617 6.59574C22.0701 6.82989 26.1701 10.9299 26.4043 16.0383C21.2958 15.8042 17.1958 11.7042 16.9617 6.59574Z" fill="#EAA010"/>
        </svg>
        
        <p>This star was hiding a video from Wish. After viewing, don’t forget to make a wish on this star.</p>
        
        <DisneyButton @click="closeDialog">Close</DisneyButton>
      </div>
    </dialog>
  </section>
</template>

<script setup>
  import DisneyButton from 'https://codepen.io/leemartin/pen/xxMRNrP/aa87b5de90efbbd30e7e49240e3a7b7f.js'
  
  // Show dialog
  // ----------
  function showDialog() {
    // Show modal
    document.querySelector("dialog").showModal()
    
  }
  
  // Close dialog
  // ----------
  function closeDialog() {
    // Close modal
    document.querySelector("dialog").close()
    
  }
  
</script>

<style>
  html, body, #app, section{
    height: 100%;
    width: 100%;
  }
  
  body{
    background: linear-gradient(#000, #171940);
  }
  
  p{
    font: 400 18px "haboro-contrast-condensed", sans-serif;
    line-height: 1.5em;
    text-align: center;
  }
  
  section{
    align-items: center;
    display: flex;
    justify-content: center;
  }
  
  dialog::backdrop{
    background: #171940;
  }
  
  dialog{
    background: white;
    border: 2px solid #EAA010;
    box-sizing: border-box;
    max-height: none;
    max-width: calc(100% - 48px);
    overflow: visible;
    padding: 24px;
    width: 100%;
  }
  
  dialog::before, dialog::after{
    background: white;
    border-style: solid;
    border-width: 2px;
    content: "";
    height: 24px;
    left: 24px;
    position: absolute;
    width: calc(100% - 48px);
  }
  
  dialog::before{
    border-color: #EAA010 #EAA010 white #EAA010;
    border-radius: 24px 24px 0 0;
    top: -28px;    
  }
  
  dialog::after{
    border-color: white #EAA010 #EAA010 #EAA010;
    border-radius: 0 0 24px 24px;
    bottom: -28px;
  }
  
  .content{
    display: grid;
    gap: 24px;
    justify-items: center;
  }
  
  @media (min-width: 640px) {
    dialog{
      max-width: 327px;
    }
  }
</style>