<div class="search">
    <svg class="search__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg>
    <input class="search__input input" type="search" placeholder="Search">
</div>

@use "../input";

.search {
  @extend .input;
  border-radius: 3em;
  padding: 0;
  display: inline grid;
  grid: auto / auto auto;
  align-items: center;
  justify-content: end;

  &__icon {
    color: var(--color-gray-400);
    margin-left: 1em;

  }

  &:focus-within &__icon {
    color: inherit;
  }

  &__input {
    padding-left: .5em;
    border: 0;
  }
}