.form-container
  position: relative

.form
  opacity: 1
  transition: opacity .5s ease-in-out
  &.is-hidden
    opacity: 0

form
  position: relative
  width: 100%
  input, textarea
    position: relative
    display: block
    width: 100%
    border: none
    outline: none
    margin: 0
    padding: 0
    background-color: transparent
    padding: 1.3rem 0.2rem 1.2rem 0.2rem
    font: normal 400 1.6rem/1.6 $default-font
    transition: border .3s, background-color 0.3s ease-in-out
    &.margin-s
      margin: 0 0 .6rem 0
  input
    height: 5rem
    margin: 0 0 2.4rem 0
  textarea
    height: 10rem
    resize: none
    margin: 0 0 2.4rem 0
  input, textarea
    &.margin-s
      margin: 0 0 .6rem 0
    &.margin-l
      margin: 0 0 4.2rem 0
  +MQ(XXL)
    input, textarea
      height: 5rem
    textarea
      height: 10rem

.form-light
  ::-webkit-input-placeholder
    font-weight: 300
    color: $text-light
  :-moz-placeholder
    font-weight: 300
    color: $text-light
  ::-moz-placeholder
    font-weight: 300
    color: $text-light
  :-ms-input-placeholder
    font-weight: 300
    color: $text-light

  input:focus:required:invalid,
  textarea:focus:required:invalid
    color: $text-light
  input:required:valid,
  textarea:required:valid
    color: $text-light

  input, textarea
    border-bottom: 2px solid rgba($white, 1)
    color: $text-light
    &:focus
      border-bottom: 2px solid rgba($white, 0.5)

  .inputs-description
    color: $text-light-mute

.reply-group
  +position(absolute, 0 null null 0)
  width: 100%
  max-width: 300px
  opacity: 0
  transition: opacity .5s ease-in-out
  &.is-visible
    opacity: 1

.reply-group__icon
  display: block
  margin: 0 auto 1.7rem
  font-size: 4rem
  color: $text-light

.reply-group__title
  font: normal 400 2rem/1.2 $default-font
  color: $text-light
  margin-bottom: 0.2rem

.reply-group__text
  display: block
  font: normal 300 1.4rem/1.6 $default-font
  color: $text-light-base
