/* CoffeeSpecs — Tendina con un segno grafico davanti alla voce.
   Sostituisce un `<select>` solo dove la voce ha anche un colore da mostrare:
   un `<option>` nativo accetta testo e basta. Deve però restare indistinguibile
   dal select accanto, altrimenti sembra un comando di un'altra specie. */

.tendina { position: relative; }

.tendina__bottone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 160px;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  text-align: left;
  color: var(--color-text-primary);
  background: var(--color-bg-inset);
  border: var(--rule);
  border-radius: 0;
  cursor: pointer;
}

/* La freccia è disegnata con due bordi, non è un carattere: le tipografiche di
   sistema lo rendono a corpi diversi e il comando ballerebbe fra un browser e
   l'altro. */
.tendina__bottone::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--color-text-tertiary);
  border-bottom: 1.5px solid var(--color-text-tertiary);
  transform: translateY(-2px) rotate(45deg);
}

.tendina__bottone:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.tendina__lista {
  position: absolute;
  z-index: 10;
  top: calc(100% + 2px);
  left: 0;
  /* Larga quanto le sue voci, mai meno del comando: i tipi hanno nomi lunghi e
     troncarli in elenco vorrebbe dire far scegliere alla cieca. */
  min-width: 100%;
  width: max-content;
  max-width: min(22rem, 60vw);
  max-height: 18rem;
  overflow-y: auto;
  background: var(--color-bg-overlay);
  border: var(--rule-strong);
  box-shadow: var(--shadow-overlay);
}

.tendina__lista[hidden] { display: none; }

.tendina__voce {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.tendina__voce.is-attiva { background: var(--color-bg-subtle); }

.tendina__voce[aria-selected="true"] {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Il posto del segno resta occupato anche quando il segno non c'è: senza, la
   voce «tutti» rientra e la colonna delle etichette si sfalsa. */
.tendina__segno {
  flex: 0 0 auto;
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.tendina__testo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}