/* PASSWORD-CAMPI-1 (F1) — LA PARTE «mostra/nascondi password»: l'occhio DENTRO il campo, una fonte sola per ogni
   campo password della piattaforma (app, ingresso, ops, i siti). Solo token (`--tema-campo-password-*`), nessun
   colore in chiaro. L'involucro non sposta niente: è un blocco, come il campo che avvolge; il bottone è posizionato
   sopra il bordo destro e, finché il JavaScript non lo mostra, non c'è. */
.ka-password {
  position: relative;
  display: block;
}

.ka-password:has(> .ka-password__mostra:not([hidden])) > input {
  padding-right: var(--tema-campo-password-spazio);
}

.ka-password__mostra {
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--tema-campo-password-bottone-larghezza);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tema-campo-password-icona);
  cursor: pointer;
}

.ka-password__mostra[hidden],
.ka-password__occhio[hidden] {
  display: none;
}

.ka-password__mostra:hover {
  color: var(--tema-campo-password-icona-hover);
}

.ka-password__mostra:focus-visible {
  outline: var(--tema-campo-password-fuoco-spessore) solid var(--tema-campo-password-fuoco);
  outline-offset: calc(-1 * var(--tema-campo-password-fuoco-spessore));
  border-radius: var(--tema-campo-password-raggio);
}

.ka-password__occhio {
  width: var(--tema-campo-password-icona-misura);
  height: var(--tema-campo-password-icona-misura);
}