.password-strength {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.password-strength__bar-track {
  flex: 1;
  height: 6px;
  background-color: var(--color-gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.password-strength__bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background-color: var(--color-gray-300);
  transition: width 0.4s ease, background-color 0.4s ease;
}

.password-strength__check {
  display: none;
  color: var(--color-green-600);
  font-size: 0.875rem;
  line-height: 1;
}

.password-strength__message {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-gray-500);
  min-height: 1.125rem;
  transition: opacity 0.3s ease;
}

/* Strength levels */
.password-strength[data-strength="1"] .password-strength__bar-fill {
  width: 20%;
  background-color: var(--color-red-600);
}

.password-strength[data-strength="2"] .password-strength__bar-fill {
  width: 40%;
  background-color: var(--color-orange-500);
}

.password-strength[data-strength="3"] .password-strength__bar-fill {
  width: 60%;
  background-color: var(--color-orange-500);
}

.password-strength[data-strength="4"] .password-strength__bar-fill {
  width: 80%;
  background-color: var(--color-green-500);
}

.password-strength[data-strength="5"] .password-strength__bar-fill {
  width: 100%;
  background-color: var(--color-green-600);
}

.password-strength[data-strength="5"] .password-strength__check {
  display: block;
}

.password-strength[data-strength="5"] + .password-strength__message:not(.password-strength__message--error) {
  opacity: 0;
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, min-height 0.3s ease;
}

/* Server error state */
.password-strength__message--error {
  color: var(--color-error, var(--color-red-600));
  font-weight: 600;
}