/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
/* Variables */
/* Styling for :autofill pseudo-class */
.TextArea {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--colorsSurfaceDefault, white);
  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
  border-radius: 3px;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--colorsTextDefault, #141414);
  font-size: 16px;
  outline: none;
  line-height: 1.2857;
  margin: 0;
  padding: 0.4375em 0.6875em;
  resize: vertical;
  transition: background 0.2s ease-in-out, box-shadow 0.1s ease-in-out, border-color 0.2s ease-in-out;
  vertical-align: top;
  width: 100%;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  /* States */
}
.TextArea::placeholder {
  color: var(--colorsTextDefault, #141414);
  opacity: 0.4;
}
@supports (-moz-appearance: none) {
  .TextArea {
    overflow-x: hidden;
  }
}
.TextArea:focus-within, .TextArea:focus {
  color: var(--colorsTextDefault, #141414);
  border-color: var(--colorsBorderPrimary, #0265dc);
  background-color: var(--colorsSurfaceDefault, white);
  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
  -webkit-appearance: none;
}
.TextArea.TextArea--disabled, .TextArea:not(.TextArea--disabled)[disabled] {
  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
  opacity: 0.6;
  pointer-events: none;
}
.TextArea[disabled], .TextArea[readonly] {
  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
}
.TextArea[readonly]::placeholder {
  color: var(--colorsTextDefault, #141414);
  opacity: 0.4;
}
.TextArea:autofill {
  box-shadow: 0 0 0 100px rgba(255, 190, 0, 0.08) inset !important;
}
.TextArea:-webkit-autofill {
  box-shadow: 0 0 0 100px rgba(255, 190, 0, 0.08) inset !important;
}

.TextArea.TextArea--error {
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
  border-color: var(--colorsBorderCritical, #e13212);
  color: var(--colorsTextCritical, #bf2a00);
  /* Error Placeholder */
}
.TextArea.TextArea--error:focus-within, .TextArea.TextArea--error:focus {
  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
  color: var(--colorsTextCritical, #bf2a00);
}
.TextArea.TextArea--error::placeholder {
  color: var(--colorsTextCritical, #bf2a00);
  opacity: 0.4;
}
.TextArea.TextArea--error:autofill {
  box-shadow: none !important;
}
.TextArea.TextArea--error:-webkit-autofill {
  box-shadow: none !important;
}

/*# sourceMappingURL=index.css.map */