:host {
  --background: var(--bp-layer-background-300);
  --border: 0;
  --padding: var(--bp-size-500) var(--bp-size-600);
  --font-size: var(--bp-text-size-300);
  --color: var(--bp-text-color-500);
  --border-radius: var(--bp-object-border-radius-100);
  --min-height: calc(var(--bp-size-1000) * 2);
  display: block;
  width: 100%;
}

textarea {
  background: var(--background) !important;
  border: var(--border) !important;
  color: var(--color) !important;
  border-radius: var(--border-radius) !important;
  padding: var(--padding) !important;
  font-size: var(--font-size) !important;
  resize: vertical !important;
  width: 100% !important;
  min-height: var(--min-height) !important;
  font-family: inherit;
}

:host(:state(error)),
:host(:state(invalid):state(touched)) {
  --border: var(--bp-object-border-width-100) solid var(--bp-status-danger-background-200);
}

:host(:state(success)) {
  --border: var(--bp-object-border-width-100) solid var(--bp-status-success-background-200);
}

:host(:state(disabled)) {
  --border: var(--bp-object-border-width-100) solid var(--bp-status-disabled-background-200);
}
