/* Yoko */

.input__field--yoko
  z-index: 10
  width: 100%
  background: transparent
  color: #f5f5f5
  opacity: 0
  -webkit-transition: opacity 0.3s
  transition: opacity 0.3s

.input__label--yoko
  position: relative
  width: 100%
  color: #b04b40
  text-align: left
  &::before
    content: ''
    position: absolute
    bottom: 100%
    left: 0
    width: 100%
    height: 4em
    background: #c5564a
    -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 90deg)
    transform: perspective(1000px) rotate3d(1, 0, 0, 90deg)
    -webkit-transform-origin: 50% 100%
    transform-origin: 50% 100%
    -webkit-transition: -webkit-transform 0.3s
    transition: transform 0.3s
  &::after
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 0.25em
    background: #ad473c
    -webkit-transform-origin: 50% 0%
    transform-origin: 50% 0%
    -webkit-transition: -webkit-transform 0.3s
    transition: transform 0.3s

.input__label-content--yoko
  padding: 0.75em 0

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

.input__field--yoko:focus + .input__label--yoko::before, .input--filled .input__label--yoko::before
  -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg)
  transform: perspective(1000px) rotate3d(1, 0, 0, 0deg)

.input__field--yoko:focus + .input__label--yoko, .input--filled .input__label--yoko
  pointer-events: none

.input__field--yoko:focus + .input__label--yoko::after, .input--filled .input__label--yoko::after
  -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, -90deg)
  transform: perspective(1000px) rotate3d(1, 0, 0, -90deg)
