<main>
  <button class="blue button fill elevated" popovershowtarget="blue-one">
    Take Blue Candy
  </button>
  <div id="blue-one" class="blue" popover>
    <div class="card elevated">
      <svg class="sweet" width="80" role="img" viewBox="0 0 24 24" aria-labelledby="sweetTitle">
        <title id="sweetTitle">Sweet in twist wrapper</title>
        <path fill="currentColor" d="M15.54 8.46c1.96 1.96 1.96 5.12 0 7.08s-5.12 1.96-7.07 0-1.97-5.12 0-7.08 5.11-1.96 7.07 0m3.93-3.91s-.97.12-2.04.81a5.243 5.243 0 0 0-1.5-2.94 4.027 4.027 0 0 0-1.1 3.92c1.39.36 2.47 1.44 2.83 2.83 1.12.3 2.68.15 3.92-1.1a5.247 5.247 0 0 0-2.9-1.49c.39-.58.7-1.25.79-2.03M4.53 19.45s.97-.12 2.04-.81c.15 1.04.65 2.09 1.5 2.94 1.25-1.24 1.4-2.8 1.1-3.92a3.939 3.939 0 0 1-2.83-2.83c-1.12-.3-2.68-.15-3.92 1.1.84.84 1.87 1.34 2.9 1.49-.39.58-.7 1.26-.79 2.03Z" />
      </svg>
      <button popovershowtarget="red-one" class="button ripple">
        Take first red candy
      </button>
      <button popovershowtarget="blue-two" class="button ripple">
        Take another blue candy
      </button>
      <button popoverhidetarget="blue-one" class="button ripple">
        Put this candy back
      </button>
      <button popoverhidetarget="blue-one" class="button ripple">
        Put back blue candies
      </button>
    </div>
  </div>
  <div id="blue-two" class="blue" popover>
    <div class="card elevated">
      <svg class="sweet" width="80" role="img" viewBox="0 0 24 24" aria-labelledby="sweetTitle">
        <title id="sweetTitle">Sweet in twist wrapper</title>
        <path fill="currentColor" d="M15.54 8.46c1.96 1.96 1.96 5.12 0 7.08s-5.12 1.96-7.07 0-1.97-5.12 0-7.08 5.11-1.96 7.07 0m3.93-3.91s-.97.12-2.04.81a5.243 5.243 0 0 0-1.5-2.94 4.027 4.027 0 0 0-1.1 3.92c1.39.36 2.47 1.44 2.83 2.83 1.12.3 2.68.15 3.92-1.1a5.247 5.247 0 0 0-2.9-1.49c.39-.58.7-1.25.79-2.03M4.53 19.45s.97-.12 2.04-.81c.15 1.04.65 2.09 1.5 2.94 1.25-1.24 1.4-2.8 1.1-3.92a3.939 3.939 0 0 1-2.83-2.83c-1.12-.3-2.68-.15-3.92 1.1.84.84 1.87 1.34 2.9 1.49-.39.58-.7 1.26-.79 2.03Z" />
      </svg>
      <button popovershowtarget="red-one" class="button ripple">
        Take first red candy
      </button>
      <button popovershowtarget="blue-three" class="button ripple">
        Take another blue candy
      </button>
      <button popoverhidetarget="blue-two" class="button ripple">
        Put this candy back
      </button>
      <button popoverhidetarget="blue-one" class="button ripple">
        Put back blue candies
      </button>
    </div>
  </div>
  <div id="blue-three" class="blue" popover>
    <div class="card elevated">
      <svg class="sweet" width="80" role="img" viewBox="0 0 24 24" aria-labelledby="sweetTitle">
        <title id="sweetTitle">Sweet in twist wrapper</title>
        <path fill="currentColor" d="M15.54 8.46c1.96 1.96 1.96 5.12 0 7.08s-5.12 1.96-7.07 0-1.97-5.12 0-7.08 5.11-1.96 7.07 0m3.93-3.91s-.97.12-2.04.81a5.243 5.243 0 0 0-1.5-2.94 4.027 4.027 0 0 0-1.1 3.92c1.39.36 2.47 1.44 2.83 2.83 1.12.3 2.68.15 3.92-1.1a5.247 5.247 0 0 0-2.9-1.49c.39-.58.7-1.25.79-2.03M4.53 19.45s.97-.12 2.04-.81c.15 1.04.65 2.09 1.5 2.94 1.25-1.24 1.4-2.8 1.1-3.92a3.939 3.939 0 0 1-2.83-2.83c-1.12-.3-2.68-.15-3.92 1.1.84.84 1.87 1.34 2.9 1.49-.39.58-.7 1.26-.79 2.03Z" />
      </svg>
      <button popovershowtarget="red-one" class="button ripple">
        Take first red candy
      </button>
      <button class="button ripple" disabled>
        Take another blue candy
      </button>
      <button popoverhidetarget="blue-three" class="button ripple">
        Put this candy back
      </button>
      <button popoverhidetarget="blue-one" class="button ripple">
        Put back blue candies
      </button>
    </div>
  </div>
  <button class="red button fill elevated" popovershowtarget="red-one">
    Take Red Candy
  </button>
  <div id="red-one" class="red" popover>
    <div class="card elevated">
      <svg class="sweet" width="80" role="img" viewBox="0 0 24 24" aria-labelledby="sweetTitle">
        <title id="sweetTitle">Sweet in twist wrapper</title>
        <path fill="currentColor" d="M15.54 8.46c1.96 1.96 1.96 5.12 0 7.08s-5.12 1.96-7.07 0-1.97-5.12 0-7.08 5.11-1.96 7.07 0m3.93-3.91s-.97.12-2.04.81a5.243 5.243 0 0 0-1.5-2.94 4.027 4.027 0 0 0-1.1 3.92c1.39.36 2.47 1.44 2.83 2.83 1.12.3 2.68.15 3.92-1.1a5.247 5.247 0 0 0-2.9-1.49c.39-.58.7-1.25.79-2.03M4.53 19.45s.97-.12 2.04-.81c.15 1.04.65 2.09 1.5 2.94 1.25-1.24 1.4-2.8 1.1-3.92a3.939 3.939 0 0 1-2.83-2.83c-1.12-.3-2.68-.15-3.92 1.1.84.84 1.87 1.34 2.9 1.49-.39.58-.7 1.26-.79 2.03Z" />
      </svg>
      <button popovershowtarget="blue-one" class="button ripple">
        Take first blue candy
      </button>
      <button popovershowtarget="red-two" class="button ripple">
        Take another red candy
      </button>
      <button popoverhidetarget="red-one" class="button ripple">
        Put this candy back
      </button>
      <button popoverhidetarget="red-one" class="button ripple">
        Put back red candies
      </button>
    </div>
  </div>
  <div id="red-two" class="red" popover>
    <div class="card elevated">
      <svg class="sweet" width="80" role="img" viewBox="0 0 24 24" aria-labelledby="sweetTitle">
        <title id="sweetTitle">Sweet in twist wrapper</title>
        <path fill="currentColor" d="M15.54 8.46c1.96 1.96 1.96 5.12 0 7.08s-5.12 1.96-7.07 0-1.97-5.12 0-7.08 5.11-1.96 7.07 0m3.93-3.91s-.97.12-2.04.81a5.243 5.243 0 0 0-1.5-2.94 4.027 4.027 0 0 0-1.1 3.92c1.39.36 2.47 1.44 2.83 2.83 1.12.3 2.68.15 3.92-1.1a5.247 5.247 0 0 0-2.9-1.49c.39-.58.7-1.25.79-2.03M4.53 19.45s.97-.12 2.04-.81c.15 1.04.65 2.09 1.5 2.94 1.25-1.24 1.4-2.8 1.1-3.92a3.939 3.939 0 0 1-2.83-2.83c-1.12-.3-2.68-.15-3.92 1.1.84.84 1.87 1.34 2.9 1.49-.39.58-.7 1.26-.79 2.03Z" />
      </svg>
      <button popovershowtarget="blue-one" class="button ripple">
        Take first blue candy
      </button>
      <button popovershowtarget="red-three" class="button ripple">
        Take another red candy
      </button>
      <button popoverhidetarget="red-two" class="button ripple">
        Put this candy back
      </button>
      <button popoverhidetarget="red-one" class="button ripple">
        Put back red candies
      </button>
    </div>
  </div>
  <div id="red-three" class="red" popover>
    <div class="card elevated">
      <svg class="sweet" width="80" role="img" viewBox="0 0 24 24" aria-labelledby="sweetTitle">
        <title id="sweetTitle">Sweet in twist wrapper</title>
        <path fill="currentColor" d="M15.54 8.46c1.96 1.96 1.96 5.12 0 7.08s-5.12 1.96-7.07 0-1.97-5.12 0-7.08 5.11-1.96 7.07 0m3.93-3.91s-.97.12-2.04.81a5.243 5.243 0 0 0-1.5-2.94 4.027 4.027 0 0 0-1.1 3.92c1.39.36 2.47 1.44 2.83 2.83 1.12.3 2.68.15 3.92-1.1a5.247 5.247 0 0 0-2.9-1.49c.39-.58.7-1.25.79-2.03M4.53 19.45s.97-.12 2.04-.81c.15 1.04.65 2.09 1.5 2.94 1.25-1.24 1.4-2.8 1.1-3.92a3.939 3.939 0 0 1-2.83-2.83c-1.12-.3-2.68-.15-3.92 1.1.84.84 1.87 1.34 2.9 1.49-.39.58-.7 1.26-.79 2.03Z" />
      </svg>
      <button popovershowtarget="blue-one" class="button ripple">
        Take first blue candy
      </button>
      <button class="button ripple" disabled>Take another red candy</button>
      <button popoverhidetarget="red-three" class="button ripple">
        Put this candy back
      </button>
      <button popoverhidetarget="red-one" class="button ripple">
        Put back red candies
      </button>
    </div>
  </div>
