.search-bar{position:relative}.search-bar,.search-bar__input{width:100%;box-sizing:border-box}.search-bar__input{max-width:100%;color:#f8fafc;border-radius:16px;outline:none;transition:all .25s cubic-bezier(.25,.8,.25,1)}.search-bar__input::placeholder{color:#64748b}.search-bar--clearable .search-bar__input{padding-right:3.5rem}.search-bar__clear{position:absolute;right:1rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#f8fafc;font-size:1.25rem;line-height:1;cursor:pointer;transition:all .2s cubic-bezier(.25,.8,.25,1);display:flex;align-items:center;justify-content:center}.search-bar__clear:hover{background:rgba(255,255,255,.18);transform:translateY(-50%) scale(1.1)}.search-bar__clear:active{transform:translateY(-50%) scale(.95)}.search-bar--primary .search-bar__input{padding:1rem 1.75rem;font-size:1rem;border-radius:9999px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);box-shadow:0 4px 16px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.05)}.search-bar--primary .search-bar__input:focus{border-color:rgba(99,102,241,.6);background:rgba(255,255,255,.09);box-shadow:0 8px 28px rgba(0,0,0,.25),0 0 0 3px rgba(99,102,241,.15),inset 0 1px 0 rgba(255,255,255,.1)}.search-bar--secondary .search-bar__input{padding:.85rem 1.25rem;font-size:.95rem;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);box-shadow:none}.search-bar--secondary .search-bar__input:focus{border-color:rgba(148,163,184,.45);background:rgba(255,255,255,.05);box-shadow:0 0 0 2px rgba(148,163,184,.1)}.search-bar--secondary .search-bar__clear{background:rgba(255,255,255,.04);color:#cbd5e1}.search-bar--secondary .search-bar__clear:hover{background:rgba(255,255,255,.08)}@media (max-width:767px){.search-bar--primary .search-bar__input{padding:.9rem 1.25rem;font-size:.95rem}.search-bar--clearable .search-bar__input{padding-right:3rem}.search-bar__clear{width:1.8rem;height:1.8rem;font-size:1.1rem;right:1.1rem}}