:host {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.wrapper__label {
  color: #1D1D1D;
  font: 400 1rem/1.5rem "Source Sans 3";
}
.wrapper__label .required {
  margin-left: 4px;
}
.wrapper__label .required.error {
  color: #CD002F;
}

:host(.wrapper--disabled) .wrapper__label {
  color: #BFBBBB;
}

.wrapper__textarea {
  width: 100%;
}
.wrapper__textarea.fullWidth {
  width: 100%;
}
.wrapper__textarea.fullWidth textarea {
  width: 100%;
  box-sizing: border-box;
}

.wrapper__textarea textarea {
  border: 1px solid #8D8786;
  border-radius: 1px;
  padding: 8px 16px;
  background-color: #FFFFFF;
  color: #1D1D1D;
  font: 400 1rem/1.5rem "Source Sans 3";
  transition: all 100ms ease;
  transition-property: border-color;
}
.wrapper__textarea textarea:hover {
  border: 1px solid #575352;
}
.wrapper__textarea textarea:focus-within {
  outline: 2px solid #0A8276;
  outline-offset: 0;
}

:host(.wrapper--error) .wrapper__textarea textarea {
  border: 1px solid #CD002F;
}

:host(.wrapper--disabled) .wrapper__textarea textarea {
  border: 1px solid #BFBBBB;
  background-color: #BFBBBB;
  color: #FFFFFF;
}
:host(.wrapper--disabled) .wrapper__textarea textarea::placeholder {
  color: #FFFFFF;
}

.wrapper__caption {
  color: #1D1D1D;
  font: 400 0.75rem/1rem "Source Sans 3";
}

:host(.wrapper--error) .wrapper__caption {
  color: #CD002F;
}

:host(.wrapper--disabled) .wrapper__caption {
  color: #BFBBBB;
}