.search {
  width: 24em;
  
  .field {
    position: relative;
  }
  
  label {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAQAAAC1QeVaAAAAxElEQVR4AXXPIUuDcRDA4Zv4AUSwTLEKVoNlySyCYLO98CCsahGrX0AW/QhmBRHEJghLS4JFBBXDgrJi2In78w8v4v3S8XDh4nd0DTxLEzd2RC2EnrH07trQVDrXqbhs7FvfnBDWDKWTigOpL2oWvZpYKPjio1zVHEt7BdOtaLUtHRX8MmqjRjooeCVttPBOWi+4JT1aLaDjVLpU/5ytn840Dj1IaWSpYmi8yVlTF54qh9K8nn27usJK5fC3yvfhPx7a/AE9dYwDEfKrlAAAAABJRU5ErkJggg==) no-repeat 0 50%;
    color: #b2b2b2;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    transition: left .4s, transform .4s;
    padding-left: 1.25em;
  }
  
  .input-search {
    border: 1px solid #dfdfdf;
    border-radius: .25em;
    box-shadow: 0 1px 0 #bfbebf;
    display: block;
    font: 400;
    padding: .5em 1.75em;
    width: 100%;
    &:focus,
    &:valid {
      &+ label {
        left: .5em;
        transform: translate(0, -50%);
      }
    }
   
  }
}