.search-input{display:flex;width:auto}.search-input--full{width:100%}.search-input__wrapper{position:relative;display:flex;align-items:center;width:100%;border-radius:var(--radius-full, 9999px);overflow:hidden;transition:box-shadow var(--transition-base, .2s) ease,border-color var(--transition-base, .2s) ease}.search-input__field{flex:1;min-width:0;padding:.75rem 3rem .75rem 1.25rem;border:none;background:transparent;font-size:.9375rem;font-family:inherit;color:var(--color-text, #333333);outline:none}.search-input__field::placeholder{color:var(--color-text-muted, #94a3b8)}.search-input__field::-webkit-search-cancel-button,.search-input__field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.search-input__icon-button{position:absolute;right:.75rem;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;background:transparent;color:var(--color-text-muted, #94a3b8);cursor:pointer;transition:color var(--transition-fast, .15s) ease}.search-input__icon-button:hover{color:var(--color-primary, #2ac864)}.search-input__wrapper:focus-within .search-input__icon-button{color:var(--color-primary, #2ac864)}.search-input--with-button .search-input__field{padding-right:1.25rem}.search-input__button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;background:var(--search-button-bg, var(--color-primary, #2ac864));color:var(--search-button-color, #ffffff);font-size:.9375rem;font-weight:500;font-family:inherit;white-space:nowrap;cursor:pointer;transition:background-color var(--transition-fast, .15s) ease}.search-input__button:hover{background:var(--search-button-hover-bg, var(--color-primary-dark, #22a857))}.search-input__button .icon{flex-shrink:0}.search-input--default .search-input__wrapper{background:var(--color-background, #ffffff);border:1px solid var(--color-border, #e5e7eb)}.search-input--default .search-input__wrapper:hover{border-color:var(--color-border-hover, #cbd5e1)}.search-input--default .search-input__wrapper:focus-within{border-color:var(--color-primary, #2ac864);box-shadow:0 0 0 3px #2ac86426}.search-input--inverted .search-input__wrapper{background:#fff;border:none;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.search-input--inverted .search-input__wrapper:focus-within{box-shadow:0 20px 25px -5px #00000026,0 8px 10px -6px #00000026}.search-input--inverted .search-input__field{color:#0f172a}.search-input--inverted .search-input__icon-button{color:#64748b}.search-input--inverted .search-input__icon-button:hover,.search-input--inverted .search-input__wrapper:focus-within .search-input__icon-button{color:var(--color-primary, #2ac864)}.search-input--sm .search-input__field{padding:.5rem 2.5rem .5rem 1rem;font-size:.875rem}.search-input--sm .search-input__icon-button{right:.5rem;width:1.75rem;height:1.75rem}.search-input--sm .search-input__icon-button .icon{width:16px;height:16px}.search-input--sm.search-input--with-button .search-input__field{padding-right:1rem}.search-input--sm .search-input__button{padding:.5rem 1rem;font-size:.8125rem}.search-input--sm .search-input__button .icon{width:16px;height:16px}.search-input--lg .search-input__field{padding:1.125rem 3.5rem 1.125rem 1.5rem;font-size:1rem}.search-input--lg .search-input__icon-button{right:1rem;width:2.25rem;height:2.25rem}.search-input--lg.search-input--with-button .search-input__field{padding-right:1.5rem}.search-input--lg .search-input__button{padding:1.125rem 2rem;font-size:1rem}@media(max-width:767px){.search-input--lg.search-input--with-button .search-input__wrapper{flex-direction:column;border-radius:var(--radius-lg, .75rem)}.search-input--lg.search-input--with-button .search-input__field{width:100%;padding:1rem 1.25rem;border-bottom:1px solid rgba(226,232,240,.6)}.search-input--lg.search-input--with-button .search-input__button{width:100%;justify-content:center;border-radius:0;padding:1rem 1.5rem}.search-input--default .search-input__field,.search-input--sm .search-input__field{font-size:.875rem}}
/*# sourceMappingURL=/cdn/shop/t/22/assets/component-search-input.css.map */