.password-input-shell {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

.password-input-shell-block {
  display: block;
  width: 100%;
}

.password-input-shell-block > input {
  width: 100%;
}

.password-input-shell > input {
  padding-right: 3rem !important;
}

.password-visibility-toggle {
  position: absolute;
  top: 50%;
  right: .42rem;
  z-index: 2;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: .38rem;
  border: 1px solid rgba(86, 36, 42, .2);
  border-radius: .45rem;
  color: var(--link-fg, #7b1f42);
  background: rgba(255, 255, 255, .92);
  cursor: pointer;
}

.password-visibility-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible {
  border-color: currentColor;
  outline: 2px solid rgba(157, 36, 73, .18);
  outline-offset: 1px;
}

.login-card .password-visibility-toggle {
  color: #fff;
  background: #9d2449;
  border-color: #9d2449;
  box-shadow: 0 3px 9px rgba(86, 36, 42, .22);
}

.login-card .password-visibility-toggle:hover,
.login-card .password-visibility-toggle:focus-visible {
  color: #fff;
  background: #56242a;
  border-color: #56242a;
}

@media (prefers-color-scheme: dark) {
  .password-visibility-toggle {
    background: rgba(30, 30, 30, .94);
  }

  .login-card .password-visibility-toggle {
    color: #fff;
    background: #9d2449;
    border-color: #d95a7f;
  }
}