Search Bar Expand Input

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="search-expand">
  <svg class="search-expand__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="11" cy="11" r="7"/>
    <path d="M21 21l-4.3-4.3" stroke-linecap="round"/>
  </svg>
  <input type="text" class="search-expand__field" placeholder="Search anything..." />
</div>

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

.search-expand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 180px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #1b1b22;
  border: 1px solid #303038;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.search-expand:focus-within {
  width: 280px;
  border-color: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15);
}
.search-expand__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #8a8a94;
  transition: color 0.3s ease, transform 0.3s ease;
}
.search-expand:focus-within .search-expand__icon {
  color: #34d399;
  transform: rotate(-8deg) scale(1.1);
}
.search-expand__field {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #f1f1f1;
  font-family: system-ui, sans-serif;
  font-size: 14px;
}
.search-expand__field::placeholder {
  color: #6b6b76;
}