<h1>Dialog Animation Demo</h1>
<button id="open-dialog-btn" type="button">
  Open Dialog
</button>
<dialog id="fancy-dialog">
  <section>
    <h2>Fancy Dialog</h2>
    <p>This is a paragraph inside a dialog. How exciting!</p>
    <p>This is another paragraph.</p>
    <div>
      <button id="close-dialog-btn" type="button">
        Close
      </button>
    </div>
  </section>
</dialog>
<p>
  The fade in and out animation of the dialog will only work in browsers that support the @starting-style rule as well as the transition-behavior CSS property.
</p>

button {
  background: #cfe5fd;
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

dialog {
  --duration: 150ms;
  --start-opacity: 0.5;
  --start-scale: scale(0.8);
  border: none;
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);
  padding: 0;

  /* End values for fade out. */
  opacity: var(--start-opacity);
  transform: var(--start-scale);
  transition:
    opacity var(--duration) ease-out,
    transform var(--duration) cubic-bezier(0, 0, 0.2, 1),
    overlay var(--duration) allow-discrete,
    display var(--duration) allow-discrete;
   
  section {
    padding: 1rem;
  }

  h2 {
    margin: 0;
  }
}

dialog[open] {
  /* End values for fade in; start values for fade out. */
  opacity: 1;
  transform: scale(1);

  @starting-style {
    /* Start values vor fade in. */
    opacity: var(--start-opacity);
    transform: var(--start-scale);
  }
}

/* Styling for backdrop behind the dialog */
dialog::backdrop {
  background: rgb(0 0 0 / 0.32);
  /* End value for fade out. */
  opacity: 0;
  transition: opacity var(--duration),
    overlay var(--duration) allow-discrete,
    display var(--duration) allow-discrete;
}

dialog[open]::backdrop {
  /* End value for fade in; start value for fade out. */
  opacity: 1;
}

/* This starting-style rule cannot be nested inside the above selector because the nesting selector cannot represent pseudo-elements. */
@starting-style {
  dialog[open]::backdrop {
    /* Start value vor fade in. */
    opacity: 0;
  }
}

const openDialogBtnRef = document.getElementById("open-dialog-btn");
const closeDialogBtnRef = document.getElementById("close-dialog-btn");
const dialogElementRef = document.getElementById("fancy-dialog");

openDialogBtnRef.addEventListener("click", openMyDialog);
closeDialogBtnRef.addEventListener("click", closeMyDialog);
dialogElementRef.addEventListener("click", onDialogClick);

function openMyDialog() {
    dialogElementRef.showModal();
}
function closeMyDialog() {
    dialogElementRef.close();
}

/**
  * Closes the dialog if its backdrop (the area outside of the dialog) was clicked on.
  * For this to work, the dialog's content needs to be wrapped in an extra element.
*/
function onDialogClick(event) {
  event.stopPropagation();
  // A click on the dialog backdrop is registered as a click on the dialog element.
  if (event.target.tagName === "DIALOG") {
    dialogElementRef.close();
  }
}