.pwd-field {
  --pwd-toggle-button-size: 1.5rem;
  --pwd-toggle-icon-size: 1rem;
  --pwd-toggle-manager-space: 0.1rem;
  --pwd-toggle-manager-gap: 0.5rem;
  --pwd-toggle-button-offset: calc(var(--pwd-toggle-manager-space) + var(--pwd-toggle-manager-gap));

  position: relative;
  display: block;
  width: 100%;
}

.pwd-field,
.pwd-field * {
  box-sizing: border-box;
}

/* The toggle is positioned against the wrapper's right edge, so the input must fill
   the wrapper. The child selector outranks page rules that size the field with their
   own specificity (e.g. input.input-box-330 { width: 96% }), which would otherwise
   leave the input narrower than the wrapper and push the toggle outside the box. */
.pwd-field > input.pwd-field__input {
  width: 100%;
}

.pwd-field__toggle {
  position: absolute;
  top: 50%;
  right: var(--pwd-toggle-button-offset);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pwd-toggle-button-size);
  height: var(--pwd-toggle-button-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #333;
  cursor: pointer;
  opacity: 0.72;
  transform: translateY(-50%);
  transition: background-color 150ms ease, opacity 150ms ease;
}

.pwd-field__toggle:hover {
  background-color: rgba(50, 107, 250, 0.08);
  opacity: 1;
}

.pwd-field__toggle:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.2);
  opacity: 1;
}

.pwd-field__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pwd-field__icon {
  display: block;
  width: var(--pwd-toggle-icon-size);
  height: var(--pwd-toggle-icon-size);
  pointer-events: none;
}

.pwd-field__icon--slash {
  display: none;
}

.pwd-field[data-visible="true"] .pwd-field__icon--eye {
  display: none;
}

.pwd-field[data-visible="true"] .pwd-field__icon--slash {
  display: block;
}

.pwd-field__icon-wrap.is-spinning {
  animation: pwd-toggle-spin 350ms ease-in-out;
}

@keyframes pwd-toggle-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwd-field__toggle {
    transition: none;
  }

  .pwd-field__icon-wrap.is-spinning {
    animation: none;
  }
}

input[type="password"]:not(.pwd-toggle)::-ms-reveal {
  display: none;
}