form
  --text-color: #afafaf

.input
  outline: none
  border: none
  overflow: hidden
  margin: 0
  width: 100%
  padding: 0.25rem 0
  background: none
  color: white
  font-size: 1.2em
  font-weight: bold
  transition: border 500ms

.input:valid
  color: yellowgreenf

.input:invalid
  color: orangered

/* Border animation */
.field::after
  content: ""
  position: relative
  display: block
  height: 4px
  width: 100%
  background: #d16dff
  transform: scaleX(0)
  transform-origin: 0%
  opacity: 0
  transition: all 500ms ease
  top: 2px

.field:focus-within
  border-color: transparent

.field:focus-within::after
  transform: scaleX(1)
  opacity: 1

/* Label animation */
.label
  z-index: -1
  position: absolute
  transform: translateY(-2rem)
  transform-origin: 0%
  transition: transform 400ms

.field:focus-within .label,
.input:not(:placeholder-shown) + .label
  transform: scale(0.8) translateY(-5rem)
  opacity: 1

button:disabled
  border-color: var(--text-color)
  color: var(--text-color)

button:hover
  cursor: pointer