.password-toggle-wrap {
    position: relative;
    width: 100%;
}

.password-toggle-wrap .password-toggle-input {
    padding-inline-end: 3.25rem !important;
}

.password-toggle-button {
    position: absolute;
    z-index: 3;
    top: 50%;
    inset-inline-end: .45rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: .65rem;
    display: inline-grid;
    place-items: center;
    transform: translateY(-50%);
    background: transparent;
    color: #64748b;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.password-toggle-button:hover {
    background: rgba(79, 70, 229, .1);
    color: #4f46e5;
}

.password-toggle-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .2);
}

html[data-theme="dark"] .password-toggle-button,
body.dark-mode .password-toggle-button,
body[data-theme="dark"] .password-toggle-button {
    color: #a7b3c8;
}

html[data-theme="dark"] .password-toggle-button:hover,
body.dark-mode .password-toggle-button:hover,
body[data-theme="dark"] .password-toggle-button:hover {
    background: rgba(129, 140, 248, .14);
    color: #c7d2fe;
}

@media (prefers-reduced-motion: reduce) {
    .password-toggle-button {
        transition: none;
    }
}