/* ============================================================================
   wachtwoord.css - De knop om een wachtwoord zichtbaar te maken
   ========================================================================= */

/* 1. De knop onder het wachtwoordveld.                                      */

.rcz-wachtwoord-knop {
  display: flex;                    /* Altijd onder het veld                 */
  width: fit-content;               /* Niet breder dan nodig                 */
  align-items: center;              /* Verticaal gecentreerd                 */
  gap: 0.4rem;                      /* Ruimte tussen oog en tekst            */
  margin: 0.4rem 0 0;               /* Wat ruimte boven                      */
  padding: 0.2rem 0.4rem;           /* Klein klikvlak                        */
  border: 0;                        /* Geen rand                             */
  background: none;                 /* Geen achtergrond                      */
  color: rgba(54, 33, 126, 1);      /* Paars, zoals de links                 */
  font: inherit;                    /* Zelfde letter als de site             */
  font-size: 0.9rem;                /* Iets kleiner dan het veld             */
  cursor: pointer;                  /* Handje bij aanwijzen                  */
}

.rcz-wachtwoord-knop:hover span {
  text-decoration: underline;       /* Onderlijnd bij aanwijzen              */
}

.rcz-wachtwoord-knop:focus-visible {
  outline: 2px solid rgba(233, 91, 19, 1); /* Oranje kader (toetsen)         */
  outline-offset: 2px;              /* Kader iets naast de knop              */
}

/* 2. Het oog zelf.                                                          */

.rcz-wachtwoord-knop svg {
  flex: none;                       /* Niet samendrukken                     */
}