$font-family: sans-serif;
$font-size: 1em;
$font-weight: 400;

$line-height: 1.5em;

$color: #282828;
$color-bg: #d8d6d8;
$color-border: #dfdfdf;

$color-placeholder: #b2b2b2;

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background-color: $color-bg;
  color: $color;
  font: $font-weight #{$font-size}/#{$line-height} $font-family;
  margin: 0;
}

.container {
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

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