flyonui/components/drawer.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.drawer{z-index:80;background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;max-width:24rem;height:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);flex-direction:column;justify-content:space-between;display:flex;position:fixed}.drawer-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.drawer-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}.drawer-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));flex-grow:1;padding-inline:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}}.drawer-body:where(:last-child){padding-bottom:1.5rem}.drawer-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}.drawer-start{inset-inline:0 auto;--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.drawer-end{inset-inline:auto 0;--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.drawer-top{inset-inline:0;--tw-translate-y:-100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0}.drawer-bottom{inset-inline:0;--tw-translate-y:100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);bottom:0}@media (width>=640px){.sm\:drawer{z-index:80;background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;max-width:24rem;height:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);flex-direction:column;justify-content:space-between;display:flex;position:fixed}.sm\:drawer-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.sm\:drawer-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}.sm\:drawer-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));flex-grow:1;padding-inline:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}}.sm\:drawer-body:where(:last-child){padding-bottom:1.5rem}.sm\:drawer-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}.sm\:drawer-start{inset-inline:0 auto;--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.sm\:drawer-end{inset-inline:auto 0;--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.sm\:drawer-top{inset-inline:0;--tw-translate-y:-100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0}.sm\:drawer-bottom{inset-inline:0;--tw-translate-y:100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);bottom:0}}@media (width>=768px){.md\:drawer{z-index:80;background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;max-width:24rem;height:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);flex-direction:column;justify-content:space-between;display:flex;position:fixed}.md\:drawer-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.md\:drawer-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}.md\:drawer-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));flex-grow:1;padding-inline:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}}.md\:drawer-body:where(:last-child){padding-bottom:1.5rem}.md\:drawer-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}.md\:drawer-start{inset-inline:0 auto;--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.md\:drawer-end{inset-inline:auto 0;--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.md\:drawer-top{inset-inline:0;--tw-translate-y:-100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0}.md\:drawer-bottom{inset-inline:0;--tw-translate-y:100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);bottom:0}}@media (width>=1024px){.lg\:drawer{z-index:80;background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;max-width:24rem;height:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);flex-direction:column;justify-content:space-between;display:flex;position:fixed}.lg\:drawer-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.lg\:drawer-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}.lg\:drawer-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));flex-grow:1;padding-inline:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}}.lg\:drawer-body:where(:last-child){padding-bottom:1.5rem}.lg\:drawer-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}.lg\:drawer-start{inset-inline:0 auto;--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.lg\:drawer-end{inset-inline:auto 0;--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.lg\:drawer-top{inset-inline:0;--tw-translate-y:-100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0}.lg\:drawer-bottom{inset-inline:0;--tw-translate-y:100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);bottom:0}}@media (width>=1280px){.xl\:drawer{z-index:80;background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;max-width:24rem;height:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);flex-direction:column;justify-content:space-between;display:flex;position:fixed}.xl\:drawer-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.xl\:drawer-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}.xl\:drawer-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));flex-grow:1;padding-inline:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}}.xl\:drawer-body:where(:last-child){padding-bottom:1.5rem}.xl\:drawer-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}.xl\:drawer-start{inset-inline:0 auto;--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.xl\:drawer-end{inset-inline:auto 0;--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.xl\:drawer-top{inset-inline:0;--tw-translate-y:-100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0}.xl\:drawer-bottom{inset-inline:0;--tw-translate-y:100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);bottom:0}}@media (width>=1536px){.\32 xl\:drawer{z-index:80;background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;max-width:24rem;height:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);flex-direction:column;justify-content:space-between;display:flex;position:fixed}.\32 xl\:drawer-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.\32 xl\:drawer-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}.\32 xl\:drawer-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));flex-grow:1;padding-inline:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}}.\32 xl\:drawer-body:where(:last-child){padding-bottom:1.5rem}.\32 xl\:drawer-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}.\32 xl\:drawer-start{inset-inline:0 auto;--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.\32 xl\:drawer-end{inset-inline:auto 0;--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.\32 xl\:drawer-top{inset-inline:0;--tw-translate-y:-100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0}.\32 xl\:drawer-bottom{inset-inline:0;--tw-translate-y:100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);bottom:0}}}