</main>
@layer normalize, open-props, base, mdl, demo;

@layer demo {
  [popover] {
    padding: var(--size-4);
  }
  [popover] {
    transform: translate(-50%, -50%) translateX(calc(var(--offset-x, 0) * 50%))
      translate(calc(var(--x, 0) * 2vmin), calc(var(--y, 0) * 2vmin))
      translateX(calc(var(--slide-x, 0) * -10%));
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
  }

  @media (prefers-reduced-motion: no-preference) {
    .red[popover]:has(~ .red[popover]:open),
    .blue[popover]:has(~ .blue[popover]:open) {
      transition: transform 0.2s;
    }
  }

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

  .blue {
    --offset-x: -1;
  }

  .red {
    --offset-x: 1;
  }

  #blue-two,
  #red-two {
    --x: 1;
    --y: -1;
  }

  #blue-three,
  #red-three {
    --x: 2;
    --y: -2;
  }

  [popover]::backdrop {
    background: hsl(0 10% 10%/ 0.35);
    opacity: 0;
    transition: all 250ms;
    backdrop-filter: blur(2px);
  }

  .red[popover]:has(~ .red[popover]:open):hover,
  .blue[popover]:has(~ .blue[popover]:open):hover {
    --slide-x: 1;
  }

  .blue.button {
    background: var(--blue-4);
    color: var(--gray-0);
  }

  .red.button {
    background: var(--red-4);
    color: var(--gray-0);
  }

  .blue svg {
    color: var(--blue-4);
  }

  .red svg {
    color: var(--red-4);
  }

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

  .card.elevated {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: var(--shadow-5);
    min-width: auto;
    padding: var(--size-4);
    background: var(--gray-0);
  }

  .card .button {
    width: 100%;
  }
}

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

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

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

External CSS

  1. https://codepen.io/web-dot-dev/pen/XWqWYgB.css
  2. https://codepen.io/web-dot-dev/pen/ZExZWBQ.css

External JavaScript

  1. https://codepen.io/web-dot-dev/pen/XWqWYgB.js
  2. https://codepen.io/web-dot-dev/pen/ZExZWBQ.js