.grow-wrap.grow-wrap--active {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}
.grow-wrap.grow-wrap--active::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";
  /* This is how textarea text behaves */
  white-space: pre-wrap;
  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.grow-wrap.grow-wrap--active > textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;
  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.grow-wrap.grow-wrap--active > textarea, .grow-wrap.grow-wrap--active::after {
  /* Identical styling required!! */
  border: 1px solid var(--gin-border-color-form-element);
  padding: 0.5rem;
  font: inherit;
  /* Place on top of each other */
  grid-area: 1/1/2/2;
}

/*# sourceMappingURL=textarea-autogrow.css.map */