/*
 * Botão de ver senha. Par do public/js/ver-senha.js.
 *
 * Fica em arquivo próprio porque o sistema e a tela de login não compartilham
 * layout — o login é uma página solta, sem menu. Duplicar estas regras nos dois
 * criaria duas fontes de verdade para o mesmo componente.
 *
 * Depende de --bb-accent, que os dois definem.
 */

.bb-senha {
    position: relative;
}

.bb-senha > input {
    /* Espaço para o botão não cobrir o texto digitado. */
    padding-right: 2.5rem;
}

.bb-senha-botao {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.bb-senha-botao:hover {
    color: var(--bb-accent);
}

.bb-senha-botao:focus-visible {
    outline: 2px solid var(--bb-accent);
    outline-offset: -2px;
}

/* Campo inválido já traz o ícone do Bootstrap na direita: os dois convivem. */
.bb-senha > input.is-invalid {
    padding-right: 4.2rem;
    background-position: right 2.7rem center;
}