voice-search{display:none}voice-search.\!supported{display:inline-flex;align-items:center;justify-content:center}voice-search .voice-search-button{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;margin:0;border:none;border-radius:50%;background:transparent;color:currentColor;cursor:pointer;transition:all .2s ease;position:relative}voice-search .voice-search-button:hover{background:rgba(var(--color-accent-rgb, 62, 175, 225),.1);color:rgb(var(--color-accent-rgb, 62, 175, 225))}voice-search .voice-search-button:focus{outline:2px solid rgb(var(--color-accent-rgb, 62, 175, 225));outline-offset:2px}voice-search .voice-search-button:active{transform:scale(.95)}voice-search .voice-search-icon{width:1.25rem;height:1.25rem;transition:opacity .2s ease}voice-search .voice-search-icon svg{width:100%;height:100%}voice-search .voice-search-icon-listening{display:none;position:relative}voice-search.\!listening .voice-search-icon-listening{display:flex}voice-search.\!listening .voice-search-button{background:rgb(var(--color-accent-rgb, 62, 175, 225));color:#fff}voice-search.\!listening .voice-search-button:before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:rgb(var(--color-accent-rgb, 62, 175, 225));transform:translate(-50%,-50%);animation:voice-pulse 1.5s ease-out infinite;z-index:-1}@keyframes voice-pulse{0%{opacity:.6;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}voice-search .voice-search-waves{display:flex;align-items:center;justify-content:center;gap:3px;height:1.25rem}voice-search .voice-search-wave{width:3px;height:100%;background:currentColor;border-radius:3px;animation:voice-wave .8s ease-in-out infinite}voice-search .voice-search-wave:nth-child(1){animation-delay:0s}voice-search .voice-search-wave:nth-child(2){animation-delay:.1s}voice-search .voice-search-wave:nth-child(3){animation-delay:.2s}voice-search .voice-search-wave:nth-child(4){animation-delay:.3s}voice-search .voice-search-wave:nth-child(5){animation-delay:.4s}@keyframes voice-wave{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}voice-search.\!error .voice-search-button{background:rgb(var(--color-error-rgb, 220, 53, 69));color:#fff;animation:voice-shake .4s ease}@keyframes voice-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}voice-search .voice-search-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:.5rem .75rem;margin-bottom:.5rem;background:rgb(var(--color-foreground-rgb, 22, 51, 64));color:rgb(var(--color-background-rgb, 255, 255, 255));font-size:.75rem;white-space:nowrap;border-radius:4px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;pointer-events:none;z-index:10}voice-search .voice-search-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:rgb(var(--color-foreground-rgb, 22, 51, 64))}voice-search:hover .voice-search-tooltip,voice-search.\!listening .voice-search-tooltip{opacity:1;visibility:visible}.\#header-searchbar-form voice-search{position:absolute;right:2.8rem;top:50%;transform:translateY(-50%);z-index:4}.\#header-searchbar-form voice-search .voice-search-button{width:2rem;height:2rem}.\#predictive-search-input voice-search{position:absolute;right:2.5rem;top:50%;transform:translateY(-50%);z-index:4}.\#header-searchbar-form:has(voice-search.\!supported) .\#header-searchbar-input{padding-right:5rem}@media (max-width: 768px){voice-search .voice-search-button{width:2rem;height:2rem}voice-search .voice-search-icon{width:1rem;height:1rem}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-color-scheme: dark){voice-search .voice-search-tooltip{background:rgb(var(--color-background-rgb, 255, 255, 255));color:rgb(var(--color-foreground-rgb, 22, 51, 64))}voice-search .voice-search-tooltip:after{border-top-color:rgb(var(--color-background-rgb, 255, 255, 255))}}
/*# sourceMappingURL=/cdn/shop/t/54/assets/voice-search.css.map */