Search Expand

<!-- Search Expand -->
<label class="nuda-search-x">
  <svg class="nuda-search-x__icon" viewBox="0 0 24 24"
       fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
    <circle cx="11" cy="11" r="7" />
    <path d="M21 21 L16 16" />
  </svg>
  <input class="nuda-search-x__input" type="search" placeholder="Search…" />
</label>

/* Search Expand
   Compact icon button that expands into a full search input on hover/focus.
   Customize: --searchx-accent, collapsed/expanded widths */

.nuda-search-x {
  --searchx-accent: #e4ff54;
  --searchx-collapsed: 40px;
  --searchx-expanded: 220px;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  width: var(--searchx-collapsed);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  transition:
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s,
    background 0.25s;
}

.nuda-search-x:hover,
.nuda-search-x:focus-within {
  width: var(--searchx-expanded);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--searchx-accent);
}

.nuda-search-x__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 10px;
  color: #a1a1aa;
  transition: color 0.25s;
}

.nuda-search-x:focus-within .nuda-search-x__icon { color: var(--searchx-accent); }

.nuda-search-x__input {
  width: 0;
  border: none;
  background: transparent;
  color: #fafafa;
  font: 500 0.875rem ui-sans-serif, system-ui, sans-serif;
  outline: none;
  padding: 0;
  transition:
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.25s;
}

.nuda-search-x:hover .nuda-search-x__input,
.nuda-search-x:focus-within .nuda-search-x__input {
  width: calc(var(--searchx-expanded) - 50px);
  padding: 0 14px 0 0;
}