daisyui/components/megamenu.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.megamenu{@layer daisyui.l1.l2.l3{width:unset;border-radius:calc(var(--radius-field) + var(--border));--mm-anchor:--mm1;--size:calc(var(--size-field,.25rem) * 10);background-color:#0000;align-items:center;display:flex;position:relative;overflow:visible;& [popovertarget]{isolation:isolate;cursor:pointer;padding-inline:var(--mm-p,1rem);height:var(--size);font-size:var(--fontsize,.875rem);border:var(--border) solid transparent;anchor-name:var(--mm-anchor);align-items:center;gap:.75rem;transition:background-color .2s ease-out,color .2s ease-out;display:flex;position:relative;&:focus-visible{outline:2px solid var(--color-base-content);outline-offset:2px}&:after{--tw-content:"";content:var(--tw-content);pointer-events:none;opacity:.25;width:.375rem;height:.375rem;transition:opacity .2s ease-out,rotate .2s ease-out;display:block;inset-inline-end:1.4rem;rotate:-135deg;box-shadow:inset 2px 2px}&:first-of-type{--mm-anchor:--mm1}&:nth-of-type(2){--mm-anchor:--mm2}&:nth-of-type(3){--mm-anchor:--mm3}&:nth-of-type(4){--mm-anchor:--mm4}&:nth-of-type(5){--mm-anchor:--mm5}&:nth-of-type(6){--mm-anchor:--mm6}&:nth-of-type(7){--mm-anchor:--mm7}&:nth-of-type(8){--mm-anchor:--mm8}&:nth-of-type(9){--mm-anchor:--mm9}&:nth-of-type(10){--mm-anchor:--mm10}}&:not(:has([popovertarget]:hover,[popover]:popover-open)) .megamenu-active{background-color:#0000}&:has([popovertarget]:hover):not(:has([popover]:popover-open)) .megamenu-active,&:has([popover]:popover-open) .megamenu-active{inset:anchor(var(--mm-anchor) top) anchor(var(--mm-anchor) end) anchor(var(--mm-anchor) bottom) anchor(var(--mm-anchor) start)}&:has([popovertarget]:first-of-type:hover):not(:has([popover]:popover-open)),&:has([popover]:first-of-type:popover-open){--mm-anchor:--mm1}&:has([popovertarget]:nth-of-type(2):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(2):popover-open){--mm-anchor:--mm2}&:has([popovertarget]:nth-of-type(3):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(3):popover-open){--mm-anchor:--mm3}&:has([popovertarget]:nth-of-type(4):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(4):popover-open){--mm-anchor:--mm4}&:has([popovertarget]:nth-of-type(5):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(5):popover-open){--mm-anchor:--mm5}&:has([popovertarget]:nth-of-type(6):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(6):popover-open){--mm-anchor:--mm6}&:has([popovertarget]:nth-of-type(7):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(7):popover-open){--mm-anchor:--mm7}&:has([popovertarget]:nth-of-type(8):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(8):popover-open){--mm-anchor:--mm8}&:has([popovertarget]:nth-of-type(9):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(9):popover-open){--mm-anchor:--mm9}&:has([popovertarget]:nth-of-type(10):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(10):popover-open){--mm-anchor:--mm10}& [popovertarget]:has(+[popover]:popover-open):after{opacity:1;rotate:45deg}& [popover]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-base-300);opacity:0;border-radius:var(--radius-box);background-color:var(--color-base-100);position-area:block-end span-inline-end;max-height:100dvh;max-block-size:calc(100% - .25rem);transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;margin-top:.25rem;translate:0 -.5rem;scale:.98;&:popover-open{opacity:1;@starting-style{opacity:0}}}&:has([popover]:popover-open){& [popover]{translate:0;scale:1}}}@layer daisyui.l1{&:popover-open{opacity:1;background-color:var(--color-base-100);width:100%;margin-top:var(--mm-mt,4rem);border-radius:0;flex-direction:column;align-items:flex-start;padding-top:1rem;position:fixed;overflow-y:scroll;& [popovertarget],&>[popover]:not(:first-of-type){display:var(--mm-display,none)}&::backdrop{background-color:var(--mm-backdrop,oklch(0% 0 0/.4))}position-area:block-end;top:0;max-block-size:80svh;transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;border-inline-width:0;inset-inline-start:0;translate:0;scale:1;@starting-style{opacity:0}& [popovertarget]{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 40%, transparent);font-size:.875rem;font-weight:600;&:after{content:none}}& [popover]{opacity:1;background-color:#0000;border:none;max-height:none;display:block;position:relative;overflow:visible}}}}.megamenu-active{@layer daisyui.l1.l2.l3{pointer-events:none;background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent);border-radius:var(--radius-field);transition:inset .3s linear(0, .5 10%, .9 30%, 1.05 50%, 1.1 75%, 1), background-color .2s ease-out;position:absolute}}.megamenu-wide{@layer daisyui.l1.l2{anchor-name:--megamenu;&:popover-open{inset-inline:0}& [popover]{position-area:block-end;position-anchor:--megamenu;width:anchor-size(inline)}}}.megamenu-full{@layer daisyui.l1.l2{anchor-name:--megamenu;&:popover-open{inset-inline:0}& [popover]{position-area:block-end;position-anchor:--megamenu;border-inline-width:0;border-radius:0;width:100%}}}.megamenu-vertical{@layer daisyui.l1.l2{opacity:0;background-color:var(--color-base-100);position-area:block-end;width:100%;--mm-backdrop:transparent;max-block-size:calc(100% - .25rem);transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;border-inline-width:0;border-radius:0;flex-direction:column;align-items:flex-start;position:relative;translate:0 -.5rem;scale:.98;&:not([popover]:popover-open){position:revert;display:none}&:popover-open{--mm-mt:0;--mm-display:block}& [popovertarget]{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 40%, transparent);font-size:.875rem;font-weight:600;&:after{content:none}}& [popover]{opacity:1;background-color:#0000;border:none;display:block;position:relative;overflow:visible}}}.megamenu-xs{@layer daisyui.l1.l2{--fontsize:.6875rem;--mm-p:.5rem;--size:calc(var(--size-field,.25rem) * 6)}}.megamenu-sm{@layer daisyui.l1.l2{--fontsize:.75rem;--mm-p:.75rem;--size:calc(var(--size-field,.25rem) * 8)}}.megamenu-md{@layer daisyui.l1.l2{--fontsize:.875rem;--mm-p:1rem;--size:calc(var(--size-field,.25rem) * 10)}}.megamenu-lg{@layer daisyui.l1.l2{--fontsize:1.125rem;--mm-p:1.25rem;--size:calc(var(--size-field,.25rem) * 12)}}.megamenu-xl{@layer daisyui.l1.l2{--fontsize:1.375rem;--mm-p:1.5rem;--size:calc(var(--size-field,.25rem) * 14)}}@media (width>=640px){.sm\:megamenu{@layer daisyui.l1.l2.l3{width:unset;border-radius:calc(var(--radius-field) + var(--border));--mm-anchor:--mm1;--size:calc(var(--size-field,.25rem) * 10);background-color:#0000;align-items:center;display:flex;position:relative;overflow:visible;& [popovertarget]{isolation:isolate;cursor:pointer;padding-inline:var(--mm-p,1rem);height:var(--size);font-size:var(--fontsize,.875rem);border:var(--border) solid transparent;anchor-name:var(--mm-anchor);align-items:center;gap:.75rem;transition:background-color .2s ease-out,color .2s ease-out;display:flex;position:relative;&:focus-visible{outline:2px solid var(--color-base-content);outline-offset:2px}&:after{--tw-content:"";content:var(--tw-content);pointer-events:none;opacity:.25;width:.375rem;height:.375rem;transition:opacity .2s ease-out,rotate .2s ease-out;display:block;inset-inline-end:1.4rem;rotate:-135deg;box-shadow:inset 2px 2px}&:first-of-type{--mm-anchor:--mm1}&:nth-of-type(2){--mm-anchor:--mm2}&:nth-of-type(3){--mm-anchor:--mm3}&:nth-of-type(4){--mm-anchor:--mm4}&:nth-of-type(5){--mm-anchor:--mm5}&:nth-of-type(6){--mm-anchor:--mm6}&:nth-of-type(7){--mm-anchor:--mm7}&:nth-of-type(8){--mm-anchor:--mm8}&:nth-of-type(9){--mm-anchor:--mm9}&:nth-of-type(10){--mm-anchor:--mm10}}&:not(:has([popovertarget]:hover,[popover]:popover-open)) .megamenu-active{background-color:#0000}&:has([popovertarget]:hover):not(:has([popover]:popover-open)) .megamenu-active,&:has([popover]:popover-open) .megamenu-active{inset:anchor(var(--mm-anchor) top) anchor(var(--mm-anchor) end) anchor(var(--mm-anchor) bottom) anchor(var(--mm-anchor) start)}&:has([popovertarget]:first-of-type:hover):not(:has([popover]:popover-open)),&:has([popover]:first-of-type:popover-open){--mm-anchor:--mm1}&:has([popovertarget]:nth-of-type(2):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(2):popover-open){--mm-anchor:--mm2}&:has([popovertarget]:nth-of-type(3):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(3):popover-open){--mm-anchor:--mm3}&:has([popovertarget]:nth-of-type(4):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(4):popover-open){--mm-anchor:--mm4}&:has([popovertarget]:nth-of-type(5):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(5):popover-open){--mm-anchor:--mm5}&:has([popovertarget]:nth-of-type(6):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(6):popover-open){--mm-anchor:--mm6}&:has([popovertarget]:nth-of-type(7):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(7):popover-open){--mm-anchor:--mm7}&:has([popovertarget]:nth-of-type(8):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(8):popover-open){--mm-anchor:--mm8}&:has([popovertarget]:nth-of-type(9):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(9):popover-open){--mm-anchor:--mm9}&:has([popovertarget]:nth-of-type(10):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(10):popover-open){--mm-anchor:--mm10}& [popovertarget]:has(+[popover]:popover-open):after{opacity:1;rotate:45deg}& [popover]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-base-300);opacity:0;border-radius:var(--radius-box);background-color:var(--color-base-100);position-area:block-end span-inline-end;max-height:100dvh;max-block-size:calc(100% - .25rem);transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;margin-top:.25rem;translate:0 -.5rem;scale:.98;&:popover-open{opacity:1;@starting-style{opacity:0}}}&:has([popover]:popover-open){& [popover]{translate:0;scale:1}}}@layer daisyui.l1{&:popover-open{opacity:1;background-color:var(--color-base-100);width:100%;margin-top:var(--mm-mt,4rem);border-radius:0;flex-direction:column;align-items:flex-start;padding-top:1rem;position:fixed;overflow-y:scroll;& [popovertarget],&>[popover]:not(:first-of-type){display:var(--mm-display,none)}&::backdrop{background-color:var(--mm-backdrop,oklch(0% 0 0/.4))}position-area:block-end;top:0;max-block-size:80svh;transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;border-inline-width:0;inset-inline-start:0;translate:0;scale:1;@starting-style{opacity:0}& [popovertarget]{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 40%, transparent);font-size:.875rem;font-weight:600;&:after{content:none}}& [popover]{opacity:1;background-color:#0000;border:none;max-height:none;display:block;position:relative;overflow:visible}}}}.sm\:megamenu-active{@layer daisyui.l1.l2.l3{pointer-events:none;background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent);border-radius:var(--radius-field);transition:inset .3s linear(0, .5 10%, .9 30%, 1.05 50%, 1.1 75%, 1), background-color .2s ease-out;position:absolute}}.sm\:megamenu-wide{@layer daisyui.l1.l2{anchor-name:--megamenu;&:popover-open{inset-inline:0}& [popover]{position-area:block-end;position-anchor:--megamenu;width:anchor-size(inline)}}}.sm\:megamenu-full{@layer daisyui.l1.l2{anchor-name:--megamenu;&:popover-open{inset-inline:0}& [popover]{position-area:block-end;position-anchor:--megamenu;border-inline-width:0;border-radius:0;width:100%}}}.sm\:megamenu-vertical{@layer daisyui.l1.l2{opacity:0;background-color:var(--color-base-100);position-area:block-end;width:100%;--mm-backdrop:transparent;max-block-size:calc(100% - .25rem);transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;border-inline-width:0;border-radius:0;flex-direction:column;align-items:flex-start;position:relative;translate:0 -.5rem;scale:.98;&:not([popover]:popover-open){position:revert;display:none}&:popover-open{--mm-mt:0;--mm-display:block}& [popovertarget]{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 40%, transparent);font-size:.875rem;font-weight:600;&:after{content:none}}& [popover]{opacity:1;background-color:#0000;border:none;display:block;position:relative;overflow:visible}}}.sm\:megamenu-xs{@layer daisyui.l1.l2{--fontsize:.6875rem;--mm-p:.5rem;--size:calc(var(--size-field,.25rem) * 6)}}.sm\:megamenu-sm{@layer daisyui.l1.l2{--fontsize:.75rem;--mm-p:.75rem;--size:calc(var(--size-field,.25rem) * 8)}}.sm\:megamenu-md{@layer daisyui.l1.l2{--fontsize:.875rem;--mm-p:1rem;--size:calc(var(--size-field,.25rem) * 10)}}.sm\:megamenu-lg{@layer daisyui.l1.l2{--fontsize:1.125rem;--mm-p:1.25rem;--size:calc(var(--size-field,.25rem) * 12)}}.sm\:megamenu-xl{@layer daisyui.l1.l2{--fontsize:1.375rem;--mm-p:1.5rem;--size:calc(var(--size-field,.25rem) * 14)}}}@media (width>=768px){.md\:megamenu{@layer daisyui.l1.l2.l3{width:unset;border-radius:calc(var(--radius-field) + var(--border));--mm-anchor:--mm1;--size:calc(var(--size-field,.25rem) * 10);background-color:#0000;align-items:center;display:flex;position:relative;overflow:visible;& [popovertarget]{isolation:isolate;cursor:pointer;padding-inline:var(--mm-p,1rem);height:var(--size);font-size:var(--fontsize,.875rem);border:var(--border) solid transparent;anchor-name:var(--mm-anchor);align-items:center;gap:.75rem;transition:background-color .2s ease-out,color .2s ease-out;display:flex;position:relative;&:focus-visible{outline:2px solid var(--color-base-content);outline-offset:2px}&:after{--tw-content:"";content:var(--tw-content);pointer-events:none;opacity:.25;width:.375rem;height:.375rem;transition:opacity .2s ease-out,rotate .2s ease-out;display:block;inset-inline-end:1.4rem;rotate:-135deg;box-shadow:inset 2px 2px}&:first-of-type{--mm-anchor:--mm1}&:nth-of-type(2){--mm-anchor:--mm2}&:nth-of-type(3){--mm-anchor:--mm3}&:nth-of-type(4){--mm-anchor:--mm4}&:nth-of-type(5){--mm-anchor:--mm5}&:nth-of-type(6){--mm-anchor:--mm6}&:nth-of-type(7){--mm-anchor:--mm7}&:nth-of-type(8){--mm-anchor:--mm8}&:nth-of-type(9){--mm-anchor:--mm9}&:nth-of-type(10){--mm-anchor:--mm10}}&:not(:has([popovertarget]:hover,[popover]:popover-open)) .megamenu-active{background-color:#0000}&:has([popovertarget]:hover):not(:has([popover]:popover-open)) .megamenu-active,&:has([popover]:popover-open) .megamenu-active{inset:anchor(var(--mm-anchor) top) anchor(var(--mm-anchor) end) anchor(var(--mm-anchor) bottom) anchor(var(--mm-anchor) start)}&:has([popovertarget]:first-of-type:hover):not(:has([popover]:popover-open)),&:has([popover]:first-of-type:popover-open){--mm-anchor:--mm1}&:has([popovertarget]:nth-of-type(2):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(2):popover-open){--mm-anchor:--mm2}&:has([popovertarget]:nth-of-type(3):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(3):popover-open){--mm-anchor:--mm3}&:has([popovertarget]:nth-of-type(4):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(4):popover-open){--mm-anchor:--mm4}&:has([popovertarget]:nth-of-type(5):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(5):popover-open){--mm-anchor:--mm5}&:has([popovertarget]:nth-of-type(6):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(6):popover-open){--mm-anchor:--mm6}&:has([popovertarget]:nth-of-type(7):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(7):popover-open){--mm-anchor:--mm7}&:has([popovertarget]:nth-of-type(8):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(8):popover-open){--mm-anchor:--mm8}&:has([popovertarget]:nth-of-type(9):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(9):popover-open){--mm-anchor:--mm9}&:has([popovertarget]:nth-of-type(10):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(10):popover-open){--mm-anchor:--mm10}& [popovertarget]:has(+[popover]:popover-open):after{opacity:1;rotate:45deg}& [popover]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-base-300);opacity:0;border-radius:var(--radius-box);background-color:var(--color-base-100);position-area:block-end span-inline-end;max-height:100dvh;max-block-size:calc(100% - .25rem);transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;margin-top:.25rem;translate:0 -.5rem;scale:.98;&:popover-open{opacity:1;@starting-style{opacity:0}}}&:has([popover]:popover-open){& [popover]{translate:0;scale:1}}}@layer daisyui.l1{&:popover-open{opacity:1;background-color:var(--color-base-100);width:100%;margin-top:var(--mm-mt,4rem);border-radius:0;flex-direction:column;align-items:flex-start;padding-top:1rem;position:fixed;overflow-y:scroll;& [popovertarget],&>[popover]:not(:first-of-type){display:var(--mm-display,none)}&::backdrop{background-color:var(--mm-backdrop,oklch(0% 0 0/.4))}position-area:block-end;top:0;max-block-size:80svh;transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;border-inline-width:0;inset-inline-start:0;translate:0;scale:1;@starting-style{opacity:0}& [popovertarget]{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 40%, transparent);font-size:.875rem;font-weight:600;&:after{content:none}}& [popover]{opacity:1;background-color:#0000;border:none;max-height:none;display:block;position:relative;overflow:visible}}}}.md\:megamenu-active{@layer daisyui.l1.l2.l3{pointer-events:none;background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent);border-radius:var(--radius-field);transition:inset .3s linear(0, .5 10%, .9 30%, 1.05 50%, 1.1 75%, 1), background-color .2s ease-out;position:absolute}}.md\:megamenu-wide{@layer daisyui.l1.l2{anchor-name:--megamenu;&:popover-open{inset-inline:0}& [popover]{position-area:block-end;position-anchor:--megamenu;width:anchor-size(inline)}}}.md\:megamenu-full{@layer daisyui.l1.l2{anchor-name:--megamenu;&:popover-open{inset-inline:0}& [popover]{position-area:block-end;position-anchor:--megamenu;border-inline-width:0;border-radius:0;width:100%}}}.md\:megamenu-vertical{@layer daisyui.l1.l2{opacity:0;background-color:var(--color-base-100);position-area:block-end;width:100%;--mm-backdrop:transparent;max-block-size:calc(100% - .25rem);transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;border-inline-width:0;border-radius:0;flex-direction:column;align-items:flex-start;position:relative;translate:0 -.5rem;scale:.98;&:not([popover]:popover-open){position:revert;display:none}&:popover-open{--mm-mt:0;--mm-display:block}& [popovertarget]{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 40%, transparent);font-size:.875rem;font-weight:600;&:after{content:none}}& [popover]{opacity:1;background-color:#0000;border:none;display:block;position:relative;overflow:visible}}}.md\:megamenu-xs{@layer daisyui.l1.l2{--fontsize:.6875rem;--mm-p:.5rem;--size:calc(var(--size-field,.25rem) * 6)}}.md\:megamenu-sm{@layer daisyui.l1.l2{--fontsize:.75rem;--mm-p:.75rem;--size:calc(var(--size-field,.25rem) * 8)}}.md\:megamenu-md{@layer daisyui.l1.l2{--fontsize:.875rem;--mm-p:1rem;--size:calc(var(--size-field,.25rem) * 10)}}.md\:megamenu-lg{@layer daisyui.l1.l2{--fontsize:1.125rem;--mm-p:1.25rem;--size:calc(var(--size-field,.25rem) * 12)}}.md\:megamenu-xl{@layer daisyui.l1.l2{--fontsize:1.375rem;--mm-p:1.5rem;--size:calc(var(--size-field,.25rem) * 14)}}}@media (width>=1024px){.lg\:megamenu{@layer daisyui.l1.l2.l3{width:unset;border-radius:calc(var(--radius-field) + var(--border));--mm-anchor:--mm1;--size:calc(var(--size-field,.25rem) * 10);background-color:#0000;align-items:center;display:flex;position:relative;overflow:visible;& [popovertarget]{isolation:isolate;cursor:pointer;padding-inline:var(--mm-p,1rem);height:var(--size);font-size:var(--fontsize,.875rem);border:var(--border) solid transparent;anchor-name:var(--mm-anchor);align-items:center;gap:.75rem;transition:background-color .2s ease-out,color .2s ease-out;display:flex;position:relative;&:focus-visible{outline:2px solid var(--color-base-content);outline-offset:2px}&:after{--tw-content:"";content:var(--tw-content);pointer-events:none;opacity:.25;width:.375rem;height:.375rem;transition:opacity .2s ease-out,rotate .2s ease-out;display:block;inset-inline-end:1.4rem;rotate:-135deg;box-shadow:inset 2px 2px}&:first-of-type{--mm-anchor:--mm1}&:nth-of-type(2){--mm-anchor:--mm2}&:nth-of-type(3){--mm-anchor:--mm3}&:nth-of-type(4){--mm-anchor:--mm4}&:nth-of-type(5){--mm-anchor:--mm5}&:nth-of-type(6){--mm-anchor:--mm6}&:nth-of-type(7){--mm-anchor:--mm7}&:nth-of-type(8){--mm-anchor:--mm8}&:nth-of-type(9){--mm-anchor:--mm9}&:nth-of-type(10){--mm-anchor:--mm10}}&:not(:has([popovertarget]:hover,[popover]:popover-open)) .megamenu-active{background-color:#0000}&:has([popovertarget]:hover):not(:has([popover]:popover-open)) .megamenu-active,&:has([popover]:popover-open) .megamenu-active{inset:anchor(var(--mm-anchor) top) anchor(var(--mm-anchor) end) anchor(var(--mm-anchor) bottom) anchor(var(--mm-anchor) start)}&:has([popovertarget]:first-of-type:hover):not(:has([popover]:popover-open)),&:has([popover]:first-of-type:popover-open){--mm-anchor:--mm1}&:has([popovertarget]:nth-of-type(2):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(2):popover-open){--mm-anchor:--mm2}&:has([popovertarget]:nth-of-type(3):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(3):popover-open){--mm-anchor:--mm3}&:has([popovertarget]:nth-of-type(4):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(4):popover-open){--mm-anchor:--mm4}&:has([popovertarget]:nth-of-type(5):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(5):popover-open){--mm-anchor:--mm5}&:has([popovertarget]:nth-of-type(6):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(6):popover-open){--mm-anchor:--mm6}&:has([popovertarget]:nth-of-type(7):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(7):popover-open){--mm-anchor:--mm7}&:has([popovertarget]:nth-of-type(8):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(8):popover-open){--mm-anchor:--mm8}&:has([popovertarget]:nth-of-type(9):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(9):popover-open){--mm-anchor:--mm9}&:has([popovertarget]:nth-of-type(10):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(10):popover-open){--mm-anchor:--mm10}& [popovertarget]:has(+[popover]:popover-open):after{opacity:1;rotate:45deg}& [popover]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-base-300);opacity:0;border-radius:var(--radius-box);background-color:var(--color-base-100);position-area:block-end span-inline-end;max-height:100dvh;max-block-size:calc(100% - .25rem);transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;margin-top:.25rem;translate:0 -.5rem;scale:.98;&:popover-open{opacity:1;@starting-style{opacity:0}}}&:has([popover]:popover-open){& [popover]{translate:0;scale:1}}}@layer daisyui.l1{&:popover-open{opacity:1;background-color:var(--color-base-100);width:100%;margin-top:var(--mm-mt,4rem);border-radius:0;flex-direction:column;align-items:flex-start;padding-top:1rem;position:fixed;overflow-y:scroll;& [popovertarget],&>[popover]:not(:first-of-type){display:var(--mm-display,none)}&::backdrop{background-color:var(--mm-backdrop,oklch(0% 0 0/.4))}position-area:block-end;top:0;max-block-size:80svh;transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;border-inline-width:0;inset-inline-start:0;translate:0;scale:1;@starting-style{opacity:0}& [popovertarget]{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 40%, transparent);font-size:.875rem;font-weight:600;&:after{content:none}}& [popover]{opacity:1;background-color:#0000;border:none;max-height:none;display:block;position:relative;overflow:visible}}}}.lg\:megamenu-active{@layer daisyui.l1.l2.l3{pointer-events:none;background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent);border-radius:var(--radius-field);transition:inset .3s linear(0, .5 10%, .9 30%, 1.05 50%, 1.1 75%, 1), background-color .2s ease-out;position:absolute}}.lg\:megamenu-wide{@layer daisyui.l1.l2{anchor-name:--megamenu;&:popover-open{inset-inline:0}& [popover]{position-area:block-end;position-anchor:--megamenu;width:anchor-size(inline)}}}.lg\:megamenu-full{@layer daisyui.l1.l2{anchor-name:--megamenu;&:popover-open{inset-inline:0}& [popover]{position-area:block-end;position-anchor:--megamenu;border-inline-width:0;border-radius:0;width:100%}}}.lg\:megamenu-vertical{@layer daisyui.l1.l2{opacity:0;background-color:var(--color-base-100);position-area:block-end;width:100%;--mm-backdrop:transparent;max-block-size:calc(100% - .25rem);transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;border-inline-width:0;border-radius:0;flex-direction:column;align-items:flex-start;position:relative;translate:0 -.5rem;scale:.98;&:not([popover]:popover-open){position:revert;display:none}&:popover-open{--mm-mt:0;--mm-display:block}& [popovertarget]{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 40%, transparent);font-size:.875rem;font-weight:600;&:after{content:none}}& [popover]{opacity:1;background-color:#0000;border:none;display:block;position:relative;overflow:visible}}}.lg\:megamenu-xs{@layer daisyui.l1.l2{--fontsize:.6875rem;--mm-p:.5rem;--size:calc(var(--size-field,.25rem) * 6)}}.lg\:megamenu-sm{@layer daisyui.l1.l2{--fontsize:.75rem;--mm-p:.75rem;--size:calc(var(--size-field,.25rem) * 8)}}.lg\:megamenu-md{@layer daisyui.l1.l2{--fontsize:.875rem;--mm-p:1rem;--size:calc(var(--size-field,.25rem) * 10)}}.lg\:megamenu-lg{@layer daisyui.l1.l2{--fontsize:1.125rem;--mm-p:1.25rem;--size:calc(var(--size-field,.25rem) * 12)}}.lg\:megamenu-xl{@layer daisyui.l1.l2{--fontsize:1.375rem;--mm-p:1.5rem;--size:calc(var(--size-field,.25rem) * 14)}}}@media (width>=1280px){.xl\:megamenu{@layer daisyui.l1.l2.l3{width:unset;border-radius:calc(var(--radius-field) + var(--border));--mm-anchor:--mm1;--size:calc(var(--size-field,.25rem) * 10);background-color:#0000;align-items:center;display:flex;position:relative;overflow:visible;& [popovertarget]{isolation:isolate;cursor:pointer;padding-inline:var(--mm-p,1rem);height:var(--size);font-size:var(--fontsize,.875rem);border:var(--border) solid transparent;anchor-name:var(--mm-anchor);align-items:center;gap:.75rem;transition:background-color .2s ease-out,color .2s ease-out;display:flex;position:relative;&:focus-visible{outline:2px solid var(--color-base-content);outline-offset:2px}&:after{--tw-content:"";content:var(--tw-content);pointer-events:none;opacity:.25;width:.375rem;height:.375rem;transition:opacity .2s ease-out,rotate .2s ease-out;display:block;inset-inline-end:1.4rem;rotate:-135deg;box-shadow:inset 2px 2px}&:first-of-type{--mm-anchor:--mm1}&:nth-of-type(2){--mm-anchor:--mm2}&:nth-of-type(3){--mm-anchor:--mm3}&:nth-of-type(4){--mm-anchor:--mm4}&:nth-of-type(5){--mm-anchor:--mm5}&:nth-of-type(6){--mm-anchor:--mm6}&:nth-of-type(7){--mm-anchor:--mm7}&:nth-of-type(8){--mm-anchor:--mm8}&:nth-of-type(9){--mm-anchor:--mm9}&:nth-of-type(10){--mm-anchor:--mm10}}&:not(:has([popovertarget]:hover,[popover]:popover-open)) .megamenu-active{background-color:#0000}&:has([popovertarget]:hover):not(:has([popover]:popover-open)) .megamenu-active,&:has([popover]:popover-open) .megamenu-active{inset:anchor(var(--mm-anchor) top) anchor(var(--mm-anchor) end) anchor(var(--mm-anchor) bottom) anchor(var(--mm-anchor) start)}&:has([popovertarget]:first-of-type:hover):not(:has([popover]:popover-open)),&:has([popover]:first-of-type:popover-open){--mm-anchor:--mm1}&:has([popovertarget]:nth-of-type(2):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(2):popover-open){--mm-anchor:--mm2}&:has([popovertarget]:nth-of-type(3):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(3):popover-open){--mm-anchor:--mm3}&:has([popovertarget]:nth-of-type(4):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(4):popover-open){--mm-anchor:--mm4}&:has([popovertarget]:nth-of-type(5):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(5):popover-open){--mm-anchor:--mm5}&:has([popovertarget]:nth-of-type(6):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(6):popover-open){--mm-anchor:--mm6}&:has([popovertarget]:nth-of-type(7):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(7):popover-open){--mm-anchor:--mm7}&:has([popovertarget]:nth-of-type(8):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(8):popover-open){--mm-anchor:--mm8}&:has([popovertarget]:nth-of-type(9):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(9):popover-open){--mm-anchor:--mm9}&:has([popovertarget]:nth-of-type(10):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(10):popover-open){--mm-anchor:--mm10}& [popovertarget]:has(+[popover]:popover-open):after{opacity:1;rotate:45deg}& [popover]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-base-300);opacity:0;border-radius:var(--radius-box);background-color:var(--color-base-100);position-area:block-end span-inline-end;max-height:100dvh;max-block-size:calc(100% - .25rem);transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;margin-top:.25rem;translate:0 -.5rem;scale:.98;&:popover-open{opacity:1;@starting-style{opacity:0}}}&:has([popover]:popover-open){& [popover]{translate:0;scale:1}}}@layer daisyui.l1{&:popover-open{opacity:1;background-color:var(--color-base-100);width:100%;margin-top:var(--mm-mt,4rem);border-radius:0;flex-direction:column;align-items:flex-start;padding-top:1rem;position:fixed;overflow-y:scroll;& [popovertarget],&>[popover]:not(:first-of-type){display:var(--mm-display,none)}&::backdrop{background-color:var(--mm-backdrop,oklch(0% 0 0/.4))}position-area:block-end;top:0;max-block-size:80svh;transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;border-inline-width:0;inset-inline-start:0;translate:0;scale:1;@starting-style{opacity:0}& [popovertarget]{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 40%, transparent);font-size:.875rem;font-weight:600;&:after{content:none}}& [popover]{opacity:1;background-color:#0000;border:none;max-height:none;display:block;position:relative;overflow:visible}}}}.xl\:megamenu-active{@layer daisyui.l1.l2.l3{pointer-events:none;background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent);border-radius:var(--radius-field);transition:inset .3s linear(0, .5 10%, .9 30%, 1.05 50%, 1.1 75%, 1), background-color .2s ease-out;position:absolute}}.xl\:megamenu-wide{@layer daisyui.l1.l2{anchor-name:--megamenu;&:popover-open{inset-inline:0}& [popover]{position-area:block-end;position-anchor:--megamenu;width:anchor-size(inline)}}}.xl\:megamenu-full{@layer daisyui.l1.l2{anchor-name:--megamenu;&:popover-open{inset-inline:0}& [popover]{position-area:block-end;position-anchor:--megamenu;border-inline-width:0;border-radius:0;width:100%}}}.xl\:megamenu-vertical{@layer daisyui.l1.l2{opacity:0;background-color:var(--color-base-100);position-area:block-end;width:100%;--mm-backdrop:transparent;max-block-size:calc(100% - .25rem);transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;border-inline-width:0;border-radius:0;flex-direction:column;align-items:flex-start;position:relative;translate:0 -.5rem;scale:.98;&:not([popover]:popover-open){position:revert;display:none}&:popover-open{--mm-mt:0;--mm-display:block}& [popovertarget]{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 40%, transparent);font-size:.875rem;font-weight:600;&:after{content:none}}& [popover]{opacity:1;background-color:#0000;border:none;display:block;position:relative;overflow:visible}}}.xl\:megamenu-xs{@layer daisyui.l1.l2{--fontsize:.6875rem;--mm-p:.5rem;--size:calc(var(--size-field,.25rem) * 6)}}.xl\:megamenu-sm{@layer daisyui.l1.l2{--fontsize:.75rem;--mm-p:.75rem;--size:calc(var(--size-field,.25rem) * 8)}}.xl\:megamenu-md{@layer daisyui.l1.l2{--fontsize:.875rem;--mm-p:1rem;--size:calc(var(--size-field,.25rem) * 10)}}.xl\:megamenu-lg{@layer daisyui.l1.l2{--fontsize:1.125rem;--mm-p:1.25rem;--size:calc(var(--size-field,.25rem) * 12)}}.xl\:megamenu-xl{@layer daisyui.l1.l2{--fontsize:1.375rem;--mm-p:1.5rem;--size:calc(var(--size-field,.25rem) * 14)}}}@media (width>=1536px){.\32 xl\:megamenu{@layer daisyui.l1.l2.l3{width:unset;border-radius:calc(var(--radius-field) + var(--border));--mm-anchor:--mm1;--size:calc(var(--size-field,.25rem) * 10);background-color:#0000;align-items:center;display:flex;position:relative;overflow:visible;& [popovertarget]{isolation:isolate;cursor:pointer;padding-inline:var(--mm-p,1rem);height:var(--size);font-size:var(--fontsize,.875rem);border:var(--border) solid transparent;anchor-name:var(--mm-anchor);align-items:center;gap:.75rem;transition:background-color .2s ease-out,color .2s ease-out;display:flex;position:relative;&:focus-visible{outline:2px solid var(--color-base-content);outline-offset:2px}&:after{--tw-content:"";content:var(--tw-content);pointer-events:none;opacity:.25;width:.375rem;height:.375rem;transition:opacity .2s ease-out,rotate .2s ease-out;display:block;inset-inline-end:1.4rem;rotate:-135deg;box-shadow:inset 2px 2px}&:first-of-type{--mm-anchor:--mm1}&:nth-of-type(2){--mm-anchor:--mm2}&:nth-of-type(3){--mm-anchor:--mm3}&:nth-of-type(4){--mm-anchor:--mm4}&:nth-of-type(5){--mm-anchor:--mm5}&:nth-of-type(6){--mm-anchor:--mm6}&:nth-of-type(7){--mm-anchor:--mm7}&:nth-of-type(8){--mm-anchor:--mm8}&:nth-of-type(9){--mm-anchor:--mm9}&:nth-of-type(10){--mm-anchor:--mm10}}&:not(:has([popovertarget]:hover,[popover]:popover-open)) .megamenu-active{background-color:#0000}&:has([popovertarget]:hover):not(:has([popover]:popover-open)) .megamenu-active,&:has([popover]:popover-open) .megamenu-active{inset:anchor(var(--mm-anchor) top) anchor(var(--mm-anchor) end) anchor(var(--mm-anchor) bottom) anchor(var(--mm-anchor) start)}&:has([popovertarget]:first-of-type:hover):not(:has([popover]:popover-open)),&:has([popover]:first-of-type:popover-open){--mm-anchor:--mm1}&:has([popovertarget]:nth-of-type(2):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(2):popover-open){--mm-anchor:--mm2}&:has([popovertarget]:nth-of-type(3):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(3):popover-open){--mm-anchor:--mm3}&:has([popovertarget]:nth-of-type(4):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(4):popover-open){--mm-anchor:--mm4}&:has([popovertarget]:nth-of-type(5):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(5):popover-open){--mm-anchor:--mm5}&:has([popovertarget]:nth-of-type(6):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(6):popover-open){--mm-anchor:--mm6}&:has([popovertarget]:nth-of-type(7):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(7):popover-open){--mm-anchor:--mm7}&:has([popovertarget]:nth-of-type(8):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(8):popover-open){--mm-anchor:--mm8}&:has([popovertarget]:nth-of-type(9):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(9):popover-open){--mm-anchor:--mm9}&:has([popovertarget]:nth-of-type(10):hover):not(:has([popover]:popover-open)),&:has([popover]:nth-of-type(10):popover-open){--mm-anchor:--mm10}& [popovertarget]:has(+[popover]:popover-open):after{opacity:1;rotate:45deg}& [popover]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-base-300);opacity:0;border-radius:var(--radius-box);background-color:var(--color-base-100);position-area:block-end span-inline-end;max-height:100dvh;max-block-size:calc(100% - .25rem);transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;margin-top:.25rem;translate:0 -.5rem;scale:.98;&:popover-open{opacity:1;@starting-style{opacity:0}}}&:has([popover]:popover-open){& [popover]{translate:0;scale:1}}}@layer daisyui.l1{&:popover-open{opacity:1;background-color:var(--color-base-100);width:100%;margin-top:var(--mm-mt,4rem);border-radius:0;flex-direction:column;align-items:flex-start;padding-top:1rem;position:fixed;overflow-y:scroll;& [popovertarget],&>[popover]:not(:first-of-type){display:var(--mm-display,none)}&::backdrop{background-color:var(--mm-backdrop,oklch(0% 0 0/.4))}position-area:block-end;top:0;max-block-size:80svh;transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;border-inline-width:0;inset-inline-start:0;translate:0;scale:1;@starting-style{opacity:0}& [popovertarget]{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 40%, transparent);font-size:.875rem;font-weight:600;&:after{content:none}}& [popover]{opacity:1;background-color:#0000;border:none;max-height:none;display:block;position:relative;overflow:visible}}}}.\32 xl\:megamenu-active{@layer daisyui.l1.l2.l3{pointer-events:none;background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent);border-radius:var(--radius-field);transition:inset .3s linear(0, .5 10%, .9 30%, 1.05 50%, 1.1 75%, 1), background-color .2s ease-out;position:absolute}}.\32 xl\:megamenu-wide{@layer daisyui.l1.l2{anchor-name:--megamenu;&:popover-open{inset-inline:0}& [popover]{position-area:block-end;position-anchor:--megamenu;width:anchor-size(inline)}}}.\32 xl\:megamenu-full{@layer daisyui.l1.l2{anchor-name:--megamenu;&:popover-open{inset-inline:0}& [popover]{position-area:block-end;position-anchor:--megamenu;border-inline-width:0;border-radius:0;width:100%}}}.\32 xl\:megamenu-vertical{@layer daisyui.l1.l2{opacity:0;background-color:var(--color-base-100);position-area:block-end;width:100%;--mm-backdrop:transparent;max-block-size:calc(100% - .25rem);transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete;border-inline-width:0;border-radius:0;flex-direction:column;align-items:flex-start;position:relative;translate:0 -.5rem;scale:.98;&:not([popover]:popover-open){position:revert;display:none}&:popover-open{--mm-mt:0;--mm-display:block}& [popovertarget]{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 40%, transparent);font-size:.875rem;font-weight:600;&:after{content:none}}& [popover]{opacity:1;background-color:#0000;border:none;display:block;position:relative;overflow:visible}}}.\32 xl\:megamenu-xs{@layer daisyui.l1.l2{--fontsize:.6875rem;--mm-p:.5rem;--size:calc(var(--size-field,.25rem) * 6)}}.\32 xl\:megamenu-sm{@layer daisyui.l1.l2{--fontsize:.75rem;--mm-p:.75rem;--size:calc(var(--size-field,.25rem) * 8)}}.\32 xl\:megamenu-md{@layer daisyui.l1.l2{--fontsize:.875rem;--mm-p:1rem;--size:calc(var(--size-field,.25rem) * 10)}}.\32 xl\:megamenu-lg{@layer daisyui.l1.l2{--fontsize:1.125rem;--mm-p:1.25rem;--size:calc(var(--size-field,.25rem) * 12)}}.\32 xl\:megamenu-xl{@layer daisyui.l1.l2{--fontsize:1.375rem;--mm-p:1.5rem;--size:calc(var(--size-field,.25rem) * 14)}}}}