daisyui/components/toast.css

daisyUI 5 - The Tailwind CSS Component Library

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