$_search-icon-size: 1rem;

.search {
  margin-left: auto;
  margin-right: 2rem;
  max-width: 20rem;
  position: relative;
  width: 100%;
}

.search__input {
  border-radius: 100rem;
  padding-left: $_search-icon-size * 2.5;
  padding-right: $_search-icon-size * 2.5;
}

.search__eyeglass-icon {
  fill: $grey-7;
  height: $_search-icon-size;
  left: $_search-icon-size;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: $_search-icon-size;
}

.search__clear-link {
  height: $_search-icon-size;
  position: absolute;
  right: $_search-icon-size * 0.75;
  top: 50%;
  transform: translateY(-50%);
  width: $_search-icon-size;
}

.search__clear-icon {
  fill: $grey-5;
  height: $_search-icon-size;
  position: absolute;
  transition: fill $base-duration $base-timing;
  width: $_search-icon-size;

  &:hover {
    fill: $action-color;
  }
}