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

.wrapper__label {
  color: #1d1d1d;
  font: 400 1rem/1.5rem "Source Sans 3";
  font-family: var(--ifx-font-family);
}
.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";
  font-family: var(--ifx-font-family);
  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";
  font-family: var(--ifx-font-family);
}

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

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

:host(.wrapper--readonly) .wrapper__textarea textarea {
  border: none;
  border-bottom: 1px solid var(--color-engineering-300, #BFBBBB);
  padding-left: 0;
}
:host(.wrapper--readonly) .wrapper__textarea textarea::placeholder {
  color: #1d1d1d;
}
:host(.wrapper--readonly) .wrapper__textarea textarea:focus-within {
  outline: none;
}