:host {
  --lu-text-area-border-color: #686A6F;
  position: relative;
}
:host lu-icon {
  top: 50%;
  margin-top: -13px;
  font-size: 24px;
  line-height: 26px;
}

:host(.lu-color) {
  color: var(--lu-color-base);
}

.native-textarea {
  padding: 9px 10px;
  width: 100%;
  border: 1px solid var(--lu-global-form-input-outline, var(--lu-text-area-border-color));
  outline: none;
  background-color: #FFFFFF;
  font-size: var(--lu-global-form-text-area-font-size, 14px);
  line-height: 26px;
  box-sizing: border-box;
}

:host([is-valid]) .native-textarea {
  border: 2px solid #00854E;
}

:host([is-invalid]) .native-textarea {
  border: 2px solid #E4002B;
}

:host(.has-focus) .native-textarea {
  border: 2px solid #1B2C56;
}