/* --------------------------------------------------------------------------- Searchable-select primitive — see js/shared/searchable-select.js. Styling mirrors the existing .settings-combobox so enhanced dropdowns look consistent with the rest of the app. --------------------------------------------------------------------------- */ .etl-select { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border: 1px solid var(--clr-border); border-radius: 8px; background: var(--clr-input-bg); min-width: 0; } .etl-select:focus-within { border-color: color-mix(in srgb, var(--clr-primary), transparent 40%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-primary), transparent 80%); } /* Native select stays in the DOM as the source of truth but is hidden. */ .etl-select .etl-select-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; } .etl-select-input { width: 100%; border: 0; background: transparent; color: var(--clr-text); padding: 0.375rem 0.6rem; outline: none; font-size: 0.82rem; min-width: 0; } .etl-select-input:disabled { color: var(--clr-muted); cursor: not-allowed; } .etl-select-toggle { border: 0; border-left: 1px solid var(--clr-border); border-radius: 0 8px 8px 0; min-height: 30px; min-width: 32px; background: transparent; color: var(--clr-muted); cursor: pointer; } /* Portalled to and positioned from the anchor rect in JS (see searchable-select.js). Fixed positioning + a top-tier z-index let the panel escape any ancestor stacking context / overflow clip that would otherwise hide it (#2124). left/top/width are set inline per-open; the up/down flip is computed in JS. z-index matches the .settings-security-role-menu-floating precedent so the panel clears the 5000 modal/panel tier. */ .etl-select-options { position: fixed; z-index: 9999; border: 1px solid color-mix(in srgb, var(--clr-primary), transparent 58%); border-radius: 12px; background: var(--clr-elevated); box-shadow: var(--clr-shadow); padding: 0.4rem; max-height: 260px; overflow-y: auto; } .etl-select-option { display: block; width: 100%; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--clr-text); text-align: left; padding: 0.5rem 0.6rem; font-size: 0.82rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .etl-select-option:hover, .etl-select-option.active { background: color-mix(in srgb, var(--clr-primary), transparent 88%); border-color: color-mix(in srgb, var(--clr-primary), transparent 58%); } .etl-select-option.selected { font-weight: 600; } /* Option with a right-aligned data-type (or similar) badge — see the badgeAttribute enhance option. Mirrors .integration-col-type. */ .etl-select-option.has-badge { display: flex; align-items: center; gap: 8px; } .etl-select-option-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .etl-select-option-badge { flex: 0 0 auto; margin-left: auto; font-size: 0.68rem; color: var(--clr-muted); background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: 4px; padding: 0 6px; } .etl-select-option.disabled { color: var(--clr-muted); cursor: not-allowed; } .etl-select-empty { color: var(--clr-muted); padding: 0.5rem 0.6rem; font-size: 0.85rem; }