/* Escolha numa lista com busca (templates/componentes/_escolha.html, js/componentes/escolha.js): o campo de busca
   com a lupa e, embaixo, a lista que rola, com uma pessoa por linha. A escolhida fica no verde suave com o visto. */

.escolha {
  display: grid;
  gap: var(--espaco-3);
  min-width: 0;
}

.escolha__busca {
  position: relative;
  display: flex;
  align-items: center;
}

.escolha__lupa {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--cor-texto-suave);
  pointer-events: none;
}

.escolha__campo {
  padding-left: 42px;
}

.escolha__lista {
  display: grid;
  align-content: start;
  gap: 2px;
  max-height: min(52vh, 420px);
  margin: 0 -6px;
  padding: 2px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.escolha__opcao {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--espaco-3);
  min-height: 52px;
  padding: 8px 10px;
  border-radius: var(--raio-2);
  cursor: pointer;
  transition: background-color var(--duracao-2) var(--curva-padrao);
}

.escolha__opcao[hidden] {
  display: none;
}

.escolha__opcao:hover {
  background: var(--cor-realce);
}

.escolha__opcao:has(.escolha__radio:checked) {
  background: var(--cor-marca-suave);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-marca) 30%, transparent);
}

.escolha__opcao:has(.escolha__radio:focus-visible) {
  box-shadow: var(--anel-foco);
}

/* O rádio some da vista, mas continua no teclado e no leitor de tela: a linha inteira é o controle. */
.escolha__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.escolha__texto {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.escolha__texto b {
  font-size: var(--texto-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.escolha__texto small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

.escolha__cor {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-do-partido, var(--cor-borda-forte));
}

.escolha__etiqueta {
  max-width: 14rem;
  overflow: hidden;
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.escolha__visto {
  width: 18px;
  height: 18px;
  color: var(--cor-marca);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--duracao-2) var(--curva-padrao),
    transform var(--duracao-3) var(--curva-saida);
}

.escolha__opcao:has(.escolha__radio:checked) .escolha__visto {
  opacity: 1;
  transform: none;
}

.escolha__vazio {
  padding: var(--espaco-5) var(--espaco-3);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  text-align: center;
}

.escolha__vazio[hidden] {
  display: none;
}

/* No celular, a etiqueta desce para baixo do nome, para o nome não ficar espremido. */
@media (max-width: 560px) {
  .escolha__opcao {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .escolha__etiqueta {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    margin-top: -4px;
  }

  .escolha__visto {
    grid-column: 3;
    grid-row: 1;
  }
}