/* Ichiro */

.input--ichiro
  margin-top: 2em

.input__field--ichiro
  position: absolute
  top: 4px
  left: 4px
  z-index: 100
  display: block
  padding: 0 0.55em
  width: calc(100% - 8px)
  height: calc(100% - 8px)
  background: #f0f0f0
  color: #7F8994
  opacity: 0
  -webkit-transform: scale3d(1, 0, 1)
  transform: scale3d(1, 0, 1)
  -webkit-transform-origin: 50% 100%
  transform-origin: 50% 100%
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s
  transition: opacity 0.3s, transform 0.3s

.input__label--ichiro
  width: 100%
  text-align: left
  cursor: text
  &::before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: #fff
    -webkit-transform-origin: 50% 100%
    transform-origin: 50% 100%
    -webkit-transition: -webkit-transform 0.3s
    transition: transform 0.3s

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

.input__field--ichiro:focus, .input--filled .input__field--ichiro
  opacity: 1
  -webkit-transform: scale3d(1, 1, 1)
  transform: scale3d(1, 1, 1)

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

.input__field--ichiro:focus + .input__label--ichiro::before, .input--filled .input__label--ichiro::before
  -webkit-transform: scale3d(1, 1.5, 1)
  transform: scale3d(1, 1.5, 1)

.input__field--ichiro:focus + .input__label--ichiro .input__label-content--ichiro, .input--filled .input__label-content--ichiro
  -webkit-transform: translate3d(0, -3.15em, 0) scale3d(0.8, 0.8, 1)
  transform: translate3d(0, -3.15em, 0) scale3d(0.8, 0.8, 1) translateZ(1px)
