/* Ruri */

.input__field--ruri
  width: 100%
  background: transparent
  padding: 0.5em 0
  margin-bottom: 2em
  color: #fff

.input__label--ruri
  width: 100%
  position: absolute
  text-align: left
  font-size: 1em
  padding: 10px 0 5px
  pointer-events: none
  &::after
    content: ''
    position: absolute
    width: 100%
    height: 7px
    background: #6a7989
    left: 0
    top: 100%
    -webkit-transform-origin: 50% 100%
    transform-origin: 50% 100%
    -webkit-transition: -webkit-transform 0.3s, background-color 0.3s
    transition: transform 0.3s, background-color 0.3s

.input__label-content--ruri
  padding: 0
  -webkit-transform-origin: 0 0
  transform-origin: 0 0
  -webkit-transition: -webkit-transform 0.3s, color 0.3s
  transition: transform 0.3s, color 0.3s

.input__field--ruri:focus + .input__label--ruri::after, .input--filled .input__label--ruri::after
  background: #a3d39c
  -webkit-transform: scale3d(1, 0.25, 1)
  transform: scale3d(1, 0.25, 1)

.input__field--ruri:focus + .input__label--ruri .input__label-content--ruri, .input--filled .input__label--ruri .input__label-content--ruri
  color: #a3d39c
  -webkit-transform: translate3d(0, 2em, 0) scale3d(0.655, 0.655, 1)
  transform: translate3d(0, 2em, 0) scale3d(0.655, 0.655, 1)
