.password-input-wrp {
  position: relative;
  direction: inherit;
}

/*
 * The password text follows the page direction while the reveal control stays
 * on the opposite edge: left in RTL and right in LTR.
 */
.password-input-wrp .fi-input {
  direction: inherit !important;
  text-align: start !important;
  padding-inline-end: 2.5rem !important;
}

html[dir='rtl'] .password-input-wrp .fi-input {
  direction: rtl !important;
  text-align: right !important;
}

html[dir='ltr'] .password-input-wrp .fi-input {
  direction: ltr !important;
  text-align: left !important;
}

.password-visibility-toggle {
  position: absolute;
  inset-inline-end: .45rem;
  inset-block-start: 50%;
  z-index: 2;
  display: inline-flex;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: .375rem;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  opacity: .68;
  transform: translateY(-50%);
}

.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
  opacity: 1;
  outline: none;
}

.password-visibility-toggle svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.password-visibility-toggle .password-eye-off {
  display: none;
}

.password-visibility-toggle[aria-pressed='true'] .password-eye {
  display: none;
}

.password-visibility-toggle[aria-pressed='true'] .password-eye-off {
  display: block;
}