hubl/src/scss/_search.scss

#search-bar{
  position: relative;
}

#search-icon{
  pointer-events: none;
}

#search-icon,
#close-search-icon{
  position: absolute;
  right: .4em;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
  display: block;
}
#search-input {
  -webkit-appearance: textfield;
  border-radius: 10em;
  padding: .2em .5em;
  border: 1px solid $col-main-fg;
  & ~ #close-search-icon{
    opacity: 0;
  }
  &:focus{
    & ~ #close-search-icon{
      opacity: 1;
    }
    & ~ #search-icon{
      visibility: hidden;
    }
  }
}