Animated Expanding Search Form

$animated-search-form-initial-width: 10rem;
$animated-search-form-transition-duration: 0.4s;

.animated-search-form[type=search] {
  width: $animated-search-form-initial-width;
  border: 0.125rem solid $light-gray;
  box-shadow: 0 0 3.125rem rgba(0,0,0, 0.18);
  border-radius: $global-radius;
  background-image: url('https://image.ibb.co/i7NbrQ/search_icon_15.png');
  background-position: 0.625rem 0.625rem;
  background-repeat: no-repeat;
  padding: 0.75rem 1.25rem 0.75rem 2rem;
  transition: width $animated-search-form-transition-duration ease-in-out;

  &:focus {
    width: 100%;
  }
}