Expanding Search

1<script>
2  let open = true;
3</script>
4
5<div class="box" class:open>
6  <button on:click={() => (open = !open)} aria-label="Suche">
7    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
8  </button>
9  <input type="text" placeholder="Suchen …" />
10</div>
11
12<style>
13  .box{display:flex;align-items:center;border:1px solid rgba(255,255,255,.14);border-radius:26px;
14    background:rgba(255,255,255,.04);overflow:hidden;font-family:system-ui}
15  button{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:0;background:none;color:#a78bfa;cursor:pointer;flex-shrink:0}
16  button svg{width:19px;height:19px}
17  input{width:0;padding:0;border:0;background:none;color:#fff;font-size:15px;outline:none;transition:width .35s ease,padding .35s ease}
18  .box.open input{width:190px;padding-right:16px}
19  input::placeholder{color:rgba(255,255,255,.4)}
20</style>