.password-strength {
  margin: .75rem 0 .25rem;
  padding: .9rem 1rem;
  border: 1px solid #dfe8e7;
  border-radius: .85rem;
  background: linear-gradient(135deg, #f7faf9, #fff);
}

.password-strength__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
  color: #53666d;
  font-size: .72rem;
  line-height: 1.35;
}

.password-strength__heading > span {
  font-weight: 650;
}

.password-strength__heading > strong {
  color: #697a80;
  font-size: .68rem;
  font-weight: 700;
  text-align: end;
}

.password-strength.is-complete {
  border-color: #bcd9a2;
  background: linear-gradient(135deg, #f4fae9, #fff);
}

.password-strength.is-complete .password-strength__heading > strong {
  color: #426126;
}

.password-strength .password-meter {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .35rem;
}

.password-strength .password-meter > span {
  height: .3rem;
  border-radius: 99px;
  background: #e2e9e8;
  transition: background-color .2s ease, transform .2s ease;
}

.password-strength .password-meter > span.is-active {
  background: #17817d;
  transform: scaleY(1.12);
}

.password-strength.is-complete .password-meter > span.is-active {
  background: #78a92f;
}

.password-strength .password-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem .8rem;
  margin: .7rem 0 0;
  padding: 0;
  color: #7b8b90;
  font-size: .7rem;
  line-height: 1.4;
  list-style: none;
}

.password-strength .password-rules li {
  position: relative;
  padding-inline-start: 1.15rem;
}

.password-strength .password-rules li::before {
  content: "";
  position: absolute;
  top: .24rem;
  inset-inline-start: .05rem;
  width: .65rem;
  height: .65rem;
  border: 1px solid #aebbbd;
  border-radius: 50%;
}

.password-strength .password-rules li.is-valid {
  color: #426126;
  font-weight: 650;
}

.password-strength .password-rules li.is-valid::before {
  content: "\2713";
  display: grid;
  place-items: center;
  top: .05rem;
  width: .9rem;
  height: .9rem;
  border-color: #17817d;
  background: #17817d;
  color: #fff;
  font-size: .58rem;
  line-height: 1;
}

.password-match.is-valid {
  color: #426126 !important;
}

@media (max-width: 520px) {
  .password-strength__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .2rem;
  }

  .password-strength__heading > strong {
    text-align: start;
  }

  .password-strength .password-rules {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .password-strength .password-meter > span {
    transition: none;
  }
}