# Email snooze menu

> An email's clock opens a menu of moments, each with a tiny sky and the real time in your language; picking one hides it.

- Category: [Overlays](https://library.aimran.es/components/overlays)
- Built with: HTML + CSS
- Live editor: https://library.aimran.es/blocks/uv-ov-snooze-picker
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

Snoozing an email is a small decision that deserves a clear menu. The clock in a hovered row opens a popover with later today, tomorrow, this weekend and next week, each with a mini sky whose sun sits at that hour and a time formatted for the page language with Intl. Choosing hides the row and shows an undo bar. It fits mail, task and reminder apps.

The main color is the active state and the second one the undo link. The labels are computed from the real date, so they stay correct every day, and the menu works with arrow keys, Enter and Escape.

## Code

### HTML

```html
<div class="uvq13-snz"><p class="hh">Inbox</p><ul class="ib"><li class="r on"><span class="av" style="--c:#f97316" aria-hidden="true">C</span><span class="tx"><b>Carmen Gil</b><span>Renovation quote</span></span><span class="ha"><button type="button" class="ar" aria-label="Archive"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7.5h16v-3H4zM5.5 7.5V19h13V7.5M10 11.5h4"/></svg></button><button type="button" class="fire" aria-haspopup="menu" aria-label="Snooze"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="13" r="7.5"/><path d="M12 9.5V13l2.5 1.5M4.5 4.5l2.5-2M19.5 4.5l-2.5-2"/></svg></button></span></li><li class="r"><span class="av" style="--c:#0ea5e9" aria-hidden="true">P</span><span class="tx"><b>Pablo Ruiz</b><span>Trip photos</span></span><small>9:12</small></li><li class="r"><span class="av" style="--c:#e11d48" aria-hidden="true">M</span><span class="tx"><b>Marta León</b><span>Concert tickets</span></span><small>8:05</small></li></ul><div class="po" role="menu" aria-label="Snooze until…"><p class="pt" aria-hidden="true">Snooze until…</p><button type="button" role="menuitem" class="op" data-k="ev"><i class="sk ev" aria-hidden="true"></i><span>Later today</span><small></small></button><button type="button" role="menuitem" class="op" data-k="tm"><i class="sk tm" aria-hidden="true"></i><span>Tomorrow morning</span><small></small></button><button type="button" role="menuitem" class="op" data-k="we"><i class="sk we" aria-hidden="true"></i><span>This weekend</span><small></small></button><button type="button" role="menuitem" class="op" data-k="nw"><i class="sk nw" aria-hidden="true"></i><span>Next week</span><small></small></button><button type="button" role="menuitem" class="op" data-k="pk"><i class="sk pk" aria-hidden="true"></i><span>Pick date and time</span><small></small></button><div class="cu"><div class="dy"></div><div class="hs"><button type="button" aria-pressed="true">8:00</button><button type="button" aria-pressed="false">13:00</button><button type="button" aria-pressed="false">18:00</button></div><button type="button" class="sv">Snooze</button></div></div><p class="tst" aria-live="polite"><span class="m"></span><button type="button" class="un">Undo</button></p></div>
```

### CSS

```css
.uvq13-snz {
  --c1: #0891b2;
  --c2: #fde68a;
  --s: 16px;
  /* tamaño */
  --k: 1;
  /* velocidad */
  --fg: #1d1d1f;
  /* texto */
  --bg: #f5f5f7;
  /* fondo */
}

.uvq13-snz {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 22em;
  height: 20em;
  border-radius: 1.2em;
  overflow: hidden;
  background: color-mix(in srgb,var(--fg) 3%,var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--fg) 9%,transparent);
}

.uvq13-snz .hh {
  margin: 0;
  padding: 1em 1.1em .4em;
  font-weight: 800;
}

.uvq13-snz .ib {
  list-style: none;
  margin: 0;
  padding: 0 .6em;
}

.uvq13-snz .r {
  display: flex;
  align-items: center;
  gap: .6em;
  height: 3em;
  padding: 0 .6em;
  border-radius: .7em;
  overflow: hidden;
  transition: height calc(0.4s / var(--k)) cubic-bezier(.22,1,.36,1),opacity calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1),background calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq13-snz .r.on {
  background: color-mix(in srgb,var(--fg) 6%,transparent);
}

.uvq13-snz .r.gone {
  height: 0;
  opacity: 0;
}

.uvq13-snz .av {
  display: grid;
  place-items: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  font-size: .85em;
  font-weight: 800;
  color: #fff;
  background: var(--c);
}

.uvq13-snz .tx {
  flex: 1;
  min-width: 0;
  display: grid;
  font-size: .78em;
}

.uvq13-snz .tx span {
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uvq13-snz .r small {
  font-size: .66em;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
}

.uvq13-snz .ha {
  display: flex;
  gap: .2em;
}

.uvq13-snz .ha button {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  transition: background calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq13-snz .ha button:hover,.uvq13-snz.open .fire {
  color: var(--c1);
  background: color-mix(in srgb,var(--c1) 14%,transparent);
}

.uvq13-snz .ha svg {
  width: 1.15em;
  height: 1.15em;
}

.uvq13-snz .po {
  position: absolute;
  right: 1.1em;
  top: 5.5em;
  z-index: 5;
  width: 15.6em;
  padding: .45em;
  box-sizing: border-box;
  border-radius: .9em;
  background: color-mix(in srgb,var(--fg) 2%,var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--fg) 9%,transparent),0 1.6em 3.2em -1.2em rgba(0,0,0,.5);
  background: var(--bg);
  transform-origin: 90% 0;
  transform: scale(.92) translateY(-.4em);
  opacity: 0;
  pointer-events: none;
  transition: transform calc(0.3s / var(--k)) cubic-bezier(.22,1,.36,1),opacity calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq13-snz.open .po {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.uvq13-snz .pt {
  margin: .2em .5em .3em;
  font-size: .62em;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
}

.uvq13-snz .op {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: .6em;
  box-sizing: border-box;
  width: 100%;
  padding: .34em .5em;
  border-radius: .6em;
  font-size: .76em;
  text-align: left;
  transition: background calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq13-snz .op:hover,.uvq13-snz .op:focus-visible {
  outline: 0;
  background: color-mix(in srgb,var(--c1) 12%,transparent);
}

.uvq13-snz .op span {
  flex: 1;
  white-space: nowrap;
}

.uvq13-snz .op small {
  white-space: nowrap;
  font-size: .9em;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  font-variant-numeric: tabular-nums;
}

.uvq13-snz .sk {
  position: relative;
  flex: none;
  width: 1.8em;
  height: 1.8em;
  border-radius: .5em;
  overflow: hidden;
}

.uvq13-snz .sk::before {
  content: "";
  position: absolute;
  left: var(--sx,50%);
  top: var(--sy,50%);
  width: .6em;
  height: .6em;
  margin: -.3em;
  border-radius: 50%;
  background: #fff7d6;
  box-shadow: 0 0 .4em #fde68a;
  transition: transform calc(0.5s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq13-snz .sk::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background: rgba(0,0,0,.25);
}

.uvq13-snz .ev {
  --sx: 72%;
  --sy: 62%;
  background: linear-gradient(180deg,#7c3aed,#f97316);
}

.uvq13-snz .tm {
  --sx: 28%;
  --sy: 64%;
  background: linear-gradient(180deg,#93c5fd,#fbcfe8);
}

.uvq13-snz .we {
  --sx: 50%;
  --sy: 30%;
  background: linear-gradient(180deg,#38bdf8,#bae6fd);
}

.uvq13-snz .nw {
  --sx: 30%;
  --sy: 44%;
  background: linear-gradient(180deg,#1e3a8a,var(--c1));
}

.uvq13-snz .pk {
  background: color-mix(in srgb,var(--c2) 70%,var(--bg));
}

.uvq13-snz .pk::before {
  left: 50%;
  top: 50%;
  width: .95em;
  height: .85em;
  margin: -.42em -.47em;
  border-radius: .15em;
  background: linear-gradient(var(--c1) 0 .25em,#fff 0);
  box-shadow: none;
}

.uvq13-snz .pk::after {
  display: none;
}

.uvq13-snz .op:hover .sk:not(.pk)::before,.uvq13-snz .op:focus-visible .sk:not(.pk)::before {
  transform: translateY(-.3em);
}

.uvq13-snz .cu {
  display: none;
  padding: .4em .5em .5em;
}

.uvq13-snz .po.pick .cu {
  display: block;
  animation: uvq13-snz-i calc(0.3s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq13-snz .dy {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: .2em;
  margin-bottom: .4em;
}

.uvq13-snz .dy button,.uvq13-snz .hs button {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: .3em 0;
  border-radius: .4em;
  font-size: .6em;
  line-height: 1.2;
  text-align: center;
  background: color-mix(in srgb,var(--fg) 6%,transparent);
}

.uvq13-snz .dy b {
  display: block;
  font-size: 1.25em;
}

.uvq13-snz .hs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .25em;
  margin-bottom: .45em;
}

.uvq13-snz .hs button {
  font-size: .66em;
  padding: .4em 0;
}

.uvq13-snz [aria-pressed="true"] {
  color: #fff;
  background: var(--c1);
}

.uvq13-snz .sv {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  padding: .5em;
  border-radius: .5em;
  font-size: .72em;
  font-weight: 700;
  color: #fff;
  background: var(--c1);
}

.uvq13-snz button:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq13-snz .op:focus-visible {
  box-shadow: inset 0 0 0 2px var(--c1);
}

.uvq13-snz .tst {
  position: absolute;
  left: 1em;
  right: 1em;
  bottom: 1em;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 0;
  padding: .55em .6em .55em .9em;
  border-radius: .8em;
  font-size: .74em;
  color: var(--bg);
  background: var(--fg);
  opacity: 0;
  transform: translateY(.6em);
  pointer-events: none;
  transition: opacity calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1),transform calc(0.35s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq13-snz .tst.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.uvq13-snz .tst .m {
  flex: 1;
}

.uvq13-snz .un {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: .35em .6em;
  border-radius: .5em;
  font-weight: 800;
  color: var(--c2);
}

@keyframes uvq13-snz-i {
  from {
    opacity: 0;
    transform: translateY(-.3em);
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq13-snz,.uvq13-snz *,.uvq13-snz *::before,.uvq13-snz *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
```

### JavaScript

```js
document.querySelectorAll(".uvq13-snz").forEach(el => {
  const fire=el.querySelector(".fire"),scr=el.querySelector(".scr"),pnl=el.querySelector(".po");let tms=[];const later=(f,ms)=>tms.push(setTimeout(f,ms));
const foc=(t,ms)=>later(()=>{const n=typeof t==="string"?el.querySelector(t):t;n&&n.focus({preventScroll:true})},ms||0);
const isOpen=()=>el.classList.contains("open");
const open=u=>{if(isOpen())return;el.classList.add("open");pnl.inert=false;fire&&fire.setAttribute("aria-expanded","true");po.classList.remove('pick');fill();u&&foc(ops[0],200)};
const close=()=>{if(!isOpen())return;el.classList.remove("open");pnl.inert=true;fire&&fire.setAttribute("aria-expanded","false");;fire&&fire.focus({preventScroll:true})};
fire&&fire.addEventListener("click",()=>isOpen()?close():open(true));scr&&scr.addEventListener("click",()=>close());
el.addEventListener("keydown",e=>{if(!isOpen())return;if(e.key==="Escape"){e.preventDefault();e.stopPropagation();close()}else if(e.key==="Tab"){const f=[...pnl.querySelectorAll('button:not([disabled]),input:not([disabled]),textarea,a[href],[tabindex="0"]')].filter(x=>x.getClientRects().length);if(!f.length){e.preventDefault();return}const a=f[0],z=f[f.length-1],ac=document.activeElement;if(e.shiftKey&&(ac===a||!pnl.contains(ac))){e.preventDefault();z.focus()}else if(!e.shiftKey&&(ac===z||!pnl.contains(ac))){e.preventDefault();a.focus()}}});
pnl.inert=true;later(()=>open(false),600);const po=el.querySelector(".po"),ops=[...el.querySelectorAll(".op")],row=el.querySelector(".r.on"),tst=el.querySelector(".tst"),dy=el.querySelector(".dy"),hs=[...el.querySelectorAll(".hs button")];let tt=0;
const L=document.documentElement.lang||undefined,wd=d=>new Intl.DateTimeFormat(L,{weekday:"short"}).format(d),hm=(h,m)=>{const d=new Date();d.setHours(h,m||0,0,0);return new Intl.DateTimeFormat(L,{hour:"numeric",minute:"2-digit"}).format(d)};
const add=n=>{const d=new Date();d.setDate(d.getDate()+n);return d};
const fill=()=>{const now=new Date(),dw=now.getDay(),toSat=(6-dw+7)%7||7,toMon=(8-dw)%7||7;const v={ev:hm(18),tm:wd(add(1))+" "+hm(8),we:wd(add(toSat))+" "+hm(9),nw:wd(add(toMon))+" "+hm(8),pk:""};ops.forEach(o=>o.querySelector("small").textContent=v[o.dataset.k]);if(!dy.children.length)for(let i=1;i<=7;i++){const d=add(i),b=document.createElement("button");b.type="button";b.setAttribute("aria-pressed",String(i===1));b.innerHTML="<span></span><b></b>";b.firstChild.textContent=wd(d);b.lastChild.textContent=String(d.getDate());b.addEventListener("click",()=>press(dy,b));dy.appendChild(b)}};
const press=(g,b)=>[...(g.children||g)].forEach(x=>x.setAttribute("aria-pressed",String(x===b)));
hs.forEach(b=>b.addEventListener("click",()=>press(hs,b)));
const done=txt=>{close();row.classList.add("gone");foc(".un",60);tst.querySelector(".m").textContent=txt;tst.classList.add("on");clearTimeout(tt);tt=setTimeout(()=>tst.classList.remove("on"),4500)};
ops.forEach((o,i)=>{o.addEventListener("click",()=>{if(o.dataset.k==="pk"){po.classList.add("pick");later(()=>dy.firstChild&&dy.firstChild.focus({preventScroll:true}),60);return}done(o.querySelector("span").textContent+" · "+o.querySelector("small").textContent)});o.addEventListener("keydown",e=>{const m={ArrowDown:1,ArrowUp:-1}[e.key];if(m){e.preventDefault();ops[(i+m+ops.length)%ops.length].focus()}})});
el.querySelector(".sv").addEventListener("click",()=>{const d=dy.querySelector("[aria-pressed='true']"),h=hs.find(x=>x.getAttribute("aria-pressed")==="true");done((d?d.textContent.replace(/(\D+)(\d+)/,"$1 $2"):"")+" · "+h.textContent)});
el.querySelector(".un").addEventListener("click",()=>{row.classList.remove("gone");tst.classList.remove("on");fire.focus({preventScroll:true})});
el.addEventListener("pointerdown",e=>{if(isOpen()&&!e.target.closest(".po,.fire"))close()});
return()=>{tms.forEach(clearTimeout);clearTimeout(tt)}
});
```

### React

```tsx
// @ts-nocheck: setup() es JavaScript del DOM sin tipos, el mismo de la pestaña JS.
import { useEffect, useRef, type CSSProperties } from "react";

const css = `
.uvq13-snz {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 22em;
  height: 20em;
  border-radius: 1.2em;
  overflow: hidden;
  background: color-mix(in srgb,var(--fg) 3%,var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--fg) 9%,transparent);
}

