/* SearchSelect — combobox / typeahead widget. * * The widget is a flat block: text input + chevron + clear button. The * dropdown list is rendered to by JS to avoid overflow:hidden / * stacking-context issues, so its styles live in this same file but are * NOT scoped to the host element. */ .oc-ss { position: relative; display: inline-flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: 5px; font: inherit; font-size: var(--fs-sm); color: var(--text-primary); min-width: 160px; padding: 0; } .oc-ss.open { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-muted); } .oc-ss .oc-ss-input { flex: 1 1 auto; background: transparent; border: 0; outline: none; color: inherit; font: inherit; font-size: var(--fs-sm); padding: 5px 6px 5px 8px; min-width: 0; width: 100%; } .oc-ss .oc-ss-cluster { display: flex; align-items: center; gap: 2px; padding-right: 4px; flex: 0 0 auto; color: var(--text-muted); } .oc-ss .oc-ss-clear { background: transparent; border: 0; color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 1px 5px; border-radius: 3px; } .oc-ss .oc-ss-clear:hover { background: var(--bg-elevated-2); color: var(--text-primary); } .oc-ss .oc-ss-chev { font-size: 10px; line-height: 1; user-select: none; pointer-events: none; padding-right: 4px; } /* ---- Popup list (rendered to ) ---- */ .oc-ss-popup { position: absolute; z-index: 9999; background: var(--bg-elevated, #1c1f24); color: var(--text-primary, #e6e6e6); border: 1px solid var(--border-default, #2c2f36); border-radius: 6px; box-shadow: 0 4px 24px rgba(0,0,0,0.35); max-height: 280px; overflow: auto; font-size: var(--fs-sm, 13px); min-width: 220px; } .oc-ss-popup .oc-ss-opt { padding: 5px 10px; cursor: pointer; display: flex; align-items: baseline; gap: 8px; user-select: none; border-bottom: 1px solid transparent; } .oc-ss-popup .oc-ss-opt:hover, .oc-ss-popup .oc-ss-opt.hover { background: var(--bg-elevated-2, #2a2e35); } .oc-ss-popup .oc-ss-opt.selected { background: var(--accent-muted, #2d3a4f); color: var(--text-primary, #fff); } .oc-ss-popup .oc-ss-opt-empty .oc-ss-lbl { color: var(--text-muted, #888); font-style: italic; } .oc-ss-popup .oc-ss-lbl { flex: 0 0 auto; } .oc-ss-popup .oc-ss-sub { color: var(--text-muted, #888); font-size: var(--fs-xs, 11px); flex: 1 1 auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oc-ss-popup .oc-ss-opt mark { background: rgba(255, 218, 88, 0.25); color: inherit; padding: 0; border-radius: 2px; } .oc-ss-popup .oc-ss-empty, .oc-ss-popup .oc-ss-more { padding: 7px 10px; color: var(--text-muted, #888); font-size: var(--fs-xs, 11px); font-style: italic; } .oc-ss-popup .oc-ss-more { text-align: center; border-top: 1px dashed var(--border-muted, #2c2f36); }