/* Password strength meter -4 segmented bars + status label.
 * Paired with static/ui/js/auth/password-strength.js which sets
 * .is-weak / .is-good / (none) on .password-strength based on input.
 *
 *   <div class="password-strength" data-password-strength>
 *     <div class="password-strength-bars" aria-hidden="true">
 *       <span class="password-strength-bar"></span>
 *       <span class="password-strength-bar"></span>
 *       <span class="password-strength-bar"></span>
 *       <span class="password-strength-bar"></span>
 *     </div>
 *     <span class="password-strength-label" data-password-strength-label></span>
 *   </div>
 */

.password-strength {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.password-strength-bars {
  display: flex;
  gap: var(--space-1);
}

.password-strength-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--divider);
  transition: background var(--duration-base) var(--ease-standard);
}

.password-strength.is-weak .password-strength-bar:nth-child(1) {
  background: var(--error);
}

.password-strength.is-good .password-strength-bar {
  background: var(--success);
}

.password-strength-label {
  font-size: var(--font-size-micro);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-label);
  color: var(--muted);
}

.password-strength.is-weak .password-strength-label {
  color: var(--error);
}

.password-strength.is-good .password-strength-label {
  color: var(--success);
}