/* ========================================
   FORM PASSWORD COMPONENT
   Extends form-input styles
   ======================================== */

.form-password-wrapper {
    margin-bottom: var(--space-5);
}

.form-password-wrapper .form-input {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-muted);
    padding: var(--space-1);
    cursor: pointer;
    z-index: 1;
    transition: color var(--transition-fast);
}

.password-toggle:hover {
    color: var(--color-brand-primary);
}

.password-toggle:focus {
    outline: none;
    color: var(--color-brand-primary);
}

.password-toggle-icon {
    font-size: var(--input-icon-size);
}