.uvq13-snz .hh {
  margin: 0;
  padding: 1em 1.1em .4em;
  font-weight: 800;
}

.uvq13-snz .ib {
  list-style: none;
  margin: 0;
  padding: 0 .6em;
}

.uvq13-snz .r {
  display: flex;
  align-items: center;
  gap: .6em;
  height: 3em;
  padding: 0 .6em;
  border-radius: .7em;
  overflow: hidden;
  transition: height calc(0.4s / var(--k)) cubic-bezier(.22,1,.36,1),opacity calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1),background calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq13-snz .r.on {
  background: color-mix(in srgb,var(--fg) 6%,transparent);
}

.uvq13-snz .r.gone {
  height: 0;
  opacity: 0;
}

.uvq13-snz .av {
  display: grid;
  place-items: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  font-size: .85em;
  font-weight: 800;
  color: #fff;
  background: var(--c);
}

.uvq13-snz .tx {
  flex: 1;
  min-width: 0;
  display: grid;
  font-size: .78em;
}

.uvq13-snz .tx span {
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uvq13-snz .r small {
  font-size: .66em;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
}

.uvq13-snz .ha {
  display: flex;
  gap: .2em;
}

.uvq13-snz .ha button {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  transition: background calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq13-snz .ha button:hover,.uvq13-snz.open .fire {
  color: var(--c1);
  background: color-mix(in srgb,var(--c1) 14%,transparent);
}

.uvq13-snz .ha svg {
  width: 1.15em;
  height: 1.15em;
}

.uvq13-snz .po {
  position: absolute;
  right: 1.1em;
  top: 5.5em;
  z-index: 5;
  width: 15.6em;
  padding: .45em;
  box-sizing: border-box;
  border-radius: .9em;
  background: color-mix(in srgb,var(--fg) 2%,var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--fg) 9%,transparent),0 1.6em 3.2em -1.2em rgba(0,0,0,.5);
  background: var(--bg);
  transform-origin: 90% 0;
  transform: scale(.92) translateY(-.4em);
  opacity: 0;
  pointer-events: none;
  transition: transform calc(0.3s / var(--k)) cubic-bezier(.22,1,.36,1),opacity calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq13-snz.open .po {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.uvq13-snz .pt {
  margin: .2em .5em .3em;
  font-size: .62em;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
}

.uvq13-snz .op {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: .6em;
  box-sizing: border-box;
  width: 100%;
  padding: .34em .5em;
  border-radius: .6em;
  font-size: .76em;
  text-align: left;
  transition: background calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq13-snz .op:hover,.uvq13-snz .op:focus-visible {
  outline: 0;
  background: color-mix(in srgb,var(--c1) 12%,transparent);
}

.uvq13-snz .op span {
  flex: 1;
  white-space: nowrap;
}

.uvq13-snz .op small {
  white-space: nowrap;
  font-size: .9em;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  font-variant-numeric: tabular-nums;
}

.uvq13-snz .sk {
  position: relative;
  flex: none;
  width: 1.8em;
  height: 1.8em;
  border-radius: .5em;
  overflow: hidden;
}

.uvq13-snz .sk::before {
  content: "";
  position: absolute;
  left: var(--sx,50%);
  top: var(--sy,50%);
  width: .6em;
  height: .6em;
  margin: -.3em;
  border-radius: 50%;
  background: #fff7d6;
  box-shadow: 0 0 .4em #fde68a;
  transition: transform calc(0.5s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq13-snz .sk::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background: rgba(0,0,0,.25);
}

.uvq13-snz .ev {
  --sx: 72%;
  --sy: 62%;
  background: linear-gradient(180deg,#7c3aed,#f97316);
}

.uvq13-snz .tm {
  --sx: 28%;
  --sy: 64%;
  background: linear-gradient(180deg,#93c5fd,#fbcfe8);
}

.uvq13-snz .we {
  --sx: 50%;
  --sy: 30%;
  background: linear-gradient(180deg,#38bdf8,#bae6fd);
}

.uvq13-snz .nw {
  --sx: 30%;
  --sy: 44%;
  background: linear-gradient(180deg,#1e3a8a,var(--c1));
}

.uvq13-snz .pk {
  background: color-mix(in srgb,var(--c2) 70%,var(--bg));
}

.uvq13-snz .pk::before {
  left: 50%;
  top: 50%;
  width: .95em;
  height: .85em;
  margin: -.42em -.47em;
  border-radius: .15em;
  background: linear-gradient(var(--c1) 0 .25em,#fff 0);
  box-shadow: none;
}

.uvq13-snz .pk::after {
  display: none;
}

.uvq13-snz .op:hover .sk:not(.pk)::before,.uvq13-snz .op:focus-visible .sk:not(.pk)::before {
  transform: translateY(-.3em);
}

.uvq13-snz .cu {
  display: none;
  padding: .4em .5em .5em;
}

.uvq13-snz .po.pick .cu {
  display: block;
  animation: uvq13-snz-i calc(0.3s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq13-snz .dy {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: .2em;
  margin-bottom: .4em;
}

.uvq13-snz .dy button,.uvq13-snz .hs button {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: .3em 0;
  border-radius: .4em;
  font-size: .6em;
  line-height: 1.2;
  text-align: center;
  background: color-mix(in srgb,var(--fg) 6%,transparent);
}

.uvq13-snz .dy b {
  display: block;
  font-size: 1.25em;
}

.uvq13-snz .hs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .25em;
  margin-bottom: .45em;
}

.uvq13-snz .hs button {
  font-size: .66em;
  padding: .4em 0;
}

.uvq13-snz [aria-pressed="true"] {
  color: #fff;
  background: var(--c1);
}

.uvq13-snz .sv {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  padding: .5em;
  border-radius: .5em;
  font-size: .72em;
  font-weight: 700;
  color: #fff;
  background: var(--c1);
}

.uvq13-snz button:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq13-snz .op:focus-visible {
  box-shadow: inset 0 0 0 2px var(--c1);
}

.uvq13-snz .tst {
  position: absolute;
  left: 1em;
  right: 1em;
  bottom: 1em;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 0;
  padding: .55em .6em .55em .9em;
  border-radius: .8em;
  font-size: .74em;
  color: var(--bg);
  background: var(--fg);
  opacity: 0;
  transform: translateY(.6em);
  pointer-events: none;
  transition: opacity calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1),transform calc(0.35s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq13-snz .tst.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.uvq13-snz .tst .m {
  flex: 1;
}

.uvq13-snz .un {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: .35em .6em;
  border-radius: .5em;
  font-weight: 800;
  color: var(--c2);
}

@keyframes uvq13-snz-i {
  from {
    opacity: 0;
    transform: translateY(-.3em);
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq13-snz,.uvq13-snz *,.uvq13-snz *::before,.uvq13-snz *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

// Interacción en JavaScript del DOM: la misma que en la pestaña JS.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function setup(el: any) {
  const fire=el.querySelector(".fire"),scr=el.querySelector(".scr"),pnl=el.querySelector(".po");let tms=[];const later=(f,ms)=>tms.push(setTimeout(f,ms));
const foc=(t,ms)=>later(()=>{const n=typeof t==="string"?el.querySelector(t):t;n&&n.focus({preventScroll:true})},ms||0);
const isOpen=()=>el.classList.contains("open");
const open=u=>{if(isOpen())return;el.classList.add("open");pnl.inert=false;fire&&fire.setAttribute("aria-expanded","true");po.classList.remove('pick');fill();u&&foc(ops[0],200)};
const close=()=>{if(!isOpen())return;el.classList.remove("open");pnl.inert=true;fire&&fire.setAttribute("aria-expanded","false");;fire&&fire.focus({preventScroll:true})};
fire&&fire.addEventListener("click",()=>isOpen()?close():open(true));scr&&scr.addEventListener("click",()=>close());
el.addEventListener("keydown",e=>{if(!isOpen())return;if(e.key==="Escape"){e.preventDefault();e.stopPropagation();close()}else if(e.key==="Tab"){const f=[...pnl.querySelectorAll('button:not([disabled]),input:not([disabled]),textarea,a[href],[tabindex="0"]')].filter(x=>x.getClientRects().length);if(!f.length){e.preventDefault();return}const a=f[0],z=f[f.length-1],ac=document.activeElement;if(e.shiftKey&&(ac===a||!pnl.contains(ac))){e.preventDefault();z.focus()}else if(!e.shiftKey&&(ac===z||!pnl.contains(ac))){e.preventDefault();a.focus()}}});
pnl.inert=true;later(()=>open(false),600);const po=el.querySelector(".po"),ops=[...el.querySelectorAll(".op")],row=el.querySelector(".r.on"),tst=el.querySelector(".tst"),dy=el.querySelector(".dy"),hs=[...el.querySelectorAll(".hs button")];let tt=0;
const L=document.documentElement.lang||undefined,wd=d=>new Intl.DateTimeFormat(L,{weekday:"short"}).format(d),hm=(h,m)=>{const d=new Date();d.setHours(h,m||0,0,0);return new Intl.DateTimeFormat(L,{hour:"numeric",minute:"2-digit"}).format(d)};
const add=n=>{const d=new Date();d.setDate(d.getDate()+n);return d};
const fill=()=>{const now=new Date(),dw=now.getDay(),toSat=(6-dw+7)%7||7,toMon=(8-dw)%7||7;const v={ev:hm(18),tm:wd(add(1))+" "+hm(8),we:wd(add(toSat))+" "+hm(9),nw:wd(add(toMon))+" "+hm(8),pk:""};ops.forEach(o=>o.querySelector("small").textContent=v[o.dataset.k]);if(!dy.children.length)for(let i=1;i<=7;i++){const d=add(i),b=document.createElement("button");b.type="button";b.setAttribute("aria-pressed",String(i===1));b.innerHTML="<span></span><b></b>";b.firstChild.textContent=wd(d);b.lastChild.textContent=String(d.getDate());b.addEventListener("click",()=>press(dy,b));dy.appendChild(b)}};
const press=(g,b)=>[...(g.children||g)].forEach(x=>x.setAttribute("aria-pressed",String(x===b)));
hs.forEach(b=>b.addEventListener("click",()=>press(hs,b)));
const done=txt=>{close();row.classList.add("gone");foc(".un",60);tst.querySelector(".m").textContent=txt;tst.classList.add("on");clearTimeout(tt);tt=setTimeout(()=>tst.classList.remove("on"),4500)};
ops.forEach((o,i)=>{o.addEventListener("click",()=>{if(o.dataset.k==="pk"){po.classList.add("pick");later(()=>dy.firstChild&&dy.firstChild.focus({preventScroll:true}),60);return}done(o.querySelector("span").textContent+" · "+o.querySelector("small").textContent)});o.addEventListener("keydown",e=>{const m={ArrowDown:1,ArrowUp:-1}[e.key];if(m){e.preventDefault();ops[(i+m+ops.length)%ops.length].focus()}})});
el.querySelector(".sv").addEventListener("click",()=>{const d=dy.querySelector("[aria-pressed='true']"),h=hs.find(x=>x.getAttribute("aria-pressed")==="true");done((d?d.textContent.replace(/(\D+)(\d+)/,"$1 $2"):"")+" · "+h.textContent)});
el.querySelector(".un").addEventListener("click",()=>{row.classList.remove("gone");tst.classList.remove("on");fire.focus({preventScroll:true})});
el.addEventListener("pointerdown",e=>{if(isOpen()&&!e.target.closest(".po,.fire"))close()});
return()=>{tms.forEach(clearTimeout);clearTimeout(tt)}
}

export default function OvSnoozePicker() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current?.firstElementChild;
    return el ? setup(el) : undefined;
  }, []);

  return (
    <>
      <style>{css}</style>
      <div
        ref={ref} style={{
          "--c1": "#0891b2",
          "--c2": "#fde68a",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <div className="uvq13-snz"><p className="hh">Inbox</p><ul className="ib"><li className="r on"><span className="av" style={{ "--c": "#f97316" } as CSSProperties} aria-hidden="true">C</span><span className="tx"><b>Carmen Gil</b><span>Renovation quote</span></span><span className="ha"><button type="button" className="ar" aria-label="Archive"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 7.5h16v-3H4zM5.5 7.5V19h13V7.5M10 11.5h4" /></svg></button><button type="button" className="fire" aria-haspopup="menu" aria-label="Snooze"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="13" r="7.5" /><path d="M12 9.5V13l2.5 1.5M4.5 4.5l2.5-2M19.5 4.5l-2.5-2" /></svg></button></span></li><li className="r"><span className="av" style={{ "--c": "#0ea5e9" } as CSSProperties} aria-hidden="true">P</span><span className="tx"><b>Pablo Ruiz</b><span>Trip photos</span></span><small>9:12</small></li><li className="r"><span className="av" style={{ "--c": "#e11d48" } as CSSProperties} aria-hidden="true">M</span><span className="tx"><b>Marta León</b><span>Concert tickets</span></span><small>8:05</small></li></ul><div className="po" role="menu" aria-label="Snooze until…"><p className="pt" aria-hidden="true">Snooze until…</p><button type="button" role="menuitem" className="op" data-k="ev"><i className="sk ev" aria-hidden="true"></i><span>Later today</span><small></small></button><button type="button" role="menuitem" className="op" data-k="tm"><i className="sk tm" aria-hidden="true"></i><span>Tomorrow morning</span><small></small></button><button type="button" role="menuitem" className="op" data-k="we"><i className="sk we" aria-hidden="true"></i><span>This weekend</span><small></small></button><button type="button" role="menuitem" className="op" data-k="nw"><i className="sk nw" aria-hidden="true"></i><span>Next week</span><small></small></button><button type="button" role="menuitem" className="op" data-k="pk"><i className="sk pk" aria-hidden="true"></i><span>Pick date and time</span><small></small></button><div className="cu"><div className="dy"></div><div className="hs"><button type="button" aria-pressed="true">8:00</button><button type="button" aria-pressed="false">13:00</button><button type="button" aria-pressed="false">18:00</button></div><button type="button" className="sv">Snooze</button></div></div><p className="tst" aria-live="polite"><span className="m"></span><button type="button" className="un">Undo</button></p></div>
      </div>
    </>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Email snooze menu” block (Overlays) from AIMRAN Library to my project.

## What it is
An email's clock opens a menu of moments, each with a tiny sky and the real time in your language; picking one hides it.

## Chosen settings
- Main color: #0891b2
- Secondary color: #fde68a
- Size: 16px (from 12 to 24px)
- Speed: 1x (from 0.5 to 2x)
- Text: "Posponer hasta…"

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
// @ts-nocheck: setup() es JavaScript del DOM sin tipos, el mismo de la pestaña JS.
import { useEffect, useRef, type CSSProperties } from "react";

const css = `
.uvq13-snz {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 22em;
  height: 20em;
  border-radius: 1.2em;
  overflow: hidden;
  background: color-mix(in srgb,var(--fg) 3%,var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--fg) 9%,transparent);
}

.uvq13-snz .hh {
  margin: 0;
  padding: 1em 1.1em .4em;
  font-weight: 800;
}

.uvq13-snz .ib {
  list-style: none;
  margin: 0;
  padding: 0 .6em;
}

.uvq13-snz .r {
  display: flex;
  align-items: center;
  gap: .6em;
  height: 3em;
  padding: 0 .6em;
  border-radius: .7em;
  overflow: hidden;
  transition: height calc(0.4s / var(--k)) cubic-bezier(.22,1,.36,1),opacity calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1),background calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq13-snz .r.on {
  background: color-mix(in srgb,var(--fg) 6%,transparent);
}

.uvq13-snz .r.gone {
  height: 0;
  opacity: 0;
}

.uvq13-snz .av {
  display: grid;
  place-items: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  font-size: .85em;
  font-weight: 800;
  color: #fff;
  background: var(--c);
}

.uvq13-snz .tx {
  flex: 1;
  min-width: 0;
  display: grid;
  font-size: .78em;
}

.uvq13-snz .tx span {
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uvq13-snz .r small {
  font-size: .66em;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
}

.uvq13-snz .ha {
  display: flex;
  gap: .2em;
}

.uvq13-snz .ha button {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  transition: background calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq13-snz .ha button:hover,.uvq13-snz.open .fire {
  color: var(--c1);
  background: color-mix(in srgb,var(--c1) 14%,transparent);
}

.uvq13-snz .ha svg {
  width: 1.15em;
  height: 1.15em;
}

.uvq13-snz .po {
  position: absolute;
  right: 1.1em;
  top: 5.5em;
  z-index: 5;
  width: 15.6em;
  padding: .45em;
  box-sizing: border-box;
  border-radius: .9em;
  background: color-mix(in srgb,var(--fg) 2%,var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--fg) 9%,transparent),0 1.6em 3.2em -1.2em rgba(0,0,0,.5);
  background: var(--bg);
  transform-origin: 90% 0;
  transform: scale(.92) translateY(-.4em);
  opacity: 0;
  pointer-events: none;
  transition: transform calc(0.3s / var(--k)) cubic-bezier(.22,1,.36,1),opacity calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq13-snz.open .po {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.uvq13-snz .pt {
  margin: .2em .5em .3em;
  font-size: .62em;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
}

.uvq13-snz .op {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: .6em;
  box-sizing: border-box;
  width: 100%;
  padding: .34em .5em;
  border-radius: .6em;
  font-size: .76em;
  text-align: left;
  transition: background calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq13-snz .op:hover,.uvq13-snz .op:focus-visible {
  outline: 0;
  background: color-mix(in srgb,var(--c1) 12%,transparent);
}

.uvq13-snz .op span {
  flex: 1;
  white-space: nowrap;
}

.uvq13-snz .op small {
  white-space: nowrap;
  font-size: .9em;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  font-variant-numeric: tabular-nums;
}

.uvq13-snz .sk {
  position: relative;
  flex: none;
  width: 1.8em;
  height: 1.8em;
  border-radius: .5em;
  overflow: hidden;
}

.uvq13-snz .sk::before {
  content: "";
  position: absolute;
  left: var(--sx,50%);
  top: var(--sy,50%);
  width: .6em;
  height: .6em;
  margin: -.3em;
  border-radius: 50%;
  background: #fff7d6;
  box-shadow: 0 0 .4em #fde68a;
  transition: transform calc(0.5s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq13-snz .sk::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background: rgba(0,0,0,.25);
}

.uvq13-snz .ev {
  --sx: 72%;
  --sy: 62%;
  background: linear-gradient(180deg,#7c3aed,#f97316);
}

.uvq13-snz .tm {
  --sx: 28%;
  --sy: 64%;
  background: linear-gradient(180deg,#93c5fd,#fbcfe8);
}

.uvq13-snz .we {
  --sx: 50%;
  --sy: 30%;
  background: linear-gradient(180deg,#38bdf8,#bae6fd);
}

.uvq13-snz .nw {
  --sx: 30%;
  --sy: 44%;
  background: linear-gradient(180deg,#1e3a8a,var(--c1));
}

.uvq13-snz .pk {
  background: color-mix(in srgb,var(--c2) 70%,var(--bg));
}

.uvq13-snz .pk::before {
  left: 50%;
  top: 50%;
  width: .95em;
  height: .85em;
  margin: -.42em -.47em;
  border-radius: .15em;
  background: linear-gradient(var(--c1) 0 .25em,#fff 0);
  box-shadow: none;
}

.uvq13-snz .pk::after {
  display: none;
}

.uvq13-snz .op:hover .sk:not(.pk)::before,.uvq13-snz .op:focus-visible .sk:not(.pk)::before {
  transform: translateY(-.3em);
}

.uvq13-snz .cu {
  display: none;
  padding: .4em .5em .5em;
}

.uvq13-snz .po.pick .cu {
  display: block;
  animation: uvq13-snz-i calc(0.3s / var(--k)) cubic-bezier(.22,1,.36,1);
}

.uvq13-snz .dy {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: .2em;
  margin-bottom: .4em;
}

.uvq13-snz .dy button,.uvq13-snz .hs button {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: .3em 0;
  border-radius: .4em;
  font-size: .6em;
  line-height: 1.2;
  text-align: center;
  background: color-mix(in srgb,var(--fg) 6%,transparent);
}

.uvq13-snz .dy b {
  display: block;
  font-size: 1.25em;
}

.uvq13-snz .hs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .25em;
  margin-bottom: .45em;
}

.uvq13-snz .hs button {
  font-size: .66em;
  padding: .4em 0;
}

.uvq13-snz [aria-pressed="true"] {
  color: #fff;
  background: var(--c1);
}

.uvq13-snz .sv {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  padding: .5em;
  border-radius: .5em;
  font-size: .72em;
  font-weight: 700;
  color: #fff;
  background: var(--c1);
}

.uvq13-snz button:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq13-snz .op:focus-visible {
  box-shadow: inset 0 0 0 2px var(--c1);
}

.uvq13-snz .tst {
  position: absolute;
  left: 1em;
  right: 1em;
  bottom: 1em;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 0;
  padding: .55em .6em .55em .9em;
  border-radius: .8em;
  font-size: .74em;
  color: var(--bg);
  background: var(--fg);
  opacity: 0;
  transform: translateY(.6em);
  pointer-events: none;
  transition: opacity calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1),transform calc(0.35s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq13-snz .tst.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.uvq13-snz .tst .m {
  flex: 1;
}

.uvq13-snz .un {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: .35em .6em;
  border-radius: .5em;
  font-weight: 800;
  color: var(--c2);
}

@keyframes uvq13-snz-i {
  from {
    opacity: 0;
    transform: translateY(-.3em);
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq13-snz,.uvq13-snz *,.uvq13-snz *::before,.uvq13-snz *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

// Interacción en JavaScript del DOM: la misma que en la pestaña JS.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function setup(el: any) {
  const fire=el.querySelector(".fire"),scr=el.querySelector(".scr"),pnl=el.querySelector(".po");let tms=[];const later=(f,ms)=>tms.push(setTimeout(f,ms));
const foc=(t,ms)=>later(()=>{const n=typeof t==="string"?el.querySelector(t):t;n&&n.focus({preventScroll:true})},ms||0);
const isOpen=()=>el.classList.contains("open");
const open=u=>{if(isOpen())return;el.classList.add("open");pnl.inert=false;fire&&fire.setAttribute("aria-expanded","true");po.classList.remove('pick');fill();u&&foc(ops[0],200)};
const close=()=>{if(!isOpen())return;el.classList.remove("open");pnl.inert=true;fire&&fire.setAttribute("aria-expanded","false");;fire&&fire.focus({preventScroll:true})};
fire&&fire.addEventListener("click",()=>isOpen()?close():open(true));scr&&scr.addEventListener("click",()=>close());
el.addEventListener("keydown",e=>{if(!isOpen())return;if(e.key==="Escape"){e.preventDefault();e.stopPropagation();close()}else if(e.key==="Tab"){const f=[...pnl.querySelectorAll('button:not([disabled]),input:not([disabled]),textarea,a[href],[tabindex="0"]')].filter(x=>x.getClientRects().length);if(!f.length){e.preventDefault();return}const a=f[0],z=f[f.length-1],ac=document.activeElement;if(e.shiftKey&&(ac===a||!pnl.contains(ac))){e.preventDefault();z.focus()}else if(!e.shiftKey&&(ac===z||!pnl.contains(ac))){e.preventDefault();a.focus()}}});
pnl.inert=true;later(()=>open(false),600);const po=el.querySelector(".po"),ops=[...el.querySelectorAll(".op")],row=el.querySelector(".r.on"),tst=el.querySelector(".tst"),dy=el.querySelector(".dy"),hs=[...el.querySelectorAll(".hs button")];let tt=0;
const L=document.documentElement.lang||undefined,wd=d=>new Intl.DateTimeFormat(L,{weekday:"short"}).format(d),hm=(h,m)=>{const d=new Date();d.setHours(h,m||0,0,0);return new Intl.DateTimeFormat(L,{hour:"numeric",minute:"2-digit"}).format(d)};
const add=n=>{const d=new Date();d.setDate(d.getDate()+n);return d};
const fill=()=>{const now=new Date(),dw=now.getDay(),toSat=(6-dw+7)%7||7,toMon=(8-dw)%7||7;const v={ev:hm(18),tm:wd(add(1))+" "+hm(8),we:wd(add(toSat))+" "+hm(9),nw:wd(add(toMon))+" "+hm(8),pk:""};ops.forEach(o=>o.querySelector("small").textContent=v[o.dataset.k]);if(!dy.children.length)for(let i=1;i<=7;i++){const d=add(i),b=document.createElement("button");b.type="button";b.setAttribute("aria-pressed",String(i===1));b.innerHTML="<span></span><b></b>";b.firstChild.textContent=wd(d);b.lastChild.textContent=String(d.getDate());b.addEventListener("click",()=>press(dy,b));dy.appendChild(b)}};
const press=(g,b)=>[...(g.children||g)].forEach(x=>x.setAttribute("aria-pressed",String(x===b)));
hs.forEach(b=>b.addEventListener("click",()=>press(hs,b)));
const done=txt=>{close();row.classList.add("gone");foc(".un",60);tst.querySelector(".m").textContent=txt;tst.classList.add("on");clearTimeout(tt);tt=setTimeout(()=>tst.classList.remove("on"),4500)};
ops.forEach((o,i)=>{o.addEventListener("click",()=>{if(o.dataset.k==="pk"){po.classList.add("pick");later(()=>dy.firstChild&&dy.firstChild.focus({preventScroll:true}),60);return}done(o.querySelector("span").textContent+" · "+o.querySelector("small").textContent)});o.addEventListener("keydown",e=>{const m={ArrowDown:1,ArrowUp:-1}[e.key];if(m){e.preventDefault();ops[(i+m+ops.length)%ops.length].focus()}})});
el.querySelector(".sv").addEventListener("click",()=>{const d=dy.querySelector("[aria-pressed='true']"),h=hs.find(x=>x.getAttribute("aria-pressed")==="true");done((d?d.textContent.replace(/(\D+)(\d+)/,"$1 $2"):"")+" · "+h.textContent)});
el.querySelector(".un").addEventListener("click",()=>{row.classList.remove("gone");tst.classList.remove("on");fire.focus({preventScroll:true})});
el.addEventListener("pointerdown",e=>{if(isOpen()&&!e.target.closest(".po,.fire"))close()});
return()=>{tms.forEach(clearTimeout);clearTimeout(tt)}
}

export default function OvSnoozePicker() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current?.firstElementChild;
    return el ? setup(el) : undefined;
  }, []);

  return (
    <>
      <style>{css}</style>
      <div
        ref={ref} style={{
          "--c1": "#0891b2",
          "--c2": "#fde68a",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <div className="uvq13-snz"><p className="hh">Inbox</p><ul className="ib"><li className="r on"><span className="av" style={{ "--c": "#f97316" } as CSSProperties} aria-hidden="true">C</span><span className="tx"><b>Carmen Gil</b><span>Renovation quote</span></span><span className="ha"><button type="button" className="ar" aria-label="Archive"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 7.5h16v-3H4zM5.5 7.5V19h13V7.5M10 11.5h4" /></svg></button><button type="button" className="fire" aria-haspopup="menu" aria-label="Snooze"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="13" r="7.5" /><path d="M12 9.5V13l2.5 1.5M4.5 4.5l2.5-2M19.5 4.5l-2.5-2" /></svg></button></span></li><li className="r"><span className="av" style={{ "--c": "#0ea5e9" } as CSSProperties} aria-hidden="true">P</span><span className="tx"><b>Pablo Ruiz</b><span>Trip photos</span></span><small>9:12</small></li><li className="r"><span className="av" style={{ "--c": "#e11d48" } as CSSProperties} aria-hidden="true">M</span><span className="tx"><b>Marta León</b><span>Concert tickets</span></span><small>8:05</small></li></ul><div className="po" role="menu" aria-label="Snooze until…"><p className="pt" aria-hidden="true">Snooze until…</p><button type="button" role="menuitem" className="op" data-k="ev"><i className="sk ev" aria-hidden="true"></i><span>Later today</span><small></small></button><button type="button" role="menuitem" className="op" data-k="tm"><i className="sk tm" aria-hidden="true"></i><span>Tomorrow morning</span><small></small></button><button type="button" role="menuitem" className="op" data-k="we"><i className="sk we" aria-hidden="true"></i><span>This weekend</span><small></small></button><button type="button" role="menuitem" className="op" data-k="nw"><i className="sk nw" aria-hidden="true"></i><span>Next week</span><small></small></button><button type="button" role="menuitem" className="op" data-k="pk"><i className="sk pk" aria-hidden="true"></i><span>Pick date and time</span><small></small></button><div className="cu"><div className="dy"></div><div className="hs"><button type="button" aria-pressed="true">8:00</button><button type="button" aria-pressed="false">13:00</button><button type="button" aria-pressed="false">18:00</button></div><button type="button" className="sv">Snooze</button></div></div><p className="tst" aria-live="polite"><span className="m"></span><button type="button" className="un">Undo</button></p></div>
      </div>
    </>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````