Password Strength Reveal Input

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="pw-input">
  <div class="pw-input__row">
    <input type="password" class="pw-input__field" placeholder="Create a password" />
    <button type="button" class="pw-input__toggle" aria-label="Toggle visibility">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/>
        <circle cx="12" cy="12" r="3"/>
      </svg>
    </button>
  </div>
  <div class="pw-input__meter">
    <span class="pw-input__meter-fill"></span>
  </div>
</div>

/*
 * Author: @yokkcode
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.pw-input {
  width: 260px;
  font-family: system-ui, sans-serif;
}
.pw-input__row {
  display: flex;
  align-items: center;
  background: #17171d;
  border: 1px solid #2e2e38;
  border-radius: 10px;
  padding: 4px 10px 4px 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.pw-input__row:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15);
}
.pw-input__field {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #f1f1f1;
  font-size: 15px;
  padding: 10px 0;
}
.pw-input__toggle {
  border: none;
  background: transparent;
  color: #8a8a94;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}
.pw-input__toggle:hover {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}
.pw-input__toggle svg {
  width: 18px;
  height: 18px;
}
.pw-input__meter {
  height: 4px;
  border-radius: 999px;
  background: #24242c;
  margin-top: 8px;
  overflow: hidden;
}
.pw-input__meter-fill {
  display: block;
  height: 100%;
  width: 35%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f87171, #fb923c);
  transition: width 0.4s ease, background 0.4s ease;
}
.pw-input__row:focus-within ~ .pw-input__meter .pw-input__meter-fill {
  width: 70%;
  background: linear-gradient(90deg, #fb923c, #34d399);
}