/**
 * Password Toggle Styles
 * Eye icon styling for password visibility toggle
 */

/* Wrapper for password input with icon */
.password-input-wrapper {
    position: relative;
    width: 100%;
    display: inline-block;
}

/* Eye icon positioning and styling */
.password-toggle-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6b7280;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    user-select: none;
    z-index: 10;
    padding: 5px;
}

/* Hover effect */
.password-toggle-icon:hover {
    color: #3b82f6;
    transform: translateY(-50%) scale(1.1);
}

/* Active/Focus state */
.password-toggle-icon:active,
.password-toggle-icon:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
    color: #2563eb;
}

/* Disabled state */
.password-input-wrapper input:disabled ~ .password-toggle-icon {
    color: #d1d5db;
    cursor: not-allowed;
    pointer-events: none;
}

/* Ensure input has proper padding for the icon */
.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
    padding-right: 45px !important;
    box-sizing: border-box;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 768px) {
    .password-toggle-icon {
        right: 12px;
        font-size: 1rem;
        padding: 8px;
    }
    
    .password-input-wrapper input[type="password"],
    .password-input-wrapper input[type="text"] {
        padding-right: 40px !important;
    }
}

/* Extra small devices */
@media screen and (max-width: 480px) {
    .password-toggle-icon {
        right: 10px;
        padding: 10px;
    }
}

/* Accessibility: High contrast mode support */
@media (prefers-contrast: high) {
    .password-toggle-icon {
        color: #000000;
    }
    
    .password-toggle-icon:hover {
        color: #0000ff;
    }
}

/* Dark mode support (if applicable) */
@media (prefers-color-scheme: dark) {
    .password-toggle-icon {
        color: #9ca3af;
    }
    
    .password-toggle-icon:hover {
        color: #60a5fa;
    }
}