Live Validation Sweep

<!--
  Author: @yara_h
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="validate-pill">
  <span class="validate-pill__sweep"></span>
  <svg class="validate-pill__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
    <path d="M20 6L9 17l-5-5" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  <span>Username available</span>
</div>

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

.validate-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #0c1f14;
  border: 1px solid #16532c;
  color: #86efac;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  animation: validate-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.validate-pill__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.35), transparent);
  transform: translateX(-100%);
  animation: validate-sweep 0.9s ease-out;
}
.validate-pill__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
@keyframes validate-sweep {
  to { transform: translateX(100%); }
}
@keyframes validate-pop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}