/* The custom properties and box-sizing are declared on BOTH the container and the dropdown panel because portal mode re-parents the dropdown to — once it's out of the container, ancestor-scoped rules and inherited custom properties no longer reach it. */ .searchable-select-control, .searchable-select-control-dropdown { --ssc-primary: #007bff; --ssc-border: #ccc; --ssc-bg: #fff; --ssc-hover: #f1f1f1; --ssc-text: #333; --ssc-muted: #666; --ssc-radius: 6px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-sizing: border-box; } .searchable-select-control { position: relative; width: 300px; margin-bottom: 20px; /* Spacing if multiple are stacked */ } .searchable-select-control *, .searchable-select-control *::before, .searchable-select-control *::after, .searchable-select-control-dropdown *, .searchable-select-control-dropdown *::before, .searchable-select-control-dropdown *::after { box-sizing: inherit; } /* Trigger Button */ .searchable-select-control-trigger { display: flex; justify-content: space-between; align-items: center; background: var(--ssc-bg); border: 1px solid var(--ssc-border); border-radius: var(--ssc-radius); padding: 10px 15px; cursor: pointer; color: var(--ssc-text); font-size: 14px; user-select: none; transition: border-color 0.2s, box-shadow 0.2s; } .searchable-select-control-trigger:hover { border-color: #999; } .searchable-select-control-arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--ssc-text); margin-left: 10px; } /* Open State */ .searchable-select-control.ssc-open .searchable-select-control-trigger { border-color: var(--ssc-primary); box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); } /* Dropdown Panel */ .searchable-select-control-dropdown { position: absolute; top: 100%; left: 0; min-width: max(100%, 280px); right: 0; background: var(--ssc-bg); border: 1px solid var(--ssc-border); border-radius: var(--ssc-radius); margin-top: 5px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); z-index: 1000; display: none; overflow: hidden; } .searchable-select-control.ssc-open .searchable-select-control-dropdown { display: block; animation: ssc-dropdown-open 0.15s ease-out; } @keyframes ssc-dropdown-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Search Area */ .searchable-select-control-search { padding: 10px 10px 6px; border-bottom: 1px solid #eee; background: #fafafa; } /* Not scoped under `.searchable-select-control` — portal mode re-parents the dropdown (and therefore the input) out of the container, and we need these styles either way. */ .searchable-select-control-input { width: 100%; padding: 8px 10px; border: 1px solid var(--ssc-border); border-radius: 4px; outline: none; font-size: 14px; margin-bottom: 8px !important; } .searchable-select-control-input:focus { border-color: var(--ssc-primary); } /* Input + optional pop-out button live side-by-side. The input keeps its bottom margin so the gap above the stats row is unchanged. */ .searchable-select-control-input-row { display: flex; gap: 6px; /* `stretch` makes the button's border-box match the input's border-box height regardless of the input's intrinsic line-height. Both items carry margin-bottom: 8px so their margin-boxes are equal — that's what flex stretch sizes against. */ align-items: stretch; } .searchable-select-control-input-row .searchable-select-control-input { flex: 1 1 auto; min-width: 0; } /* Pop-out button — hidden unless the dropdown opts in via `.ssc-popout-enabled`. Height is driven by `align-items: stretch` on the row, not a fixed value, so it tracks the input. The matching `margin-bottom` keeps the row's two items the same outer height. */ .searchable-select-control-popout-btn { display: none; flex: 0 0 auto; width: 38px; padding: 0 10px; margin-bottom: 8px; background: var(--ssc-bg); border: 1px solid var(--ssc-border); border-radius: 4px; color: var(--ssc-muted); cursor: pointer; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s, background 0.15s; } .searchable-select-control-popout-btn:hover { border-color: var(--ssc-primary); color: var(--ssc-primary); background: #f5faff; } .searchable-select-control-dropdown.ssc-popout-enabled .searchable-select-control-popout-btn { display: inline-flex; } /* Swap icon based on popped state. */ .searchable-select-control-popout-btn .ssc-popout-icon-in { display: none; } .searchable-select-control-dropdown.ssc-popped .searchable-select-control-popout-btn .ssc-popout-icon-out { display: none; } .searchable-select-control-dropdown.ssc-popped .searchable-select-control-popout-btn .ssc-popout-icon-in { display: block; } /* Popped state: dropdown becomes a centred modal-style panel. Geometry (top/left/width) is set inline by JS so the FLIP animation has a precise target; this rule supplies the visual treatment (shadow, list height, padding bump). */ .searchable-select-control-dropdown.ssc-popped { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); border-color: #bbb; } .searchable-select-control-dropdown.ssc-popped .searchable-select-control-list { max-height: 60vh; } .searchable-select-control-dropdown.ssc-popped .searchable-select-control-search { padding: 14px 14px 8px; } .searchable-select-control-dropdown.ssc-popped .searchable-select-control-option { padding: 12px 18px; } /* Backdrop behind the popped panel. Sits just below the panel's z-index so the panel stays on top, and absorbs clicks so they don't reach the page underneath. */ .searchable-select-control-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 2147483000; animation: ssc-backdrop-in 0.2s ease-out; opacity: 1; transition: opacity 0.2s ease-out; } .searchable-select-control-backdrop.ssc-backdrop-leaving { opacity: 0; } @keyframes ssc-backdrop-in { from { opacity: 0; } to { opacity: 1; } } /* Stats Row */ .searchable-select-control-stats-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; line-height: 14px; } .searchable-select-control-hint { font-size: 9px; color: var(--ssc-muted); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; overflow: hidden; } .searchable-select-control-hint svg { vertical-align: middle; flex-shrink: 0; } /* Stats Text */ .searchable-select-control-stats { font-size: 11px; color: var(--ssc-muted); text-align: right; font-style: italic; } /* Options List */ .searchable-select-control-list { list-style: none; padding: 0; margin: 0; max-height: 200px; overflow-y: auto; } .searchable-select-control-option { padding: 10px 15px; cursor: pointer; font-size: 14px; border: 2px solid transparent; color: var(--ssc-text); border-bottom: 1px solid #f9f9f9; /* Flex layout so optional meta badges (e.g. "1 other instruction") can sit on the right. */ display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* Right-aligned meta text appended to an option, e.g. "1 other instruction". */ .searchable-select-control-option-meta { flex: 0 0 auto; font-size: 11px; color: var(--ssc-muted); font-style: italic; white-space: nowrap; } .searchable-select-control-option:hover { background-color: var(--ssc-hover); } .searchable-select-control-option.ssc-selected { background-color: #e3f2fd; color: var(--ssc-primary); font-weight: 600; } .searchable-select-control-option.ssc-highlighted { background-color: #f0f0f0; border-color: cornflowerblue; animation: ssc-pulse 1.2s ease-in-out infinite; } @keyframes ssc-pulse { 0%, 100% { border-color: cornflowerblue; } 50% { border-color: transparent; } } .searchable-select-control-option.ssc-hidden { display: none; }