$input_focus_color: #30426a !default
$input_bottom_border: 1px solid #ccc !default
$input_bottom_border_focus: 1px solid blue !default
$input_background_color: transparent !default
$label-color: #99a0a9 !default

.container
  position: relative
  display: block
  float: left
  width: 100%

  input.input_field
    border: none
    width: 100%
    height: 24px
    margin-bottom: 35px
    border-bottom: $input_bottom_border
    outline: none
    font-size: 16px
    resize: none
    background-color: $input_background_color
    & + label
      pointer-events: none
      text-decoration: none
      color: $label-color
      position: absolute
      pointer-events: none
      text-decoration: none
      color: $label-color

  & label.empty
    top: 0em
    left: 1em
    -webkit-transition-property: width height background-color font-size left top color
    -webkit-transition-duration: 0.25s
    -webkit-transition-timing-function: linear
    transition-property: width height background-color font-size left top color
    transition-duration: 0.25s
    transition-timing-function: linear

  & label.filled
    top: -1.2em
    left: -1em
    -webkit-transition-property: width height background-color font-size left top color
    -webkit-transition-duration: 0.25s
    -webkit-transition-timing-function: linear
    transition-property: width height background-color font-size left top color
    transition-duration: 0.25s
    transition-timing-function: linear
    font-size: 0.7em

  input.input_field:focus
    -webkit-transition-property: width height background-color font-size left top color
    -webkit-transition-duration: 0.25s
    -webkit-transition-timing-function: linear
    transition-property: width height background-color font-size left top color
    transition-duration: 0.25s
    transition-timing-function: linear
    border-bottom: $input_bottom_border_focus
    & + label
      top: -1.2em
      left: -1em
      -webkit-transition-property: width height background-color font-size left top color
      -webkit-transition-duration: 0.25s
      -webkit-transition-timing-function: linear
      transition-property: width height background-color font-size left top color
      transition-duration: 0.25s
      transition-timing-function: linear
      font-size: 0.7em

// input.input_field.ng-invalid
//     & + label
//       color: red !important