daisyui/components/toast.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2.l3{.toast{inset-inline:auto 1rem;translate:var(--toast-x,0) var(--toast-y,0);background-color:#0000;flex-direction:column;gap:.5rem;width:max-content;max-width:calc(100vw - 2rem);display:flex;position:fixed;top:auto;bottom:1rem}@media (prefers-reduced-motion:no-preference){.toast>*{animation:.25s ease-out toast}}}@layer daisyui.l1.l2{.toast-start{--toast-x:0;inset-inline:1rem auto}.toast-center{--toast-x:-50%;inset-inline:50%}.toast-end{--toast-x:0;inset-inline:auto 1rem}.toast-bottom{--toast-y:0;top:auto;bottom:1rem}.toast-middle{--toast-y:-50%;top:50%;bottom:auto}.toast-top{--toast-y:0;top:1rem;bottom:auto}}@media (width>=640px){@layer daisyui.l1.l2.l3{.sm\:toast{inset-inline:auto 1rem;translate:var(--toast-x,0) var(--toast-y,0);background-color:#0000;flex-direction:column;gap:.5rem;width:max-content;max-width:calc(100vw - 2rem);display:flex;position:fixed;top:auto;bottom:1rem}@media (prefers-reduced-motion:no-preference){.sm\:toast>*{animation:.25s ease-out toast}}}@layer daisyui.l1.l2{.sm\:toast-start{--toast-x:0;inset-inline:1rem auto}.sm\:toast-center{--toast-x:-50%;inset-inline:50%}.sm\:toast-end{--toast-x:0;inset-inline:auto 1rem}.sm\:toast-bottom{--toast-y:0;top:auto;bottom:1rem}.sm\:toast-middle{--toast-y:-50%;top:50%;bottom:auto}.sm\:toast-top{--toast-y:0;top:1rem;bottom:auto}}}@media (width>=768px){@layer daisyui.l1.l2.l3{.md\:toast{inset-inline:auto 1rem;translate:var(--toast-x,0) var(--toast-y,0);background-color:#0000;flex-direction:column;gap:.5rem;width:max-content;max-width:calc(100vw - 2rem);display:flex;position:fixed;top:auto;bottom:1rem}@media (prefers-reduced-motion:no-preference){.md\:toast>*{animation:.25s ease-out toast}}}@layer daisyui.l1.l2{.md\:toast-start{--toast-x:0;inset-inline:1rem auto}.md\:toast-center{--toast-x:-50%;inset-inline:50%}.md\:toast-end{--toast-x:0;inset-inline:auto 1rem}.md\:toast-bottom{--toast-y:0;top:auto;bottom:1rem}.md\:toast-middle{--toast-y:-50%;top:50%;bottom:auto}.md\:toast-top{--toast-y:0;top:1rem;bottom:auto}}}@media (width>=1024px){@layer daisyui.l1.l2.l3{.lg\:toast{inset-inline:auto 1rem;translate:var(--toast-x,0) var(--toast-y,0);background-color:#0000;flex-direction:column;gap:.5rem;width:max-content;max-width:calc(100vw - 2rem);display:flex;position:fixed;top:auto;bottom:1rem}@media (prefers-reduced-motion:no-preference){.lg\:toast>*{animation:.25s ease-out toast}}}@layer daisyui.l1.l2{.lg\:toast-start{--toast-x:0;inset-inline:1rem auto}.lg\:toast-center{--toast-x:-50%;inset-inline:50%}.lg\:toast-end{--toast-x:0;inset-inline:auto 1rem}.lg\:toast-bottom{--toast-y:0;top:auto;bottom:1rem}.lg\:toast-middle{--toast-y:-50%;top:50%;bottom:auto}.lg\:toast-top{--toast-y:0;top:1rem;bottom:auto}}}@media (width>=1280px){@layer daisyui.l1.l2.l3{.xl\:toast{inset-inline:auto 1rem;translate:var(--toast-x,0) var(--toast-y,0);background-color:#0000;flex-direction:column;gap:.5rem;width:max-content;max-width:calc(100vw - 2rem);display:flex;position:fixed;top:auto;bottom:1rem}@media (prefers-reduced-motion:no-preference){.xl\:toast>*{animation:.25s ease-out toast}}}@layer daisyui.l1.l2{.xl\:toast-start{--toast-x:0;inset-inline:1rem auto}.xl\:toast-center{--toast-x:-50%;inset-inline:50%}.xl\:toast-end{--toast-x:0;inset-inline:auto 1rem}.xl\:toast-bottom{--toast-y:0;top:auto;bottom:1rem}.xl\:toast-middle{--toast-y:-50%;top:50%;bottom:auto}.xl\:toast-top{--toast-y:0;top:1rem;bottom:auto}}}@media (width>=1536px){@layer daisyui.l1.l2.l3{.\32 xl\:toast{inset-inline:auto 1rem;translate:var(--toast-x,0) var(--toast-y,0);background-color:#0000;flex-direction:column;gap:.5rem;width:max-content;max-width:calc(100vw - 2rem);display:flex;position:fixed;top:auto;bottom:1rem}@media (prefers-reduced-motion:no-preference){.\32 xl\:toast>*{animation:.25s ease-out toast}}}@layer daisyui.l1.l2{.\32 xl\:toast-start{--toast-x:0;inset-inline:1rem auto}.\32 xl\:toast-center{--toast-x:-50%;inset-inline:50%}.\32 xl\:toast-end{--toast-x:0;inset-inline:auto 1rem}.\32 xl\:toast-bottom{--toast-y:0;top:auto;bottom:1rem}.\32 xl\:toast-middle{--toast-y:-50%;top:50%;bottom:auto}.\32 xl\:toast-top{--toast-y:0;top:1rem;bottom:auto}}}@keyframes toast{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}}