Extending search field

search.scss

              input[type=text] {
                background: #fff image_url('comunit/base/icons/search.svg') no-repeat center right / 2.4rem 2.4rem;
                border-radius: 1.4rem;
                box-sizing: border-box;
                box-shadow: 0 0 .5rem .5rem rgba(255, 255, 255, .5);
                display: inline-block;
                font-size: $normal_font_size;
                height: 2.8rem;
                line-height: 2.4rem;
                margin: 0 .4rem;
                opacity: .85;
                transition: .125s;
                width: 2.8rem;

                &:hover {
                  opacity: 1;
                }

                &:focus, &:valid {
                  border-radius: 0;
                  box-shadow: none;
                  opacity: 1;
                  padding: 0 2.6rem 0 0;
                  width: calc(25ch + 2.6rem);
                }
              }