.searchbar{max-width:343px;padding:0 8px;position:relative}.sb-icon-container,.searchbar{align-items:center;display:flex}.sb-icon-container{background-color:transparent;cursor:pointer;height:56px;justify-content:center;transition:background-color .2s ease;width:56px}.sb-icon{color:var(--charcoal-black-75);font-size:16px}.sb-bar-container{overflow:hidden;position:absolute;right:56px;transition:width .5s ease,background-color .5s ease;white-space:nowrap;width:0}.sb-bar-container,.sb-input{background-color:transparent}.sb-input{border:none;color:var(--charcoal-black);height:56px;outline:none;padding:0 10px;width:100%}.sb-input::placeholder{color:var(--charcoal-black-50)}.searchbar.sb-expanded .sb-bar-container{position:relative;right:auto;width:295px}.searchbar.sb-expanded .sb-icon-container,.searchbar.sb-expanded .sb-input{background-color:var(--midnight-blue-5)}.searchbar.sb-expanded .sb-icon{color:var(--charcoal-black-50)}@keyframes bounce{0%,to{transform:translateX(0)}50%{transform:translateX(2px)}}.bouncing .sb-icon{animation:bounce .1s ease infinite}@keyframes slide-expand{0%{width:0}to{width:100%}}@keyframes elastic{0%{width:100%}50%{width:105%}to{width:100%}}.sliding{animation:slide-expand .3s ease forwards}.elastic{animation:elastic .3s ease forwards}.sb-icon.fa-arrow-right.arrow-active{color:var(--charcoal-black)}