<div class="actions">
  <button class="button ripple" popovershowtarget="close-pop-up">Open me</button>
  <button class="button ripple" popovershowtarget="input-pop-up">Show input</button>
</div>
<div id="close-pop-up" popover>
  <div class="card elevated">
    <p>See how this button is already focussed?</p>
    <p>Open the other pop-up to see the input focussed</p>
    <div class="actions">
      <button class="button ripple" autofocus popoverhidetarget="close-pop-up">Close</button>
      <button class="button ripple" popovershowtarget="input-pop-up">Show input</button>
    </div>
  </div>
</div>
<div id="input-pop-up" popover>
  <div class="card elevated">
    <label for="name">Name</label>
    <input id="name" autofocus type="text">
    <button class="button ripple" popoverhidetarget="input-pop-up">Close</button>
  </div>
</div>

@layer normalize, open-props, base, mdl, demo;

@layer base {
  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  :where([popover]) {
    margin: auto;
    border-width: initial;
    border-style: solid;
  }

  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: "Google Sans", sans-serif, system-ui;
    align-content: center;
  }
}

@layer demo {
  [popover] {
    padding: var(--size-4);
  }
  [popover] {
    background: none;
    border: 0;
    padding: 0;
    max-width: calc(100% - var(--size-8));
    overflow: visible;
  }

  .card {
    padding: var(--size-6);
    max-width: 100%;
    min-width: 0;
  }

  .card > * + * {
    margin-top: var(--size-4);
  }

  input {
    color: var(--text-1);
  }

  .actions {
    display: flex;
    gap: var(--size-4);
  }

  :focus {
    outline: 4px solid var(--green-4);
  }
}