#0f172a
1<label class="group flex w-52 cursor-pointer select-none items-center gap-3 rounded-2xl bg-slate-800 p-3 ring-1 ring-white/10 transition duration-500 has-[:checked]:bg-indigo-950 has-[:checked]:ring-indigo-400/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-indigo-300">2 <input type="checkbox" class="peer sr-only" />3 <span class="relative grid size-10 shrink-0 place-items-center rounded-xl bg-slate-700 text-slate-400 transition duration-500 group-has-[:checked]:bg-indigo-500 group-has-[:checked]:text-white group-has-[:checked]:shadow-[0_0_22px_rgb(99_102_241/.8)]">4 <span class="absolute inset-0 rounded-xl border-2 border-indigo-300 opacity-0 group-has-[:checked]:opacity-70 motion-safe:group-has-[:checked]:animate-ping"></span>5 <svg class="size-5 transition-transform duration-500 ease-[cubic-bezier(.34,1.8,.64,1)] group-has-[:checked]:scale-110" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"/></svg>6 <span class="absolute -right-1.5 -top-1.5 grid size-4 place-items-center rounded-full bg-rose-500 text-[9px] font-bold text-white ring-2 ring-slate-800 transition duration-300 ease-[cubic-bezier(.34,1.8,.64,1)] group-has-[:checked]:scale-0">3</span>7 </span>8 <span class="min-w-0 flex-1">9 <span class="block text-[13px] font-semibold text-white">Modo foco</span>10 <span class="relative block h-4 overflow-hidden text-[11px] text-slate-400">11 <span class="block transition duration-500 group-has-[:checked]:-translate-y-4 group-has-[:checked]:opacity-0">3 avisos novos</span>12 <span class="absolute left-0 top-0 block translate-y-4 whitespace-nowrap text-indigo-300 opacity-0 transition duration-500 group-has-[:checked]:translate-y-0 group-has-[:checked]:opacity-100">Silêncio 25 min</span>13 </span>14 </span>15 <span class="relative h-6 w-10 shrink-0 rounded-full bg-slate-600 transition-colors duration-300 after:absolute after:left-0.5 after:top-0.5 after:size-5 after:rounded-full after:bg-white after:shadow after:transition-transform after:duration-500 after:ease-[cubic-bezier(.34,1.56,.64,1)] group-has-[:checked]:bg-indigo-500 group-has-[:checked]:after:translate-x-4"></span>16</label>