$_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;
}

}