<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;
}
}