.textArea {
  composes: borderBox from "./Layout.css";
  composes: Text from "./Text.css";
  composes: fontSize300 from "./Typography.css";
  composes: xsCol12 from "./Column.css";
  line-height: 1.5;
  padding: var(--space-200) var(--space-400);
  resize: none;
}

.textArea::placeholder {
  color: var(--color-text-formfield-placeholder);
}

.unstyledTextArea,
.textAreaSpacer {
  composes: unstyled from "./sharedSubcomponents/FormElement.css";
  composes: Text from "./Text.css";
  composes: fontSize300 from "./Typography.css";
  line-height: 1.5;
  resize: none;
}

.unstyledTextArea {
  composes: absolute left0 top0 right0 bottom0 from "./Layout.css";
  height: 100%;
  padding: var(--space-100) var(--space-200);
  width: 100%;
}

.unstyledTextArea:focus {
  outline: 0;
}

.textAreaSpacer {
  padding: var(--space-100) var(--space-0);
  visibility: hidden;
  word-break: break-word;
}

.textAreaWrapper {
  align-content: flex-start;
  border-radius: var(--rounding-200);
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  padding-bottom: var(--space-100);
}