<button popovertarget="the-popover-1">Open Default Popover</button>
<button popovertarget="the-popover-2">Open Light Dismiss Popover</button>
<button popovertarget="the-popover-3">Open Styled Popover</button>

<div popover id="the-popover-1">
  I'm a popover.

  <button popovertarget="the-popover-1" aria-label="Dismiss popover">✕</button>
</div>

<div popover="auto" id="the-popover-2">
  I'm a light dismiss popover — click outside me.

  <button popovertarget="the-popover-2" aria-label="Dismiss popover">✕</button>
</div>

<div popover="auto" id="the-popover-3">
  I've got fancy styles.

  <button popovertarget="the-popover-3" aria-label="Dismiss popover">✕</button>
</div>

body {
  padding: 2rem;
  font: 100% system-ui, sans-serif;

  > button {
    font: inherit;
    background: #4caf50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
  }
}

[popover] {
  padding: 2rem;
}

#the-popover-3 {
  position: fixed;
  top: 0;
  left: 0;
  inset: auto;
  height: 100svh;
  border: 0;
  box-shadow: 0 0 1rem 40px rgba(0, 0, 0, 0.5);
  width: 250px;

  transition: 0.2s ease-in-out;
  &:popover-open {
    @starting-style {
      translate: -100% 0;
    }
  }

  /* you could probably do something with allow-discrete to animate out I dunno. */
}