flyonui/components/menu.css

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

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.menu{border-radius:var(--radius-box);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--menu-active-fg:var(--color-primary);--menu-active-bg:color-mix(in oklab,var(--color-primary)10%,#0000);--menu-hover-fg:var(--color-base-content);--menu-hover-bg:color-mix(in oklab,var(--color-neutral)10%,#0000);flex-flow:column wrap;gap:.125rem;padding:.5rem;display:flex;& :where(li ul){white-space:nowrap;position:relative}& :where(li:not(.dropdown) ul){margin-inline-start:1rem;padding-inline-start:.5rem;&:before{inset-inline-start:0;background-color:var(--color-base-content);opacity:.1;width:var(--border);content:"";position:absolute;top:.75rem;bottom:.625rem}}& :where(li>.menu-dropdown:not(.menu-dropdown-show)){display:none}& :where(.menu li:empty){background-color:var(--color-base-content);opacity:.1;height:1px;margin:.5rem 1rem}& :where(li:not(.menu-title,.tooltip)>:not(ul,.collapse,.accordion-content,.menu-title,.btn)){border-radius:var(--radius-field);text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;--tw-ease:var(--ease-out);transition-duration:.2s;transition-timing-function:var(--ease-out);text-wrap:balance;padding-block:.625rem;padding-inline:1rem}& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title,.btn)){user-select:none;grid-auto-columns:minmax(auto,max-content) auto max-content;grid-auto-flow:column;align-content:flex-start;align-items:center;gap:.5rem;display:grid}& :where(li.tooltip)>*{border-radius:var(--radius-field);text-align:start;padding-block:.625rem;padding-inline:1rem}& :where(.menu li:not(.menu-title,.menu-disabled)){color:var(--color-base-content)}& :where(.menu li:not(.menu-title,.menu-disabled)>:not(ul,.collapse,.accordion-content,.dropdown-active,.menu-title)){&:not(.btn):focus-visible,&:hover{cursor:pointer;--tw-outline-style:none;color:var(--menu-hover-fg);background-color:var(--menu-hover-bg);outline-style:none}}& li:not(.menu-title,.menu-disabled)>:not(ul,.menu-title,.collapse,.accordion-content,.btn).menu-active{color:var(--menu-active-fg);background-color:var(--menu-active-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise)}& li.menu-disabled{pointer-events:none;opacity:.5;-webkit-user-select:none;user-select:none}}:where(.menu li){flex-flow:column wrap;flex-shrink:0;align-items:stretch;display:flex;position:relative;& .badge{justify-self:flex-end}}.menu-title{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content);padding-block:.5rem;padding-inline:1rem}.menu-horizontal{flex-direction:row;display:inline-flex;&>li:not(.menu-title)>.collapse>ul{margin-inline-start:0;margin-top:1rem;padding-block:.5rem;padding-inline-end:.5rem;position:absolute}&>li>.collapse>ul{&:before{content:none}}}:where(.menu-horizontal>li:not(.menu-title)>.collapse>ul){border-radius:var(--radius-box);background-color:var(--color-base-100);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);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)}.menu-vertical{flex-direction:column;display:flex;&>li:not(.menu-title)>.collapse>ul{margin-inline-start:1rem;margin-top:0;padding-block:0;padding-inline-end:0;position:relative}}.menu-xs{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:.25rem;padding-inline:.5rem}& .menu-title{padding-block:.25rem;padding-inline:.5rem}}.menu-sm{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:.5rem;padding-inline:.75rem}& .menu-title{padding-block:.5rem;padding-inline:.75rem}}.menu-md{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));padding-block:.625rem;padding-inline:1rem}& .menu-title{padding-block:.5rem;padding-inline:1rem}}.menu-lg{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:.75rem;padding-inline:1.25rem}& .menu-title{padding-block:.75rem;padding-inline:1.5rem}}.menu-xl{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));padding-block:.875rem;padding-inline:1.5rem}& .menu-title{padding-block:.75rem;padding-inline:1.5rem}}@media (width>=640px){.sm\:menu{border-radius:var(--radius-box);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--menu-active-fg:var(--color-primary);--menu-active-bg:color-mix(in oklab,var(--color-primary)10%,#0000);--menu-hover-fg:var(--color-base-content);--menu-hover-bg:color-mix(in oklab,var(--color-neutral)10%,#0000);flex-flow:column wrap;gap:.125rem;padding:.5rem;display:flex;& :where(li ul){white-space:nowrap;position:relative}& :where(li:not(.dropdown) ul){margin-inline-start:1rem;padding-inline-start:.5rem;&:before{inset-inline-start:0;background-color:var(--color-base-content);opacity:.1;width:var(--border);content:"";position:absolute;top:.75rem;bottom:.625rem}}& :where(li>.menu-dropdown:not(.menu-dropdown-show)){display:none}& :where(.menu li:empty){background-color:var(--color-base-content);opacity:.1;height:1px;margin:.5rem 1rem}& :where(li:not(.menu-title,.tooltip)>:not(ul,.collapse,.accordion-content,.menu-title,.btn)){border-radius:var(--radius-field);text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;--tw-ease:var(--ease-out);transition-duration:.2s;transition-timing-function:var(--ease-out);text-wrap:balance;padding-block:.625rem;padding-inline:1rem}& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title,.btn)){user-select:none;grid-auto-columns:minmax(auto,max-content) auto max-content;grid-auto-flow:column;align-content:flex-start;align-items:center;gap:.5rem;display:grid}& :where(li.tooltip)>*{border-radius:var(--radius-field);text-align:start;padding-block:.625rem;padding-inline:1rem}& :where(.menu li:not(.menu-title,.menu-disabled)){color:var(--color-base-content)}& :where(.menu li:not(.menu-title,.menu-disabled)>:not(ul,.collapse,.accordion-content,.dropdown-active,.menu-title)){&:not(.btn):focus-visible,&:hover{cursor:pointer;--tw-outline-style:none;color:var(--menu-hover-fg);background-color:var(--menu-hover-bg);outline-style:none}}& li:not(.menu-title,.menu-disabled)>:not(ul,.menu-title,.collapse,.accordion-content,.btn).menu-active{color:var(--menu-active-fg);background-color:var(--menu-active-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise)}& li.menu-disabled{pointer-events:none;opacity:.5;-webkit-user-select:none;user-select:none}}:where(.menu li){flex-flow:column wrap;flex-shrink:0;align-items:stretch;display:flex;position:relative;& .badge{justify-self:flex-end}}.sm\:menu-title{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content);padding-block:.5rem;padding-inline:1rem}.sm\:menu-horizontal{flex-direction:row;display:inline-flex;&>li:not(.menu-title)>.collapse>ul{margin-inline-start:0;margin-top:1rem;padding-block:.5rem;padding-inline-end:.5rem;position:absolute}&>li>.collapse>ul{&:before{content:none}}}:where(.menu-horizontal>li:not(.menu-title)>.collapse>ul){border-radius:var(--radius-box);background-color:var(--color-base-100);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);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)}.sm\:menu-vertical{flex-direction:column;display:flex;&>li:not(.menu-title)>.collapse>ul{margin-inline-start:1rem;margin-top:0;padding-block:0;padding-inline-end:0;position:relative}}.sm\:menu-xs{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:.25rem;padding-inline:.5rem}& .menu-title{padding-block:.25rem;padding-inline:.5rem}}.sm\:menu-sm{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:.5rem;padding-inline:.75rem}& .menu-title{padding-block:.5rem;padding-inline:.75rem}}.sm\:menu-md{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));padding-block:.625rem;padding-inline:1rem}& .menu-title{padding-block:.5rem;padding-inline:1rem}}.sm\:menu-lg{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:.75rem;padding-inline:1.25rem}& .menu-title{padding-block:.75rem;padding-inline:1.5rem}}.sm\:menu-xl{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));padding-block:.875rem;padding-inline:1.5rem}& .menu-title{padding-block:.75rem;padding-inline:1.5rem}}}@media (width>=768px){.md\:menu{border-radius:var(--radius-box);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--menu-active-fg:var(--color-primary);--menu-active-bg:color-mix(in oklab,var(--color-primary)10%,#0000);--menu-hover-fg:var(--color-base-content);--menu-hover-bg:color-mix(in oklab,var(--color-neutral)10%,#0000);flex-flow:column wrap;gap:.125rem;padding:.5rem;display:flex;& :where(li ul){white-space:nowrap;position:relative}& :where(li:not(.dropdown) ul){margin-inline-start:1rem;padding-inline-start:.5rem;&:before{inset-inline-start:0;background-color:var(--color-base-content);opacity:.1;width:var(--border);content:"";position:absolute;top:.75rem;bottom:.625rem}}& :where(li>.menu-dropdown:not(.menu-dropdown-show)){display:none}& :where(.menu li:empty){background-color:var(--color-base-content);opacity:.1;height:1px;margin:.5rem 1rem}& :where(li:not(.menu-title,.tooltip)>:not(ul,.collapse,.accordion-content,.menu-title,.btn)){border-radius:var(--radius-field);text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;--tw-ease:var(--ease-out);transition-duration:.2s;transition-timing-function:var(--ease-out);text-wrap:balance;padding-block:.625rem;padding-inline:1rem}& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title,.btn)){user-select:none;grid-auto-columns:minmax(auto,max-content) auto max-content;grid-auto-flow:column;align-content:flex-start;align-items:center;gap:.5rem;display:grid}& :where(li.tooltip)>*{border-radius:var(--radius-field);text-align:start;padding-block:.625rem;padding-inline:1rem}& :where(.menu li:not(.menu-title,.menu-disabled)){color:var(--color-base-content)}& :where(.menu li:not(.menu-title,.menu-disabled)>:not(ul,.collapse,.accordion-content,.dropdown-active,.menu-title)){&:not(.btn):focus-visible,&:hover{cursor:pointer;--tw-outline-style:none;color:var(--menu-hover-fg);background-color:var(--menu-hover-bg);outline-style:none}}& li:not(.menu-title,.menu-disabled)>:not(ul,.menu-title,.collapse,.accordion-content,.btn).menu-active{color:var(--menu-active-fg);background-color:var(--menu-active-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise)}& li.menu-disabled{pointer-events:none;opacity:.5;-webkit-user-select:none;user-select:none}}:where(.menu li){flex-flow:column wrap;flex-shrink:0;align-items:stretch;display:flex;position:relative;& .badge{justify-self:flex-end}}.md\:menu-title{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content);padding-block:.5rem;padding-inline:1rem}.md\:menu-horizontal{flex-direction:row;display:inline-flex;&>li:not(.menu-title)>.collapse>ul{margin-inline-start:0;margin-top:1rem;padding-block:.5rem;padding-inline-end:.5rem;position:absolute}&>li>.collapse>ul{&:before{content:none}}}:where(.menu-horizontal>li:not(.menu-title)>.collapse>ul){border-radius:var(--radius-box);background-color:var(--color-base-100);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);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)}.md\:menu-vertical{flex-direction:column;display:flex;&>li:not(.menu-title)>.collapse>ul{margin-inline-start:1rem;margin-top:0;padding-block:0;padding-inline-end:0;position:relative}}.md\:menu-xs{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:.25rem;padding-inline:.5rem}& .menu-title{padding-block:.25rem;padding-inline:.5rem}}.md\:menu-sm{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:.5rem;padding-inline:.75rem}& .menu-title{padding-block:.5rem;padding-inline:.75rem}}.md\:menu-md{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));padding-block:.625rem;padding-inline:1rem}& .menu-title{padding-block:.5rem;padding-inline:1rem}}.md\:menu-lg{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:.75rem;padding-inline:1.25rem}& .menu-title{padding-block:.75rem;padding-inline:1.5rem}}.md\:menu-xl{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));padding-block:.875rem;padding-inline:1.5rem}& .menu-title{padding-block:.75rem;padding-inline:1.5rem}}}@media (width>=1024px){.lg\:menu{border-radius:var(--radius-box);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--menu-active-fg:var(--color-primary);--menu-active-bg:color-mix(in oklab,var(--color-primary)10%,#0000);--menu-hover-fg:var(--color-base-content);--menu-hover-bg:color-mix(in oklab,var(--color-neutral)10%,#0000);flex-flow:column wrap;gap:.125rem;padding:.5rem;display:flex;& :where(li ul){white-space:nowrap;position:relative}& :where(li:not(.dropdown) ul){margin-inline-start:1rem;padding-inline-start:.5rem;&:before{inset-inline-start:0;background-color:var(--color-base-content);opacity:.1;width:var(--border);content:"";position:absolute;top:.75rem;bottom:.625rem}}& :where(li>.menu-dropdown:not(.menu-dropdown-show)){display:none}& :where(.menu li:empty){background-color:var(--color-base-content);opacity:.1;height:1px;margin:.5rem 1rem}& :where(li:not(.menu-title,.tooltip)>:not(ul,.collapse,.accordion-content,.menu-title,.btn)){border-radius:var(--radius-field);text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;--tw-ease:var(--ease-out);transition-duration:.2s;transition-timing-function:var(--ease-out);text-wrap:balance;padding-block:.625rem;padding-inline:1rem}& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title,.btn)){user-select:none;grid-auto-columns:minmax(auto,max-content) auto max-content;grid-auto-flow:column;align-content:flex-start;align-items:center;gap:.5rem;display:grid}& :where(li.tooltip)>*{border-radius:var(--radius-field);text-align:start;padding-block:.625rem;padding-inline:1rem}& :where(.menu li:not(.menu-title,.menu-disabled)){color:var(--color-base-content)}& :where(.menu li:not(.menu-title,.menu-disabled)>:not(ul,.collapse,.accordion-content,.dropdown-active,.menu-title)){&:not(.btn):focus-visible,&:hover{cursor:pointer;--tw-outline-style:none;color:var(--menu-hover-fg);background-color:var(--menu-hover-bg);outline-style:none}}& li:not(.menu-title,.menu-disabled)>:not(ul,.menu-title,.collapse,.accordion-content,.btn).menu-active{color:var(--menu-active-fg);background-color:var(--menu-active-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise)}& li.menu-disabled{pointer-events:none;opacity:.5;-webkit-user-select:none;user-select:none}}:where(.menu li){flex-flow:column wrap;flex-shrink:0;align-items:stretch;display:flex;position:relative;& .badge{justify-self:flex-end}}.lg\:menu-title{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content);padding-block:.5rem;padding-inline:1rem}.lg\:menu-horizontal{flex-direction:row;display:inline-flex;&>li:not(.menu-title)>.collapse>ul{margin-inline-start:0;margin-top:1rem;padding-block:.5rem;padding-inline-end:.5rem;position:absolute}&>li>.collapse>ul{&:before{content:none}}}:where(.menu-horizontal>li:not(.menu-title)>.collapse>ul){border-radius:var(--radius-box);background-color:var(--color-base-100);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);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)}.lg\:menu-vertical{flex-direction:column;display:flex;&>li:not(.menu-title)>.collapse>ul{margin-inline-start:1rem;margin-top:0;padding-block:0;padding-inline-end:0;position:relative}}.lg\:menu-xs{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:.25rem;padding-inline:.5rem}& .menu-title{padding-block:.25rem;padding-inline:.5rem}}.lg\:menu-sm{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:.5rem;padding-inline:.75rem}& .menu-title{padding-block:.5rem;padding-inline:.75rem}}.lg\:menu-md{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));padding-block:.625rem;padding-inline:1rem}& .menu-title{padding-block:.5rem;padding-inline:1rem}}.lg\:menu-lg{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:.75rem;padding-inline:1.25rem}& .menu-title{padding-block:.75rem;padding-inline:1.5rem}}.lg\:menu-xl{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));padding-block:.875rem;padding-inline:1.5rem}& .menu-title{padding-block:.75rem;padding-inline:1.5rem}}}@media (width>=1280px){.xl\:menu{border-radius:var(--radius-box);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--menu-active-fg:var(--color-primary);--menu-active-bg:color-mix(in oklab,var(--color-primary)10%,#0000);--menu-hover-fg:var(--color-base-content);--menu-hover-bg:color-mix(in oklab,var(--color-neutral)10%,#0000);flex-flow:column wrap;gap:.125rem;padding:.5rem;display:flex;& :where(li ul){white-space:nowrap;position:relative}& :where(li:not(.dropdown) ul){margin-inline-start:1rem;padding-inline-start:.5rem;&:before{inset-inline-start:0;background-color:var(--color-base-content);opacity:.1;width:var(--border);content:"";position:absolute;top:.75rem;bottom:.625rem}}& :where(li>.menu-dropdown:not(.menu-dropdown-show)){display:none}& :where(.menu li:empty){background-color:var(--color-base-content);opacity:.1;height:1px;margin:.5rem 1rem}& :where(li:not(.menu-title,.tooltip)>:not(ul,.collapse,.accordion-content,.menu-title,.btn)){border-radius:var(--radius-field);text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;--tw-ease:var(--ease-out);transition-duration:.2s;transition-timing-function:var(--ease-out);text-wrap:balance;padding-block:.625rem;padding-inline:1rem}& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title,.btn)){user-select:none;grid-auto-columns:minmax(auto,max-content) auto max-content;grid-auto-flow:column;align-content:flex-start;align-items:center;gap:.5rem;display:grid}& :where(li.tooltip)>*{border-radius:var(--radius-field);text-align:start;padding-block:.625rem;padding-inline:1rem}& :where(.menu li:not(.menu-title,.menu-disabled)){color:var(--color-base-content)}& :where(.menu li:not(.menu-title,.menu-disabled)>:not(ul,.collapse,.accordion-content,.dropdown-active,.menu-title)){&:not(.btn):focus-visible,&:hover{cursor:pointer;--tw-outline-style:none;color:var(--menu-hover-fg);background-color:var(--menu-hover-bg);outline-style:none}}& li:not(.menu-title,.menu-disabled)>:not(ul,.menu-title,.collapse,.accordion-content,.btn).menu-active{color:var(--menu-active-fg);background-color:var(--menu-active-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise)}& li.menu-disabled{pointer-events:none;opacity:.5;-webkit-user-select:none;user-select:none}}:where(.menu li){flex-flow:column wrap;flex-shrink:0;align-items:stretch;display:flex;position:relative;& .badge{justify-self:flex-end}}.xl\:menu-title{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content);padding-block:.5rem;padding-inline:1rem}.xl\:menu-horizontal{flex-direction:row;display:inline-flex;&>li:not(.menu-title)>.collapse>ul{margin-inline-start:0;margin-top:1rem;padding-block:.5rem;padding-inline-end:.5rem;position:absolute}&>li>.collapse>ul{&:before{content:none}}}:where(.menu-horizontal>li:not(.menu-title)>.collapse>ul){border-radius:var(--radius-box);background-color:var(--color-base-100);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);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)}.xl\:menu-vertical{flex-direction:column;display:flex;&>li:not(.menu-title)>.collapse>ul{margin-inline-start:1rem;margin-top:0;padding-block:0;padding-inline-end:0;position:relative}}.xl\:menu-xs{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:.25rem;padding-inline:.5rem}& .menu-title{padding-block:.25rem;padding-inline:.5rem}}.xl\:menu-sm{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:.5rem;padding-inline:.75rem}& .menu-title{padding-block:.5rem;padding-inline:.75rem}}.xl\:menu-md{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));padding-block:.625rem;padding-inline:1rem}& .menu-title{padding-block:.5rem;padding-inline:1rem}}.xl\:menu-lg{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:.75rem;padding-inline:1.25rem}& .menu-title{padding-block:.75rem;padding-inline:1.5rem}}.xl\:menu-xl{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));padding-block:.875rem;padding-inline:1.5rem}& .menu-title{padding-block:.75rem;padding-inline:1.5rem}}}@media (width>=1536px){.\32 xl\:menu{border-radius:var(--radius-box);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--menu-active-fg:var(--color-primary);--menu-active-bg:color-mix(in oklab,var(--color-primary)10%,#0000);--menu-hover-fg:var(--color-base-content);--menu-hover-bg:color-mix(in oklab,var(--color-neutral)10%,#0000);flex-flow:column wrap;gap:.125rem;padding:.5rem;display:flex;& :where(li ul){white-space:nowrap;position:relative}& :where(li:not(.dropdown) ul){margin-inline-start:1rem;padding-inline-start:.5rem;&:before{inset-inline-start:0;background-color:var(--color-base-content);opacity:.1;width:var(--border);content:"";position:absolute;top:.75rem;bottom:.625rem}}& :where(li>.menu-dropdown:not(.menu-dropdown-show)){display:none}& :where(.menu li:empty){background-color:var(--color-base-content);opacity:.1;height:1px;margin:.5rem 1rem}& :where(li:not(.menu-title,.tooltip)>:not(ul,.collapse,.accordion-content,.menu-title,.btn)){border-radius:var(--radius-field);text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;--tw-ease:var(--ease-out);transition-duration:.2s;transition-timing-function:var(--ease-out);text-wrap:balance;padding-block:.625rem;padding-inline:1rem}& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title,.btn)){user-select:none;grid-auto-columns:minmax(auto,max-content) auto max-content;grid-auto-flow:column;align-content:flex-start;align-items:center;gap:.5rem;display:grid}& :where(li.tooltip)>*{border-radius:var(--radius-field);text-align:start;padding-block:.625rem;padding-inline:1rem}& :where(.menu li:not(.menu-title,.menu-disabled)){color:var(--color-base-content)}& :where(.menu li:not(.menu-title,.menu-disabled)>:not(ul,.collapse,.accordion-content,.dropdown-active,.menu-title)){&:not(.btn):focus-visible,&:hover{cursor:pointer;--tw-outline-style:none;color:var(--menu-hover-fg);background-color:var(--menu-hover-bg);outline-style:none}}& li:not(.menu-title,.menu-disabled)>:not(ul,.menu-title,.collapse,.accordion-content,.btn).menu-active{color:var(--menu-active-fg);background-color:var(--menu-active-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise)}& li.menu-disabled{pointer-events:none;opacity:.5;-webkit-user-select:none;user-select:none}}:where(.menu li){flex-flow:column wrap;flex-shrink:0;align-items:stretch;display:flex;position:relative;& .badge{justify-self:flex-end}}.\32 xl\:menu-title{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content);padding-block:.5rem;padding-inline:1rem}.\32 xl\:menu-horizontal{flex-direction:row;display:inline-flex;&>li:not(.menu-title)>.collapse>ul{margin-inline-start:0;margin-top:1rem;padding-block:.5rem;padding-inline-end:.5rem;position:absolute}&>li>.collapse>ul{&:before{content:none}}}:where(.menu-horizontal>li:not(.menu-title)>.collapse>ul){border-radius:var(--radius-box);background-color:var(--color-base-100);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);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)}.\32 xl\:menu-vertical{flex-direction:column;display:flex;&>li:not(.menu-title)>.collapse>ul{margin-inline-start:1rem;margin-top:0;padding-block:0;padding-inline-end:0;position:relative}}.\32 xl\:menu-xs{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:.25rem;padding-inline:.5rem}& .menu-title{padding-block:.25rem;padding-inline:.5rem}}.\32 xl\:menu-sm{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:.5rem;padding-inline:.75rem}& .menu-title{padding-block:.5rem;padding-inline:.75rem}}.\32 xl\:menu-md{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));padding-block:.625rem;padding-inline:1rem}& .menu-title{padding-block:.5rem;padding-inline:1rem}}.\32 xl\:menu-lg{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:.75rem;padding-inline:1.25rem}& .menu-title{padding-block:.75rem;padding-inline:1.5rem}}.\32 xl\:menu-xl{& :where(li:not(.menu-title)>:not(ul,.collapse,.accordion-content,.menu-title)){border-radius:var(--radius-field);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));padding-block:.875rem;padding-inline:1.5rem}& .menu-title{padding-block:.75rem;padding-inline:1.5rem}}}}