:root {
    // Password Input
    --csd-password-width: 100%;
    --csd-password-padding-right: calc(var(--px-input) * 2 + 20px);
    
    // Toggle Button
    --csd-password-toggle-right: var(--px-input);
    --csd-password-toggle-color: var(--text-color-secondary);
    --csd-password-toggle-hover-color: var(--text-color);
    --csd-password-toggle-disabled-color: var(--text-color-disabled);
    --csd-password-toggle-font-size: 1.25rem;
    --csd-password-toggle-transition: var(--transition);
    
    // Strength Indicator
    --csd-password-strength-margin: 8px;
    --csd-password-strength-bar-height: 4px;
    --csd-password-strength-bar-bg: var(--bc-input);
    --csd-password-strength-bar-radius: 2px;
    --csd-password-strength-transition: width 0.3s ease;
    
    // Strength Levels
    --csd-password-strength-weak-width: 25%;
    --csd-password-strength-weak-color: var(--csd-color-danger);
    --csd-password-strength-fair-width: 50%;
    --csd-password-strength-fair-color: var(--csd-color-warning);
    --csd-password-strength-good-width: 75%;
    --csd-password-strength-good-color: var(--csd-color-info);
    --csd-password-strength-strong-width: 100%;
    --csd-password-strength-strong-color: var(--csd-color-success);
    
    // Strength Text
    --csd-password-strength-text-margin: 4px;
    --csd-password-strength-text-size: 0.875rem;
    --csd-password-strength-text-color: var(--text-color-secondary);
    
    // Requirements
    --csd-password-requirements-margin: 8px;
    --csd-password-requirements-font-size: 0.875rem;
    --csd-password-requirement-gap: 8px;
    --csd-password-requirement-color: var(--text-color-secondary);
    --csd-password-requirement-margin-bottom: 4px;
    --csd-password-requirement-met-color: var(--csd-color-success);
}

.csd-password {
    position: relative;
    width: var(--csd-password-width);

    input {
        width: 100%;
        padding-right: var(--csd-password-padding-right);
    }

    .password-toggle,
    .csd-password-toggle {
        position: absolute;
        right: var(--csd-password-toggle-right);
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: var(--csd-password-toggle-color);
        font-size: var(--csd-password-toggle-font-size);
        transition: var(--csd-password-toggle-transition);

        &:hover {
            color: var(--csd-password-toggle-hover-color);
        }
    }

    &.disabled {
        .password-toggle,
        .csd-password-toggle {
            color: var(--csd-password-toggle-disabled-color);
            cursor: not-allowed;
        }
    }

    // Password strength indicator
    .password-strength {
        margin-top: var(--csd-password-strength-margin);

        .strength-bar {
            height: var(--csd-password-strength-bar-height);
            background-color: var(--csd-password-strength-bar-bg);
            border-radius: var(--csd-password-strength-bar-radius);
            overflow: hidden;

            .strength-fill {
                height: 100%;
                width: 0;
                transition: var(--csd-password-strength-transition);

                &.weak {
                    width: var(--csd-password-strength-weak-width);
                    background-color: var(--csd-password-strength-weak-color);
                }

                &.fair {
                    width: var(--csd-password-strength-fair-width);
                    background-color: var(--csd-password-strength-fair-color);
                }

                &.good {
                    width: var(--csd-password-strength-good-width);
                    background-color: var(--csd-password-strength-good-color);
                }

                &.strong {
                    width: var(--csd-password-strength-strong-width);
                    background-color: var(--csd-password-strength-strong-color);
                }
            }
        }

        .strength-text {
            margin-top: var(--csd-password-strength-text-margin);
            font-size: var(--csd-password-strength-text-size);
            color: var(--csd-password-strength-text-color);

            &.weak {
                color: var(--csd-password-strength-weak-color);
            }

            &.fair {
                color: var(--csd-password-strength-fair-color);
            }

            &.good {
                color: var(--csd-password-strength-good-color);
            }

            &.strong {
                color: var(--csd-password-strength-strong-color);
            }
        }
    }

    // Requirements list
    .password-requirements {
        margin-top: var(--csd-password-requirements-margin);
        font-size: var(--csd-password-requirements-font-size);

        .requirement {
            display: flex;
            align-items: center;
            gap: var(--csd-password-requirement-gap);
            color: var(--csd-password-requirement-color);
            margin-bottom: var(--csd-password-requirement-margin-bottom);

            &.met {
                color: var(--csd-password-requirement-met-color);
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}