/* Akira

.input--akira
  margin-top: 2em

.input__field--akira
  position: absolute
  top: 0
  left: 0
  z-index: 10
  display: block
  padding: 0 1em
  width: 100%
  height: 100%
  background: transparent
  text-align: center

.input__label--akira
  padding: 0
  width: 100%
  background: #696a6e
  color: #cc6055
  cursor: text
  &::before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: #2f3238
    -webkit-transform: scale3d(0.97, 0.85, 1)
    transform: scale3d(0.97, 0.85, 1)
    -webkit-transition: -webkit-transform 0.3s
    transition: transform 0.3s

.input__label-content--akira
  -webkit-transition: -webkit-transform 0.3s
  transition: transform 0.3s

.input__field--akira:focus + .input__label--akira::before, .input--filled .input__label--akira::before
  -webkit-transform: scale3d(0.99, 0.95, 1)
  transform: scale3d(0.99, 0.95, 1)

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

.input__field--akira:focus + .input__label--akira .input__label-content--akira, .input--filled .input__label-content--akira
  -webkit-transform: translate3d(0, -3.5em, 0)
  transform: translate3d(0, -3.5em, 0)
