/* Manami */

.input--manami
  overflow: hidden

.input__field--manami
  width: 100%
  background: transparent
  padding: 0.5em
  margin-bottom: 2em
  color: #f9f7f6
  z-index: 100
  opacity: 0

.input__label--manami
  width: 100%
  position: absolute
  text-align: left
  padding: 0.5em 0
  pointer-events: none
  font-size: 1em
  &::before, &::after
    content: ''
    position: absolute
    width: 100%
    left: 0
  &::before
    height: 100%
    background: #A8A8A8
    top: 0
    -webkit-transform: translate3d(0, -100%, 0)
    transform: translate3d(0, -100%, 0)
    -webkit-transition: -webkit-transform 0.2s
    transition: transform 0.2s
  &::after
    height: 2px
    background: #A8A8A8
    top: 100%
    -webkit-transition: opacity 0.2s
    transition: opacity 0.2s

.input__label-content--manami
  padding: 0
  -webkit-transform-origin: 0 0
  transform-origin: 0 0
  -webkit-transition: -webkit-transform 0.2s, color 0.2s
  transition: transform 0.2s, color 0.2s

.input__field--manami:focus, .input--filled .input__field--manami
  opacity: 1
  -webkit-transition: opacity 0s 0.2s
  transition: opacity 0s 0.2s

.input__label--manami
  &::before, &::after
    -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1)
    transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1)

.input__label-content--manami, .input__field--manami:focus, .input--filled .input__field--manami
  -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1)
  transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1)

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

.input__field--manami:focus + .input__label--manami::after, .input--filled .input__label--manami::after
  opacity: 0

.input__field--manami:focus + .input__label--manami .input__label-content--manami, .input--filled .input__label--manami .input__label-content--manami
  color: #cbc4c6
  -webkit-transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1)
  transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1)
