/* Jiro */

.input--jiro
  margin-top: 2em

.input__field--jiro
  padding: 0.85em 0.5em
  width: 100%
  background: transparent
  color: #DDE2E2
  opacity: 0
  -webkit-transition: opacity 0.3s
  transition: opacity 0.3s

.input__label--jiro
  position: absolute
  left: 0
  padding: 0 0.85em
  width: 100%
  height: 100%
  text-align: left
  pointer-events: none

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

.input__label--jiro
  &::before, &::after
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    -webkit-transition: -webkit-transform 0.3s
    transition: transform 0.3s
  &::before
    border-top: 2px solid #6a7989
    -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0)
    transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0)
    -webkit-transition-delay: 0.3s
    transition-delay: 0.3s
  &::after
    z-index: -1
    background: #6a7989
    -webkit-transform: scale3d(1, 0, 1)
    transform: scale3d(1, 0, 1)
    -webkit-transform-origin: 50% 0%
    transform-origin: 50% 0%

.input__field--jiro:focus, .input--filled .input__field--jiro
  opacity: 1
  -webkit-transition-delay: 0.3s
  transition-delay: 0.3s

.input__field--jiro:focus + .input__label--jiro .input__label-content--jiro, .input--filled .input__label-content--jiro
  -webkit-transform: translate3d(0, -80%, 0)
  transform: translate3d(0, -80%, 0)
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1)
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1)

.input__field--jiro:focus + .input__label--jiro::before, .input--filled .input__label--jiro::before
  -webkit-transition-delay: 0s
  transition-delay: 0s

.input__field--jiro:focus + .input__label--jiro::before, .input--filled .input__label--jiro::before
  -webkit-transform: translate3d(0, 0, 0)
  transform: translate3d(0, 0, 0)

.input__field--jiro:focus + .input__label--jiro::after, .input--filled .input__label--jiro::after
  -webkit-transform: scale3d(1, 1, 1)
  transform: scale3d(1, 1, 1)
  -webkit-transition-delay: 0.3s
  transition-delay: 0.3s
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1)
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1)
