/* Shared typeahead controls: the member-search box and the @-mention dropdown in a
   discussion composer. Both were styled independently -- here and in discussions.css --
   with eleven identical declarations apiece. Panel height is the only thing that ever
   differed, so that is all discussions.css still says about it. */
.member-search {
  position: relative;
}

.member-search-results,
.mention-dropdown {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  border-radius: 0;
  background: var(--panel);
  border: 1px solid var(--accent-dim);
  max-height: 12rem;
  overflow-y: auto;
}

.member-search-results button,
.mention-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-weight: 400;
  border: none;
  border-bottom: 1px solid var(--seam);
}

.member-search-results button:last-child,
.mention-dropdown button:last-child {
  border-bottom: none;
}

.member-search-results button:hover,
.member-search-results button:focus,
.mention-dropdown button:hover,
.mention-dropdown button:focus {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}