@property --rotate{syntax:"<angle>";initial-value:132deg;inherits:false}:root{--card-height:50px;--card-width:100%;--glow-color-1:#5ddcff;--glow-color-2:#3c67e3;--glow-color-3:#4e00c2}.search-bar-glow-container{padding:2px;position:relative;border-radius:18px;display:flex;width:var(--card-width)}.search-bar-glow-container.focused:before{width:101%;height:105%;border-radius:15px;z-index:-1;top:-1%;left:-.5%;animation:spin 11s ease-in-out infinite}.search-bar-glow-container.focused:after,.search-bar-glow-container.focused:before{content:"";background-image:linear-gradient(var(--rotate),var(--glow-color-1),var(--glow-color-2),var(--glow-color-3));position:absolute}.search-bar-glow-container.focused:after{top:0;left:0;right:0;bottom:0;z-index:-2;height:100%;width:100%;margin:0 auto;transform:scale(.95);filter:blur(15px);opacity:.7;transition:opacity .5s;animation:spin 10s ease-in-out infinite}@keyframes spin{0%{--rotate:0deg}to{--rotate:360deg}}