.search-icon{border-radius:4px;cursor:pointer;height:32px;position:relative;width:32px}.search-icon:hover{opacity:.8}.search-icon__line{background-color:var(--color-icon-search);border-radius:2px;display:inline-block;height:8px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(-30deg) translate(1px,3px);transform:rotate(-30deg) translate(1px,3px);transition:all .3s ease-in-out;width:3px;z-index:5}.search-icon__circle{border:3px solid var(--color-icon-search);border-radius:50%;height:15px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-55%,-70%);transform:translate(-55%,-70%);transition:all .3s ease-out 0s;width:15px}.is-active .search-icon__line{height:17px;transition:all .2s ease-out 0s;width:2px}.is-active .search-icon__line--first{-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.is-active .search-icon__line--second{-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.is-active .search-icon__circle{border:0;height:0;transition:all .5s ease-out 0s;width:0}