/* showpassword — botão de olho no campo de senha do login. */

/* Caminho Elastic: o botão é um item do .input-group, irmão do input. Herda a
   borda e a altura do grupo pelas classes do Bootstrap; aqui só tiramos o
   fundo cinza que o .input-group-text traz por padrão, para o olho não
   parecer um segundo ícone de sistema ao lado do cadeado. */
.showpassword-toggle.input-group-append {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    padding: 0;
    background: transparent;
    color: #888;
    cursor: pointer;
}

/* Caminho de reserva (skins sem input-group): botão sobreposto ao campo. */
.showpassword-wrap {
    position: relative;
    display: block;
}

.showpassword-wrap > input {
    /* Reserva espaço à direita para o botão não cobrir o texto digitado. */
    padding-right: 2.6rem;
}

.showpassword-wrap > .showpassword-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #888;
    cursor: pointer;
    line-height: 1;
}

.showpassword-toggle:hover,
.showpassword-toggle:focus {
    color: #2f5bea;
    background: rgba(47, 91, 234, 0.08);
    outline: none;
}

.showpassword-toggle:active {
    background: rgba(47, 91, 234, 0.16);
}

/* Acompanha o tema escuro do Elastic, quando ativo. */
@media (prefers-color-scheme: dark) {
    .showpassword-toggle {
        color: #aaa;
    }
}