.async-form__response
  margin: 20px 0
  position: relative
  width: 100%
  font-size: 18px
  text-align: center
  padding-top: 60px

.async-form__response::before,
.async-form__response::after
  position: absolute
  top: 0px
  left: 50%
  display: block

.async-form__response--success::before
  content: ''
  width: 17px
  height: 28px
  border: solid #069e04
  border-width: 0 5px 5px 0
  transform: translateX(-50%) rotate(45deg)

.async-form__response--info::before
  content: ''
  width: 5px
  height: 30px
  top: 10px
  background-color: #777
  transform: translateX(-50%)

.async-form__response--info::after
  content: ''
  width: 5px
  height: 5px
  background-color: #777
  transform: translateX(-50%)

.async-form__response--warning::before
  content: ''
  width: 5px
  height: 30px
  background-color: rgb(255, 187, 0)
  transform: translateX(-50%)

.async-form__response--warning::after
  content: ''
  width: 5px
  height: 5px
  top: 35px
  background-color: rgb(255, 187, 0)
  transform: translateX(-50%)

.async-form__response--error::before
  content: ''
  width: 5px
  height: 40px
  background-color: #940d0d
  transform: translateX(-50%) rotate(-45deg)

.async-form__response--error::after
  content: ''
  width: 5px
  height: 40px
  background-color: #940d0d
  transform: translateX(-50%) rotate(45deg)

.async-form--loading
  opacity: 0.1
  transition: opacity 800ms ease-out
  pointer-events: none