.password-field {
    position: relative;
    display: block;
    width: 100%;
}

.password-field__input {
    width: 100%;
    padding-right: 44px;
    box-sizing: border-box;
}

.password-field__toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm, 4px);
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    transition: color var(--transition-base, 0.15s ease), background var(--transition-base, 0.15s ease);
}

.password-field__toggle:hover {
    color: var(--text-primary, #111827);
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

.password-field__toggle:focus-visible {
    outline: 2px solid var(--accent, #3b82f6);
    outline-offset: 2px;
}

.password-field__toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

.password-field__toggle .password-field__icon--visible {
    display: none;
}

.password-field__toggle[aria-pressed="true"] .password-field__icon--hidden {
    display: none;
}

.password-field__toggle[aria-pressed="true"] .password-field__icon--visible {
    display: block;
}