<h1>Dialog with Popover Demo</h1>
<p>
  The following button opens a modal dialog containing buttons that open manual popovers. The first popover can't be interacted with, it's broken. The second one is fine, you can activate its button. Can you tell the difference?
</p>
<button id="open-dialog-btn" type="button">
  Open Dialog
</button>
<dialog id="fancy-dialog">
  <section>
    <h2>Interesting Stuff</h2>
    <p>Here are some interesting details about this awesome item! Wanna add it as a favorite?</p>
      <button class="red-btn" type="button" popovertarget="outer-popover">
        Save as favorite (broken)
      </button>
      <button class="green-btn" type="button" popovertarget="inner-popover">
        Save as favorite (interactive)
      </button>
    <p>This is another paragraph.</p>
    <div>
      <button id="close-dialog-btn" type="button">
        Close Dialog
      </button>
    </div>
    <div id="inner-popover" popover="manual" role="alert">
      Item was saved as a favorite. Click the button if you want to. 😊
      <button type="button" popovertarget="inner-popover">
        Undo
      </button>
    </div>
  </section>
</dialog>
<div id="outer-popover" popover="manual" role="alert">
  Item was saved as a favorite. Try clicking the button and weep! 😿
  <button type="button" popovertarget="inner-popover">
    Undo
  </button>
</div>

html {
  font-family: sans-serif;
}

button {
  background: lighgray;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  
  &.red-btn {
    background: #fa7a6f;
  }
  &.green-btn {
    background: #cfe5cc;
  }
}

dialog {
  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;
  
  section {
    padding: 1rem;
  }

  h2 {
    margin: 0;
  }
}

[popover] {
  background: darkred;
  border: none;
  border-radius: 0.25rem;
  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);
  color: white;
  font-size: 1rem;
  inset: auto 0.5rem 0.5rem 0.5rem;
  margin: 0 auto;
  padding: 0.5rem;
  
  &#inner-popover {
    background: darkgreen;
  }
}

const openDialogBtnRef = document.getElementById("open-dialog-btn");
const closeDialogBtnRef = document.getElementById("close-dialog-btn");
const dialogElementRef = document.getElementById("fancy-dialog");
const innerPopoverRef = document.getElementById("inner-popover");
const outerPopoverRef = document.getElementById("outer-popover");

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

function openMyDialog() {
    dialogElementRef.showModal();
}
function closeMyDialog() {
    dialogElementRef.close();
}
function onDialogClose() {
  innerPopoverRef.hidePopover();
  outerPopoverRef.hidePopover();
}