/* Boton para mostrar u ocultar la clave dentro de un campo de contrasena.
   Marcado: <div class="password-wrapper"><input ...><button type="button" class="password-toggle"></button></div>
   Los iconos los inserta /global/js/password-toggle.js. Este archivo no toca margen, alto,
   redondeo ni foco del input: eso depende de cada pagina y se ajusta en la vista. */

.password-wrapper {
    position: relative;
}

.password-wrapper input.form-control {
    padding-right: 40px;
}

/* Ojo nativo de Edge/IE: no se muestra, para que no haya dos iconos. */
.password-wrapper input::-ms-reveal {
    display: none;
}

.password-wrapper .password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 40px;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-wrapper .password-toggle svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* Campo chico de Bootstrap (.form-control-sm, 30px de alto): icono y boton mas chicos. */
.password-wrapper input.form-control-sm {
    padding-right: 32px;
}

.password-wrapper input.form-control-sm + .password-toggle {
    width: 32px;
}

.password-wrapper input.form-control-sm + .password-toggle svg {
    width: 16px;
    height: 16px;
}

/* Campo con error (is-invalid de Bootstrap 5): sin el icono rojo, que quedaria debajo del ojo. */
.password-wrapper input.form-control.is-invalid {
    background-image: none;
}