// Text Input

.text-input,
.text-area {
  text-align: left;
  margin-bottom: 1.5em;
  transition: all .3s;
  cursor: text;

  &:focus-within {
    transform: scale(1.05,1.05);
  }
}

.text-input-label,
.text-area-label {
  font-size: 1em;
  width: 100%;
  color: #aaa;
  display:block;
  transform-origin: 0 0;
  transition: all .3s;
  z-index: -1;
  cursor: text;
  pointer-events: none;
}

.text-input-label {
  transform:translateY(-1.75em);
}

.text-area-label {
  transform:translateY(-2em);
}

.text-input-field,
.text-area textarea {
  font-size: 1.25em;
  box-shadow: none;
  background: $background;
  color: $text-selected;
  border-radius: 0;
  border-color: #ccc;
  border-style: none none solid none;
  width: 100%;
  transition: all .5s;
  padding: 5px;
  -webkit-user-select: auto;
  user-select: auto;

  &::placeholder {
    color: transparent;
  }

  &:focus {
    box-shadow: none;
    outline: none;
    border-color: $text-selected;
  }

}

.text-input-field {
  &:focus + .text-input-label,
  &:not(:placeholder-shown) + .text-input-label {
    transform: translateY(-3em) scale(0.8);
  }
}

.text-area textarea {
  height: 6em;
  resize: none;
  overflow:hidden;

  &:focus + .text-area-label,
  &:not(:placeholder-shown) + .text-area-label {
    transform: translateY(-6.5em) scale(0.8);
  }
}