/*
 * Botao de olho para revelar a senha. Aplicado pela diretiva mostrar-senha
 * (scripts/app.js), que injeta o botao e marca o wrapper com .com-mostrar-senha.
 *
 * Arquivo separado de proposito: o login.css e minificado e provavelmente
 * gerado a partir de outra fonte, entao editar la se perderia no proximo build.
 */

.com-mostrar-senha {
    position: relative;
}

/* Abre espaco para o botao nao ficar sobre o texto digitado. Senhas longas --
   e as de suporte tem 14 a 20 caracteres -- passariam por baixo do icone. */
.com-mostrar-senha input[type="password"],
.com-mostrar-senha input[type="text"] {
    padding-right: 38px;
}

.btn-mostrar-senha {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 9px; /* alinha com o padding lateral do .input do login.css */
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #999;
    font-size: 15px;
    line-height: 1;
    transition: color .15s ease;
}

.btn-mostrar-senha:hover,
.btn-mostrar-senha:focus {
    color: #2e8e4b; /* color_verde-03 do login.css */
}

.btn-mostrar-senha:active {
    color: #1e5c2d; /* color_verde-02 */
}

/* O foco vem do campo de senha, nao do botao (tabindex="-1"), mas quem navega
   por leitor de tela ainda alcanca o botao -- entao o indicador tem que existir. */
.btn-mostrar-senha:focus-visible {
    outline: 2px solid #59bb42;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Campo com erro de validacao fica com a borda vermelha e o texto deslocado;
   o olho acompanha para nao encostar na borda. */
.com-mostrar-senha input.alert-input {
    padding-right: 38px;
}

/* Nos formularios de troca de senha o input usa .input_senha, que tem largura
   propria -- o botao continua ancorado na direita do wrapper. */
.com-mostrar-senha input.input_senha {
    padding-right: 38px;
}