/* Bluesky handle typeahead. Recipe source: templates/recipes/bsky-typeahead/.
   Theme it by setting the --bta-* variables on a parent (or :root). The list
   is absolutely positioned under its nearest positioned ancestor, so wrap the
   input + list in an element with position: relative. */

.bta-list {
  --_bg: var(--bta-bg, #fff);
  --_fg: var(--bta-fg, #1b2733);
  --_muted: var(--bta-muted, #5f6f7f);
  --_border: var(--bta-border, #d6dde4);
  --_active: var(--bta-active, #eef4fe);
  --_radius: var(--bta-radius, 9px);
  --_font: var(--bta-font, inherit);

  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  text-align: left;
  font-family: var(--_font);
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  box-shadow: var(--bta-shadow, 0 14px 36px rgba(0, 0, 0, 0.18));
  max-height: 312px;
  overflow-y: auto;
}

/* The hidden attribute loses to any display rule, so restate it. */
.bta-list[hidden] { display: none; }

.bta-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border-radius: calc(var(--_radius) - 3px);
  cursor: pointer;
}

.bta-row[aria-selected="true"] { background: var(--_active); }

.bta-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--bta-avatar-radius, 50%);
  background: var(--_border);
  object-fit: cover;
}

.bta-text { display: grid; min-width: 0; line-height: 1.25; }

.bta-name,
.bta-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bta-name { font-size: 0.92rem; font-weight: 600; }
.bta-handle { font-size: 0.8rem; color: var(--_muted); }