.password-field > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.password-field > * + * {
  margin-block-start: 0.5rem;
}
.password-field__control {
  position: relative;
}
.password-field__control .form-control {
  padding-inline-end: 3rem;
}
.password-field__toggle {
  inset-block-start: 50%;
  inset-inline-end: 0.25rem;
  position: absolute;
  translate: 0 -50%;
}
.password-field__toggle[aria-pressed=true] {
  color: var(--spruce-base-color-primary);
}
.password-field__strength {
  color: var(--spruce-base-color-muted);
  font-size: var(--spruce-font-size-sm);
}
.password-field__rules {
  font-size: var(--spruce-font-size-sm);
  list-style: none;
  padding: 0;
}
.password-field__rules > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.password-field__rules > * + * {
  margin-block-start: 0.25rem;
}
.password-field__rules li {
  align-items: center;
  color: var(--spruce-base-color-muted);
  display: flex;
  gap: 0.5rem;
}
.password-field__rules li::before {
  block-size: 0.75rem;
  border: 2px solid currentcolor;
  border-radius: 50%;
  content: "";
  flex-shrink: 0;
  inline-size: 0.75rem;
}
.password-field__rules li.is-valid {
  color: var(--spruce-alert-color-success);
}
.password-field__rules li.is-valid::before {
  background-color: currentcolor;
}