/* Yoshiko */

.input__field--yoshiko
  width: 100%
  background-color: #d0d1d0
  border: 2px solid transparent
  -webkit-transition: background-color 0.3s, border-color 0.3s
  transition: background-color 0.3s, border-color 0.3s

.input__label--yoshiko
  width: 100%
  text-align: left
  position: absolute
  bottom: 100%
  pointer-events: none
  overflow: hidden
  padding: 0 1.25em
  -webkit-transform: translate3d(0, 3em, 0)
  transform: translate3d(0, 3em, 0)
  -webkit-transition: -webkit-transform 0.3s
  transition: transform 0.3s

.input__label-content--yoshiko
  color: #8B8C8B
  padding: 0.25em 0
  -webkit-transition: -webkit-transform 0.3s
  transition: transform 0.3s
  &::after
    content: attr(data-content)
    position: absolute
    font-weight: 800
    bottom: 100%
    left: 0
    height: 100%
    width: 100%
    color: #a3d39c
    padding: 0.25em 0
    text-transform: uppercase
    letter-spacing: 1px
    font-size: 0.85em

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

.input__field--yoshiko:focus + .input__label--yoshiko .input__label-content--yoshiko, .input--filled .input__label-content--yoshiko
  -webkit-transform: translate3d(0, 100%, 0)
  transform: translate3d(0, 100%, 0)

.input__field--yoshiko:focus + .input__field--yoshiko, .input--filled .input__field--yoshiko
  background-color: transparent
  border-color: #a3d39c
