/* Trigger candidate menu (figma SLASH 39:26572 MenuDropdown): menu surface, * r12, hairline border, shadow-lv3, 4px inset padding; anchored to the * composer top edge, left-aligned with the input text. Cells follow * .Menu_cell (min-h 40, r10, pad 10/8, gap 8, 14/22 primary label) with a * trailing dimmed description. */ .menu { position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 100; min-width: 260px; max-width: 537px; max-height: 320px; overflow-y: auto; /* Elevated surface: the scrollbar thumb takes the l2 elevation tokens (see ui-theme styles/scrollbar.css for the rebinding contract). */ --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2); --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2); padding: 4px; display: flex; flex-direction: column; border: 1px solid var(--dsw-alias-border-inverted); border-radius: 12px; background: var(--dsw-specific-menu); box-shadow: var(--dsw-shadow-lv3); } .item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: none; border-radius: 10px; background: transparent; cursor: pointer; font-size: 14px; line-height: 22px; color: var(--dsw-alias-label-primary); text-align: left; } .item:hover, .item.active { background: var(--dsw-alias-interactive-bg-hover); } .itemIcon { display: inline-flex; flex: none; width: 16px; height: 16px; align-items: center; justify-content: center; color: var(--dsw-alias-label-tertiary); } .itemName { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .itemDescription { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-tertiary); } /* Pending-source row: same cell metrics, dimmed label. */ .loading { display: flex; align-items: center; min-height: 40px; padding: 8px 10px; font-size: 14px; line-height: 22px; color: var(--dsw-alias-label-dimmed); }