/* Madoka */

.input--madoka
  margin: 1.1em

.input__field--madoka
  width: 100%
  background: transparent
  color: #7A7593

.input__label--madoka
  position: absolute
  width: 100%
  height: 100%
  color: #7A7593
  text-align: left
  cursor: text

.input__label-content--madoka
  -webkit-transform-origin: 0% 50%
  transform-origin: 0% 50%
  -webkit-transition: -webkit-transform 0.3s
  transition: transform 0.3s

.graphic--madoka
  -webkit-transform: scale3d(1, -1, 1)
  transform: scale3d(1, -1, 1)
  -webkit-transition: stroke-dashoffset 0.3s
  transition: stroke-dashoffset 0.3s
  pointer-events: none
  stroke: #7A7593
  stroke-width: 4px
  stroke-dasharray: 962
  stroke-dashoffset: 558

.input__field--madoka:focus + .input__label--madoka, .input--filled .input__label--madoka
  cursor: default
  pointer-events: none

.input__field--madoka:focus + .input__label--madoka .graphic--madoka, .input--filled .graphic--madoka
  stroke-dashoffset: 0

.input__field--madoka:focus + .input__label--madoka .input__label-content--madoka, .input--filled .input__label-content--madoka
  -webkit-transform: scale3d(0.81, 0.81, 1) translate3d(0, 4em, 0)
  transform: scale3d(0.81, 0.81, 1) translate3d(0, 4em, 0)
