:root {
    --url_icon_password_show: url('../png/icons8-eye-21.png');
    --url_icon_password_hide: url('../png/icons8-hide-21.png');
}

.password-icon {
    opacity: 0.5;
    transition: opacity 0.3s;
}

.password-icon {
    position: absolute;
    right: 10px;
    top: 50%; 
    transform: translateY(-50%);
    cursor: pointer;
    width: 21px; 
    height: 21px; 
    display: inline-block;
}

.input-wrapper:not(:focus):hover .password-icon {
    opacity: 0.7;
}

.input-wrapper input:disabled ~ .password-icon {
    opacity: 0.2;
}

.input-wrapper input:not(:disabled):focus ~ .password-icon,
.input-wrapper input:not(:disabled):active ~ .password-icon {
    opacity: 1;
}


.icon-eye {
    background: var(--url_icon_password_show) no-repeat center;
}

.icon-eye-slash {
    background: var(--url_icon_password_hide) no-repeat center;
}