frutjam/dist/components/combobox.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.combobox-list{position:absolute;inset-block-start:calc(100% + .25rem);inset-inline:0;z-index:100;background-color:var(--color-base);border:1px solid var(--color-base-soft);border-radius:calc(var(--border-radius)*2);padding:.375rem;margin:0;list-style:none;max-height:16rem;overflow-y:auto;scrollbar-width:thin;opacity:var(--combobox-list--opacity,0);pointer-events:var(--combobox-list--pointer-events,none);transform:var(--combobox-list--transform,translateY(-.25rem));transition:opacity .15s ease-in-out,transform .15s ease-in-out;display:flex;flex-direction:column;gap:.125rem;box-shadow:0 4px 16px var(--color-base-950);@supports (color:color-mix(in lab,red,red)){box-shadow:0 4px 16px color-mix(in oklab,var(--color-base-950) 10%,transparent)}}.combobox-item{--combobox-item-active-bg:var(--color-primary-soft);--combobox-item-active-color:light-dark(var(--color-primary-800),var(--color-primary));padding-inline:.75rem;padding-block:.5rem;font-size:.875rem;border-radius:calc(var(--border-radius)*1.5);color:var(--color-on-base);cursor:pointer;transition:background-color .1s ease-in-out,color .1s ease-in-out;&:hover{@media (hover:hover){background-color:var(--color-base-soft)}}&.combobox-item-active,&[aria-selected=true]{background-color:var(--combobox-item-active-bg);color:var(--combobox-item-active-color)}}.combobox-open{--combobox-list--opacity:1;--combobox-list--pointer-events:auto;--combobox-list--transform:translateY(0)}.combobox-accent{--combobox-item-active-bg:var(--color-accent-soft);--combobox-item-active-color:light-dark(var(--color-accent-800),var(--color-accent))}.combobox-error{--combobox-item-active-bg:var(--color-error-soft);--combobox-item-active-color:light-dark(var(--color-error-800),var(--color-error))}.combobox-info{--combobox-item-active-bg:var(--color-info-soft);--combobox-item-active-color:light-dark(var(--color-info-800),var(--color-info))}.combobox-primary{--combobox-item-active-bg:var(--color-primary-soft);--combobox-item-active-color:light-dark(var(--color-primary-800),var(--color-primary))}.combobox-secondary{--combobox-item-active-bg:var(--color-secondary-soft);--combobox-item-active-color:light-dark(var(--color-secondary-800),var(--color-secondary))}.combobox-success{--combobox-item-active-bg:var(--color-success-soft);--combobox-item-active-color:light-dark(var(--color-success-800),var(--color-success))}.combobox-warning{--combobox-item-active-bg:var(--color-warning-soft);--combobox-item-active-color:light-dark(var(--color-warning-800),var(--color-warning))}