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

.password-visibility-field > input {
  display: block;
  width: 100%;
  padding-right: 58px !important;
}

.password-visibility-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #8f3658;
  display: inline-grid;
  place-items: center;
  transform: translateY(-50%);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.password-visibility-toggle:hover {
  background: #ffe9f1;
}

.password-visibility-toggle:focus-visible {
  outline: 3px solid rgba(200, 91, 132, .3);
  outline-offset: 1px;
}

.password-eye-icon {
  position: relative;
  display: block;
  width: 21px;
  height: 21px;
}

.password-eye-icon::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 70% 15%;
  transform: rotate(45deg);
}

.password-eye-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.password-visibility-toggle[aria-pressed="true"] .password-eye-icon {
  opacity: .72;
}

@media (max-width: 820px) {
  .password-visibility-field > input {
    padding-right: 60px !important;
  }

  .password-visibility-toggle {
    right: 5px;
    width: 46px;
    height: 46px;
  }
}