input:invalid
  box-shadow: none

.input
  position: relative
  z-index: 1
  display: inline-block
  margin: 1em
  max-width: 400px
  width: calc(100% - 2em)
  vertical-align: top

.input__field
  position: relative
  display: block
  float: right
  padding: 0.8em
  width: 60%
  border: none
  border-radius: 0
  background: #f0f0f0
  color: #aaa
  font-weight: bold
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
  -webkit-appearance: none
  /* for box shadows to show on iOS */
  &:focus
    outline: none

.input__label
  display: inline-block
  float: right
  padding: 0 1em
  width: 40%
  color: #6a7989
  font-weight: bold
  font-size: 70.25%
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

.input__label-content
  position: relative
  display: block
  padding: 1.6em 0
  width: 100%

.graphic
  position: absolute
  top: 0
  left: 0
  fill: none

.icon
  color: #ddd
  font-size: 150%
