@layer components{.search{position:relative;width:min(100%,700px);& .search__glow{position:absolute;inset:-10px;background:linear-gradient(90deg,#3b82f6,#a855f7);filter:blur(25px);opacity:.2;border-radius:var(--radius-xl);z-index:0}& .search__box{position:relative;background:var(--color-surface);border-radius:2rem;display:flex;align-items:center;padding:.25rem .75rem .25rem 1.25rem;box-shadow:0 10px 25px -5px rgba(0,0,0,5%);border:1px solid var(--color-border);gap:.5rem;@media(max-width:640px){flex-direction: column; align-items: stretch; border-radius: 1rem; padding: 0.75rem;}}& .search__select-wrapper{display:flex;align-items:center;gap:.5rem;padding-right:.75rem;height:1.5rem;flex-shrink:0;@media(max-width:640px){border-right: none; border-bottom: 1px solid var(--color-border); height: auto; padding-right: 0; padding-bottom: 0.5rem; width: 100%;}& .search__select-icon{color:#94a3b8;display:flex;align-items:center}& .ts-wrapper{min-width:120px;& .ts-control{border:none;background:0 0;padding:0;box-shadow:none;font-size:.95rem;color:var(--color-text);display:flex;align-items:center;min-height:unset;& .item{color:var(--color-text)}}&.focus .ts-control{box-shadow:none}& .ts-dropdown{margin-top:.75rem}}}& .search__input{flex:1;border:none;background:0 0;font-size:1.1rem;color:var(--color-text);outline:none;padding-block:.5rem;@media(max-width:640px){width: 100%; padding-left: 0.5rem;}&::placeholder{color:#94a3b8}}& .search__icon{color:#94a3b8;display:flex;align-items:center;@media(max-width:640px){position: absolute; right: 1.5rem; bottom: 1.25rem;}}}}@keyframes search-pin-in{from{opacity:0;transform:translateX(-50%)translateY(-6px)}to{opacity:1;transform:translateX(-50%)translateY(0)}}.search-pinned .search{position:fixed;top:var(--space-s);left:50%;transform:translateX(-50%);width:min(calc(100% - 1rem),700px);z-index:99;animation:search-pin-in .18s ease;& .search__box{box-shadow:0 4px 20px -2px rgba(0,0,0,.15)}}@media(prefers-color-scheme:dark){.search{& .search__box{background:var(--color-surface);border-color:var(--color-border)}& .search__input{color:var(--color-text)}}}