// 密码强度
.input-password-strength {
  display: flex;
  gap: 4px;
}

.input-password-strength-item {
  flex: 1;
  text-align: center;
}
.input-password-strength-text {
  font-size: 9px;
  display: none;
  // visibility: hidden;
}
.input-password-strength-progress {
  background-color: var(--app-background-color);
  height: 4px;
  border-radius: 4px;
}

// 文本显隐
// .input-password-strength.level1 {
//   .input-password-strength-item.level1 {
//     .input-password-strength-text {
//       visibility: visible;
//     }
//   }
// }
// .input-password-strength.level2 {
//   .input-password-strength-item.level2 {
//     .input-password-strength-text {
//       visibility: visible;
//     }
//   }
// }
// .input-password-strength.level3 {
//   .input-password-strength-item.level3 {
//     .input-password-strength-text {
//       visibility: visible;
//     }
//   }
// }

// 颜色阶梯
.input-password-strength.level1 {
  .input-password-strength-item.level1 {
    .input-password-strength-text {
      color: var(--danger);
    }
    .input-password-strength-progress {
      background-color: var(--danger);
    }
  }
}

.input-password-strength.level2 {
  .input-password-strength-item.level1,
  .input-password-strength-item.level2 {
    .input-password-strength-text {
      color: var(--warning);
    }
    .input-password-strength-progress {
      background-color: var(--warning);
    }
  }
}
.input-password-strength.level3 {
  .input-password-strength-item.level1,
  .input-password-strength-item.level2,
  .input-password-strength-item.level3 {
    .input-password-strength-text {
      color: var(--success);
    }
    .input-password-strength-progress {
      background-color: var(--success);
    }
  }
}
