Currency Amount Input

<!--
  Author: @yara_h
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="amount-input">
  <span class="amount-input__symbol">$</span>
  <input type="text" inputmode="decimal" class="amount-input__field" placeholder="0.00" />
</div>

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

.amount-input {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 200px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #1a1508;
  border: 2px solid #4a3a12;
  transition: border-color 1.2s linear;
  background-size: 200% 200%;
}
.amount-input:focus-within {
  animation: amount-cycle 3s linear infinite;
}
.amount-input__symbol {
  font-family: system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fbbf24;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.amount-input:focus-within .amount-input__symbol {
  transform: scale(1.25);
}
.amount-input__field {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #fef3c7;
  font-size: 20px;
  font-weight: 600;
  font-family: system-ui, sans-serif;
}
.amount-input__field::placeholder {
  color: #6b5a2a;
}
@keyframes amount-cycle {
  0% { border-color: #fbbf24; }
  33% { border-color: #f97316; }
  66% { border-color: #ef4444; }
  100% { border-color: #fbbf24; }
}