.has-toggle-password {
    position: relative;
}

.has-toggle-password input {
    padding-right: 2.5rem; /* espace pour le bouton */
}

.toggle-password-icon {
    height: 1rem;
    width: 1rem;
    display: block;
}

.toggle-password-button {
    align-items: center;
    background-color: transparent;
    border: none;
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    justify-content: center;
    font-size: 0.875rem;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    cursor: pointer;
}

.toggle-password-button:focus {
    outline: 2px solid rgba(0,0,0,0.1);
    outline-offset: 2px;
}

/* optional small modifier when the button should be inline with other elements */
.in-input {
    display: inline-flex;
}
