.password-input { position: relative; width: 100%; }
.password-input > input { padding-right: 48px; }
.password-input-toggle { position: absolute; top: 0; right: 6px; bottom: 0; display: grid; width: 36px; height: 36px; place-items: center; margin-block: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #586a78; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.password-input-toggle:hover { background: rgba(18, 57, 87, .07); color: var(--school-blue-deep); }
.password-input-toggle:focus-visible { outline: 2px solid var(--school-blue); outline-offset: 1px; }
.password-input-toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity .18s ease, transform .18s ease; }
.password-input-toggle [data-password-icon='visible'] { opacity: 0; transform: scale(.72); }
.password-input-toggle [data-password-icon='hidden'] { opacity: 1; transform: scale(1); }
.password-input-toggle[aria-pressed='true'] [data-password-icon='visible'] { opacity: 1; transform: scale(1); }
.password-input-toggle[aria-pressed='true'] [data-password-icon='hidden'] { opacity: 0; transform: scale(.72); }
.password-input-toggle[aria-pressed='true'] { color: var(--school-blue-deep); }
.login-page .password-input-toggle { right: 5px; width: 38px; height: 38px; }
@media (prefers-reduced-motion: reduce) {
    .password-input-toggle svg { transition: none; }
}