/* TomSelect — DaisyUI-themed searchable selects * Complete styles including base layout + DaisyUI dark theme overrides. * Replaces tom-select's default CSS entirely to match our design system. * Dropdown renders in via dropdownParent to avoid stacking context issues. */ /* === Base layout === */ /* Reset DaisyUI .select styles on the wrapper — TomSelect renders its own control */ .ts-wrapper { position: relative; width: 100%; overflow: visible !important; appearance: none !important; background: none !important; border: none !important; padding: 0 !important; height: auto !important; min-height: 0 !important; display: block !important; box-shadow: none !important; isolation: auto !important; } .ts-wrapper > select { display: none !important; } .ts-hidden-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* === Control (the visible "select" trigger) === */ .ts-wrapper.single .ts-control { background: var(--color-base-100); border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent); border-radius: var(--radius-field, 0.5rem); padding: 0 2.5rem 0 1rem; height: 2.5rem; display: flex; align-items: center; cursor: pointer; color: var(--color-base-content); position: relative; overflow: hidden; box-sizing: border-box; width: 100%; } /* Caret arrow */ .ts-wrapper.single .ts-control::after { content: ''; position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-top-color: color-mix(in oklab, var(--color-base-content) 40%, transparent); pointer-events: none; } /* Text ellipsis for long placeholder/values */ .ts-control > .item { color: var(--color-base-content); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Active/focused/dropdown-open state — keep focus ring while dropdown is visible */ .ts-wrapper.single.input-active .ts-control, .ts-wrapper.single.focus .ts-control, .ts-wrapper.single.dropdown-active .ts-control { border-color: var(--color-primary); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 30%, transparent); } /* Small variant (select-sm) */ .ts-wrapper.ts-sm .ts-control { height: 2rem; font-size: 0.875rem; padding: 0 2rem 0 0.75rem; } /* === Input inside control (hidden for single selects with dropdown_input plugin) === */ .ts-control > input { flex: 1 1 auto; min-width: 0; display: inline-block !important; padding: 0 !important; min-height: 0 !important; max-height: none !important; max-width: 100% !important; margin: 0 !important; text-indent: 0 !important; border: 0 none !important; background: none !important; line-height: inherit !important; box-shadow: none !important; color: var(--color-base-content) !important; outline: none !important; } .ts-control > input::placeholder { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important; } .ts-control > input:focus { outline: none !important; } .input-hidden .ts-control > input { opacity: 0; position: absolute; left: -10000px; } /* === Dropdown panel (rendered in via dropdownParent) === */ .ts-dropdown { position: absolute; background: var(--color-base-200); border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent); border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3); margin-top: 0.25rem; z-index: 9999; overflow: hidden; box-sizing: border-box; /* Width set dynamically via JS: max(control width, content width) */ max-width: min(28rem, 90vw); } .ts-dropdown .ts-dropdown-content { max-height: 15rem; overflow-y: auto; scroll-behavior: smooth; } /* Options */ .ts-dropdown [data-selectable] { padding: 0.5rem 1rem; cursor: pointer; color: var(--color-base-content); white-space: nowrap; } .ts-dropdown [data-selectable]:hover { background: color-mix(in oklab, var(--color-base-content) 8%, transparent); } .ts-dropdown [data-selectable].active { background: var(--color-primary); color: var(--color-primary-content); } .ts-dropdown .option[data-disabled] { cursor: default; opacity: 0.5; } /* No results */ .ts-dropdown .no-results { padding: 0.5rem 1rem; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } /* Search highlight */ .ts-dropdown [data-selectable] .highlight { background: color-mix(in oklab, var(--color-primary) 25%, transparent); border-radius: 2px; } /* === Plugin: dropdown_input (search box inside dropdown) === */ .plugin-dropdown_input.focus.dropdown-active .ts-control { border-color: var(--color-primary); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 30%, transparent); } .plugin-dropdown_input .dropdown-input-wrap, .ts-dropdown .dropdown-input-wrap { padding: 0.5rem; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); } .plugin-dropdown_input .dropdown-input, .ts-dropdown .dropdown-input { display: block; width: 100%; background: var(--color-base-100); color: var(--color-base-content); border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent); border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; outline: none; box-sizing: border-box; } .plugin-dropdown_input .dropdown-input:focus, .ts-dropdown .dropdown-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 30%, transparent); } .plugin-dropdown_input .items-placeholder { border: 0 none !important; box-shadow: none !important; width: 100%; } .plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder { display: none !important; } /* === Disabled state === */ .disabled .ts-control, .disabled .ts-control * { cursor: default !important; opacity: 0.5; }