/* Kuro */

.input--kuro
  max-width: 320px
  margin-bottom: 3em

.input__field--kuro
  width: 100%
  background: transparent
  color: #9196A1
  opacity: 0
  text-align: center
  -webkit-transition: opacity 0.3s
  transition: opacity 0.3s

.input__label--kuro
  position: absolute
  left: 0
  width: 100%
  color: #df6589
  pointer-events: none
  &::before, &::after
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 50%
    height: 100%
    border: 4px solid #747981
    -webkit-transition: -webkit-transform 0.3s
    transition: transform 0.3s
  &::before
    border-right: none
  &::after
    left: 50%
    border-left: none

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

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

.input__field--kuro:focus + .input__label--kuro::after, .input--filled .input__label--kuro::after
  -webkit-transform: translate3d(10%, 0, 0)
  transform: translate3d(10%, 0, 0)

.input__field--kuro:focus + .input__label--kuro .input__label-content--kuro, .input--filled .input__label-content--kuro
  -webkit-animation: anim-2 0.3s forwards
  animation: anim-2 0.3s forwards

@-webkit-keyframes anim-2
  50%
    opacity: 0
    -webkit-transform: scale3d(0.3, 0.3, 1)
    transform: scale3d(0.3, 0.3, 1)

  51%
    opacity: 0
    -webkit-transform: translate3d(0, 3.7em, 0) scale3d(0.3, 0.3, 1)
    transform: translate3d(0, 3.7em, 0) scale3d(0.3, 0.3, 1)

  100%
    opacity: 1
    -webkit-transform: translate3d(0, 3.7em, 0)
    transform: translate3d(0, 3.7em, 0)


@keyframes anim-2
  50%
    opacity: 0
    -webkit-transform: scale3d(0.3, 0.3, 1)
    transform: scale3d(0.3, 0.3, 1)

  51%
    opacity: 0
    -webkit-transform: translate3d(0, 3.7em, 0) scale3d(0.3, 0.3, 1)
    transform: translate3d(0, 3.7em, 0) scale3d(0.3, 0.3, 1)

  100%
    opacity: 1
    -webkit-transform: translate3d(0, 3.7em, 0)
    transform: translate3d(0, 3.7em, 0)
