.searchbar{display:flex;align-items:center;justify-content:center;position:relative;height:3.5rem;padding:1rem 1.5rem;background-color:#fff;border-radius:9999px;box-shadow:0 1px 3px rgba(36,36,36,.2),0 3px 6px rgba(36,36,36,.2);border:1px solid rgba(0,0,0,0);transition:border-color .15s ease;cursor:text}.searchbar:focus-within{border-color:#47abf8;justify-content:flex-start;padding:1rem}.searchbar:focus-within .searchbar__label{display:none}.searchbar:focus-within .searchbar__input{position:static;flex:1;opacity:1;padding-left:.5rem}.searchbar:focus-within .searchbar__close{display:flex}.searchbar--mobile .searchbar__back{display:flex}.searchbar--mobile:not(:focus-within) .searchbar__back{position:absolute;left:1rem;top:50%;transform:translateY(-50%);z-index:1}.searchbar__back{display:none;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit}.searchbar__label{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.875rem;line-height:normal;pointer-events:none}.searchbar input.searchbar__input{position:absolute;inset:0;border:none;background:none;outline:none;border-radius:inherit;padding:0;margin:0;opacity:0;font-weight:400;font-size:.875rem;line-height:normal;color:#242424}.searchbar input.searchbar__input:focus{border:none}.searchbar input.searchbar__input::-webkit-search-cancel-button,.searchbar input.searchbar__input::-webkit-search-decoration{appearance:none}.searchbar input.searchbar__input::placeholder{color:#a8a7a3}.searchbar__close{display:none;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit}