daisyui/components/modal.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2.l3{.modal{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip}.modal::backdrop{display:none}.modal[popover]{color:inherit;background:0 0;border:0;max-width:none;max-height:none;margin:0;padding:0;inset:0;&::backdrop{background-color:oklch(0% 0 0/.4);transition:background-color .3s ease-out}}.modal-action{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}.modal-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}.modal-backdrop{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid}.modal-backdrop button{cursor:pointer}.modal-box{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}}@layer daisyui.l1.l2{.modal.modal-open,.modal[open],.modal:popover-open,.modal:target,.modal-toggle:checked+.modal{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4);&>.modal-box{opacity:1;translate:0;scale:1}:root:has(&){--page-scroll-lock: }}@starting-style{.modal.modal-open,.modal[open],.modal:popover-open,.modal:target,.modal-toggle:checked+.modal{opacity:0}}.modal-top{place-items:start}.modal-top>.modal-box{--modal-tl:0;--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}.modal-middle{place-items:center}.modal-middle>.modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:91.6667%;max-width:32rem;height:auto;max-height:calc(100vh - 5em);translate:0 2%;scale:.98}.modal-bottom{place-items:end}.modal-bottom>.modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}.modal-start{place-items:start}.modal-start>.modal-box{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);width:auto;max-width:none;height:100vh;max-height:none;translate:-100%;scale:1;[dir=rtl] &{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;translate:100%}}.modal-end{place-items:end}.modal-end>.modal-box{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;width:auto;max-width:none;height:100vh;max-height:none;translate:100%;scale:1;[dir=rtl] &{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);translate:-100%}}}@media (width>=640px){@layer daisyui.l1.l2.l3{.sm\:modal{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip}.sm\:modal::backdrop{display:none}.sm\:modal[popover]{color:inherit;background:0 0;border:0;max-width:none;max-height:none;margin:0;padding:0;inset:0;&::backdrop{background-color:oklch(0% 0 0/.4);transition:background-color .3s ease-out}}.sm\:modal-action{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}.sm\:modal-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}.sm\:modal-backdrop{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid}.sm\:modal-backdrop button{cursor:pointer}.sm\:modal-box{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}}@layer daisyui.l1.l2{.sm\:modal.modal-open,.sm\:modal[open],.sm\:modal:popover-open,.sm\:modal:target,.sm\:modal-toggle:checked+.modal{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4);&>.modal-box{opacity:1;translate:0;scale:1}:root:has(&){--page-scroll-lock: }}@starting-style{.sm\:modal.modal-open,.sm\:modal[open],.sm\:modal:popover-open,.sm\:modal:target,.sm\:modal-toggle:checked+.modal{opacity:0}}.sm\:modal-top{place-items:start}.sm\:modal-top>.modal-box{--modal-tl:0;--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}.sm\:modal-middle{place-items:center}.sm\:modal-middle>.modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:91.6667%;max-width:32rem;height:auto;max-height:calc(100vh - 5em);translate:0 2%;scale:.98}.sm\:modal-bottom{place-items:end}.sm\:modal-bottom>.modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}.sm\:modal-start{place-items:start}.sm\:modal-start>.modal-box{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);width:auto;max-width:none;height:100vh;max-height:none;translate:-100%;scale:1;[dir=rtl] &{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;translate:100%}}.sm\:modal-end{place-items:end}.sm\:modal-end>.modal-box{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;width:auto;max-width:none;height:100vh;max-height:none;translate:100%;scale:1;[dir=rtl] &{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);translate:-100%}}}}@media (width>=768px){@layer daisyui.l1.l2.l3{.md\:modal{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip}.md\:modal::backdrop{display:none}.md\:modal[popover]{color:inherit;background:0 0;border:0;max-width:none;max-height:none;margin:0;padding:0;inset:0;&::backdrop{background-color:oklch(0% 0 0/.4);transition:background-color .3s ease-out}}.md\:modal-action{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}.md\:modal-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}.md\:modal-backdrop{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid}.md\:modal-backdrop button{cursor:pointer}.md\:modal-box{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}}@layer daisyui.l1.l2{.md\:modal.modal-open,.md\:modal[open],.md\:modal:popover-open,.md\:modal:target,.md\:modal-toggle:checked+.modal{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4);&>.modal-box{opacity:1;translate:0;scale:1}:root:has(&){--page-scroll-lock: }}@starting-style{.md\:modal.modal-open,.md\:modal[open],.md\:modal:popover-open,.md\:modal:target,.md\:modal-toggle:checked+.modal{opacity:0}}.md\:modal-top{place-items:start}.md\:modal-top>.modal-box{--modal-tl:0;--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}.md\:modal-middle{place-items:center}.md\:modal-middle>.modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:91.6667%;max-width:32rem;height:auto;max-height:calc(100vh - 5em);translate:0 2%;scale:.98}.md\:modal-bottom{place-items:end}.md\:modal-bottom>.modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}.md\:modal-start{place-items:start}.md\:modal-start>.modal-box{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);width:auto;max-width:none;height:100vh;max-height:none;translate:-100%;scale:1;[dir=rtl] &{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;translate:100%}}.md\:modal-end{place-items:end}.md\:modal-end>.modal-box{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;width:auto;max-width:none;height:100vh;max-height:none;translate:100%;scale:1;[dir=rtl] &{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);translate:-100%}}}}@media (width>=1024px){@layer daisyui.l1.l2.l3{.lg\:modal{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip}.lg\:modal::backdrop{display:none}.lg\:modal[popover]{color:inherit;background:0 0;border:0;max-width:none;max-height:none;margin:0;padding:0;inset:0;&::backdrop{background-color:oklch(0% 0 0/.4);transition:background-color .3s ease-out}}.lg\:modal-action{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}.lg\:modal-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}.lg\:modal-backdrop{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid}.lg\:modal-backdrop button{cursor:pointer}.lg\:modal-box{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}}@layer daisyui.l1.l2{.lg\:modal.modal-open,.lg\:modal[open],.lg\:modal:popover-open,.lg\:modal:target,.lg\:modal-toggle:checked+.modal{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4);&>.modal-box{opacity:1;translate:0;scale:1}:root:has(&){--page-scroll-lock: }}@starting-style{.lg\:modal.modal-open,.lg\:modal[open],.lg\:modal:popover-open,.lg\:modal:target,.lg\:modal-toggle:checked+.modal{opacity:0}}.lg\:modal-top{place-items:start}.lg\:modal-top>.modal-box{--modal-tl:0;--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}.lg\:modal-middle{place-items:center}.lg\:modal-middle>.modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:91.6667%;max-width:32rem;height:auto;max-height:calc(100vh - 5em);translate:0 2%;scale:.98}.lg\:modal-bottom{place-items:end}.lg\:modal-bottom>.modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}.lg\:modal-start{place-items:start}.lg\:modal-start>.modal-box{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);width:auto;max-width:none;height:100vh;max-height:none;translate:-100%;scale:1;[dir=rtl] &{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;translate:100%}}.lg\:modal-end{place-items:end}.lg\:modal-end>.modal-box{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;width:auto;max-width:none;height:100vh;max-height:none;translate:100%;scale:1;[dir=rtl] &{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);translate:-100%}}}}@media (width>=1280px){@layer daisyui.l1.l2.l3{.xl\:modal{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip}.xl\:modal::backdrop{display:none}.xl\:modal[popover]{color:inherit;background:0 0;border:0;max-width:none;max-height:none;margin:0;padding:0;inset:0;&::backdrop{background-color:oklch(0% 0 0/.4);transition:background-color .3s ease-out}}.xl\:modal-action{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}.xl\:modal-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}.xl\:modal-backdrop{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid}.xl\:modal-backdrop button{cursor:pointer}.xl\:modal-box{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}}@layer daisyui.l1.l2{.xl\:modal.modal-open,.xl\:modal[open],.xl\:modal:popover-open,.xl\:modal:target,.xl\:modal-toggle:checked+.modal{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4);&>.modal-box{opacity:1;translate:0;scale:1}:root:has(&){--page-scroll-lock: }}@starting-style{.xl\:modal.modal-open,.xl\:modal[open],.xl\:modal:popover-open,.xl\:modal:target,.xl\:modal-toggle:checked+.modal{opacity:0}}.xl\:modal-top{place-items:start}.xl\:modal-top>.modal-box{--modal-tl:0;--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}.xl\:modal-middle{place-items:center}.xl\:modal-middle>.modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:91.6667%;max-width:32rem;height:auto;max-height:calc(100vh - 5em);translate:0 2%;scale:.98}.xl\:modal-bottom{place-items:end}.xl\:modal-bottom>.modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}.xl\:modal-start{place-items:start}.xl\:modal-start>.modal-box{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);width:auto;max-width:none;height:100vh;max-height:none;translate:-100%;scale:1;[dir=rtl] &{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;translate:100%}}.xl\:modal-end{place-items:end}.xl\:modal-end>.modal-box{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;width:auto;max-width:none;height:100vh;max-height:none;translate:100%;scale:1;[dir=rtl] &{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);translate:-100%}}}}@media (width>=1536px){@layer daisyui.l1.l2.l3{.\32 xl\:modal{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip}.\32 xl\:modal::backdrop{display:none}.\32 xl\:modal[popover]{color:inherit;background:0 0;border:0;max-width:none;max-height:none;margin:0;padding:0;inset:0;&::backdrop{background-color:oklch(0% 0 0/.4);transition:background-color .3s ease-out}}.\32 xl\:modal-action{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}.\32 xl\:modal-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}.\32 xl\:modal-backdrop{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid}.\32 xl\:modal-backdrop button{cursor:pointer}.\32 xl\:modal-box{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}}@layer daisyui.l1.l2{.\32 xl\:modal.modal-open,.\32 xl\:modal[open],.\32 xl\:modal:popover-open,.\32 xl\:modal:target,.\32 xl\:modal-toggle:checked+.modal{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4);&>.modal-box{opacity:1;translate:0;scale:1}:root:has(&){--page-scroll-lock: }}@starting-style{.\32 xl\:modal.modal-open,.\32 xl\:modal[open],.\32 xl\:modal:popover-open,.\32 xl\:modal:target,.\32 xl\:modal-toggle:checked+.modal{opacity:0}}.\32 xl\:modal-top{place-items:start}.\32 xl\:modal-top>.modal-box{--modal-tl:0;--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}.\32 xl\:modal-middle{place-items:center}.\32 xl\:modal-middle>.modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:91.6667%;max-width:32rem;height:auto;max-height:calc(100vh - 5em);translate:0 2%;scale:.98}.\32 xl\:modal-bottom{place-items:end}.\32 xl\:modal-bottom>.modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}.\32 xl\:modal-start{place-items:start}.\32 xl\:modal-start>.modal-box{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);width:auto;max-width:none;height:100vh;max-height:none;translate:-100%;scale:1;[dir=rtl] &{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;translate:100%}}.\32 xl\:modal-end{place-items:end}.\32 xl\:modal-end>.modal-box{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;width:auto;max-width:none;height:100vh;max-height:none;translate:100%;scale:1;[dir=rtl] &{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);translate:-100%}}}}}