Search Reveal

---
/**
 * SearchReveal — A dynamic minimal search pod that expands smoothly into a full input field on hover or focus.
 * 
 * @param {string} id - Standard HTML ID property.
 * @param {string} placeholder - Default placeholder ("Search...").
 * @param {string} name - Standard HTML name grouping.
 */
interface Props {
  id: string;
  placeholder?: string;
  name?: string;
}

const { id, placeholder = "Search...", name } = Astro.props;
---

<div class="search-box">
  <input type="search" {id} {name} {placeholder} class="search-input" aria-label="Search content" />
  <button type="button" aria-label="Submit search" class="search-btn">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="8"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
  </button>
</div>

<style>
  .search-box { position: relative; width: 44px; height: 44px; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
  .search-box:hover, .search-box:focus-within { width: 250px; }
  .search-input { 
    width: 100%; height: 100%; box-sizing: border-box;
    background: var(--c-bg-elev, #1e293b); 
    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
    border-radius: var(--r-full, 100px); 
    padding: 0 45px 0 20px; 
    color: var(--c-text-1, #fff); outline: none; opacity: 0; transition: 0.3s; 
  }
  .search-box:hover .search-input, .search-box:focus-within .search-input { opacity: 1; }
  .search-input::placeholder { color: var(--c-text-muted, #64748b); }
  
  .search-btn { 
    position: absolute; right: 0; top: 0;
    width: 44px; height: 44px; 
    background: var(--c-primary, #6366f1); border: none; 
    border-radius: 50%; color: #fff; cursor: pointer; 
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
  }
  .search-btn:hover { background: var(--c-primary-light, #818cf8); }
</style>