.centered
  .group
    input(type="text" id="name" required)
    label(for="name") Name
    .bar

$main-color: #F44336;
$secondary-color: white;
$main-color: #333;
$secondary-color: #2196f3;
$width: 550px; // Change Me

* {
  box-sizing: border-box;
}

body {background: $main-color;}

.centered {
  width: $width;
  height: $width/5;
  margin: auto;
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0; 
}

.group {
  width: 100%;
  height: $width/5;
  overflow: hidden;
  position: relative;
}

label {
  position: absolute;
  top: $width/15;
  color: rgba(white, .5);
  font: 400 $width/15 Roboto;
  cursor: text;
  transition: .25s ease;
}

input {
  display: block;
  width: 100%;
  padding-top: $width/15;
  border: none;
  border-radius: 0; // For iOS
  // border-bottom: solid $width/150 rgba(white, .5);
  color: white;
  background: $main-color;
  font-size: $width/15;
  transition: .3s ease;
  &:valid {
    // border-bottom-color: rgba(white, .5);
    ~label {
      top: 0;
      font: 700 $width/25 Roboto;
      color: rgba(white, .5);
    }
  }
  &:focus {
    outline: none;
    // border-bottom-color: $secondary-color;
    ~label {
      top: 0;
      font: 700 $width/25 Roboto;
      color: $secondary-color;
    }
    
      
    ~ .bar:before {
    transform: translateX(0);
    }
  }

  // Stop Chrome's hideous pale yellow background on auto-fill
  
  &:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px $main-color inset;
    -webkit-text-fill-color: white !important;
    // border-bottom-color: rgba(white, .5);
  }
}

.bar {
  // background: $secondary-color;
  background: rgba(white, .5);
  content: '';
  width: $width;
  // height: $width/100;
  height: $width/150;
  // transform: translateX(-100%);
  transition: .3s ease;
  // margin-top: -2px;
  //
  position: relative;
  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 150%;
    background: $secondary-color;
    transform: translateX(-100%);
    
  }
}

::selection {background: rgba($secondary-color, .3);}