daisyui/components/toast.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.toast{@layer daisyui.l1.l2.l3{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){animation:.25s ease-out toast}}}}.toast-start{@layer daisyui.l1.l2{--toast-x:0;inset-inline:1rem auto}}.toast-center{@layer daisyui.l1.l2{--toast-x:-50%;inset-inline:50%}}.toast-end{@layer daisyui.l1.l2{--toast-x:0;inset-inline:auto 1rem}}.toast-bottom{@layer daisyui.l1.l2{--toast-y:0;top:auto;bottom:1rem}}.toast-middle{@layer daisyui.l1.l2{--toast-y:-50%;top:50%;bottom:auto}}.toast-top{@layer daisyui.l1.l2{--toast-y:0;top:1rem;bottom:auto}}@keyframes toast{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}@media (width>=640px){.sm\:toast{@layer daisyui.l1.l2.l3{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){animation:.25s ease-out toast}}}}.sm\:toast-start{@layer daisyui.l1.l2{--toast-x:0;inset-inline:1rem auto}}.sm\:toast-center{@layer daisyui.l1.l2{--toast-x:-50%;inset-inline:50%}}.sm\:toast-end{@layer daisyui.l1.l2{--toast-x:0;inset-inline:auto 1rem}}.sm\:toast-bottom{@layer daisyui.l1.l2{--toast-y:0;top:auto;bottom:1rem}}.sm\:toast-middle{@layer daisyui.l1.l2{--toast-y:-50%;top:50%;bottom:auto}}.sm\:toast-top{@layer daisyui.l1.l2{--toast-y:0;top:1rem;bottom:auto}}}@media (width>=768px){.md\:toast{@layer daisyui.l1.l2.l3{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){animation:.25s ease-out toast}}}}.md\:toast-start{@layer daisyui.l1.l2{--toast-x:0;inset-inline:1rem auto}}.md\:toast-center{@layer daisyui.l1.l2{--toast-x:-50%;inset-inline:50%}}.md\:toast-end{@layer daisyui.l1.l2{--toast-x:0;inset-inline:auto 1rem}}.md\:toast-bottom{@layer daisyui.l1.l2{--toast-y:0;top:auto;bottom:1rem}}.md\:toast-middle{@layer daisyui.l1.l2{--toast-y:-50%;top:50%;bottom:auto}}.md\:toast-top{@layer daisyui.l1.l2{--toast-y:0;top:1rem;bottom:auto}}}@media (width>=1024px){.lg\:toast{@layer daisyui.l1.l2.l3{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){animation:.25s ease-out toast}}}}.lg\:toast-start{@layer daisyui.l1.l2{--toast-x:0;inset-inline:1rem auto}}.lg\:toast-center{@layer daisyui.l1.l2{--toast-x:-50%;inset-inline:50%}}.lg\:toast-end{@layer daisyui.l1.l2{--toast-x:0;inset-inline:auto 1rem}}.lg\:toast-bottom{@layer daisyui.l1.l2{--toast-y:0;top:auto;bottom:1rem}}.lg\:toast-middle{@layer daisyui.l1.l2{--toast-y:-50%;top:50%;bottom:auto}}.lg\:toast-top{@layer daisyui.l1.l2{--toast-y:0;top:1rem;bottom:auto}}}@media (width>=1280px){.xl\:toast{@layer daisyui.l1.l2.l3{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){animation:.25s ease-out toast}}}}.xl\:toast-start{@layer daisyui.l1.l2{--toast-x:0;inset-inline:1rem auto}}.xl\:toast-center{@layer daisyui.l1.l2{--toast-x:-50%;inset-inline:50%}}.xl\:toast-end{@layer daisyui.l1.l2{--toast-x:0;inset-inline:auto 1rem}}.xl\:toast-bottom{@layer daisyui.l1.l2{--toast-y:0;top:auto;bottom:1rem}}.xl\:toast-middle{@layer daisyui.l1.l2{--toast-y:-50%;top:50%;bottom:auto}}.xl\:toast-top{@layer daisyui.l1.l2{--toast-y:0;top:1rem;bottom:auto}}}@media (width>=1536px){.\32 xl\:toast{@layer daisyui.l1.l2.l3{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){animation:.25s ease-out toast}}}}.\32 xl\:toast-start{@layer daisyui.l1.l2{--toast-x:0;inset-inline:1rem auto}}.\32 xl\:toast-center{@layer daisyui.l1.l2{--toast-x:-50%;inset-inline:50%}}.\32 xl\:toast-end{@layer daisyui.l1.l2{--toast-x:0;inset-inline:auto 1rem}}.\32 xl\:toast-bottom{@layer daisyui.l1.l2{--toast-y:0;top:auto;bottom:1rem}}.\32 xl\:toast-middle{@layer daisyui.l1.l2{--toast-y:-50%;top:50%;bottom:auto}}.\32 xl\:toast-top{@layer daisyui.l1.l2{--toast-y:0;top:1rem;bottom:auto}}}}