.wrapper
  form
    h1 Material Inputs
    h5 Inspired by Google's Material Design guidelines for text fields
    .btn-box
      a.btn.btn-link(href="https://material.google.com/components/text-fields.html" target="_blank") Design Docs
    hr.sep
    .group
      input(type="text" required)
      span.highlight
      span.bar
      label Name
    .group
      input(type="text" required)
      span.highlight
      span.bar
      label Email
    .group
      input(type="password" required)
      span.highlight
      span.bar
      label Password
    .group
      input(type="number" required)
      span.highlight
      span.bar
      label Number
    .group
      textarea(type="textarea" rows="5" required)
      span.highlight
      span.bar
      label Message
    .btn-box
      button.btn.btn-submit(type="submit") submit
      button.btn.btn-cancel(type="button") cancel
      h5 *these buttons do nothing 
        span.emoji 😉

// VARIABLES // ============================== //
$bg-color: #424242;
$hl-color: #2196F3;
$muted-color: mix(white, $bg-color, 70%);
$trans-time: 300ms;
$width: 320px;

*,
:before,
:after {
  box-sizing: border-box;
}

body {
  background: $bg-color;
}

// FORM // ============================== //
form {
  width: $width;
  margin: 45px auto;
  
  h1 {
    font-size: 3em;
    font-weight: 300;
    text-align: center;
    color: $hl-color;
  }
  h5 {
    text-align: center;
    text-transform: uppercase;
    color: $muted-color;
  }
  hr.sep {
    background: $hl-color;
    box-shadow: none;
    border: none;
    height: 2px;
    width: 25%;
    margin: 0px auto 45px auto;
  }
  .emoji {
    font-size: 1.2em;
  }
}

.group {
  position: relative;
  margin: 45px 0;
}

// INPUTS // ============================== //
textarea {
  resize: none;
}

input,
textarea {
  background: none;
  color: $muted-color;
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: $width;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid $muted-color;
  &:focus {
    outline: none;
  }
  &:focus ~ label,
  &:valid ~ label {
    top: -14px;
    font-size: 12px;
    color: $hl-color;
  }
  &:focus ~ .bar:before {
    width: $width;
  }
}

input[type="password"] {
  letter-spacing: 0.3em;
}

label {
  color: $muted-color;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: $trans-time ease all;
}

.bar {
  position: relative;
  display: block;
  width: $width;
  &:before {
    content: '';
    height: 2px;
    width: 0;
    bottom: 0px;
    position: absolute;
    background: $hl-color;
    transition: $trans-time ease all;
    left: 0%;
  }
}

// BUTTONS // ============================== //
.btn {
  background: #fff;
  color: mix(black, $muted-color, 25%);
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  &:hover {
    color: mix(black, $muted-color, 30%);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
  }
  &.btn-link {
    background: $hl-color;
    color: mix(white, $hl-color, 80%);
    &:hover {
      background: darken($hl-color, 5%);
      color: mix(white, $hl-color, 85%);
    }
  }
  &.btn-submit {
    background: $hl-color;
    color: mix(white, $hl-color, 70%);
    &:hover {
      background: darken($hl-color, 5%);
      color: mix(white, $hl-color, 85%);
    }
  }
  &.btn-cancel {
    background: #eee;
    &:hover {
      background: darken(#eee, 5%);
      color: mix(black, $muted-color, 30%);
    }
  }
}

.btn-box {
  text-align: center;
  margin: 50px 0;
}

//not today!


//...maybe tomorrow? :)