.text-area {
  --text-area-background-color: var(--sds-color-background-default-default);
  --text-area-text-color: var(--sds-color-text-default-default);
  --text-area-border-color: var(--sds-color-border-default-default);
  --text-area-placeholder-color: var(--sds-color-text-default-tertiary);
  align-items: center;
  background-color: var(--text-area-background-color);
  border-radius: var(--sds-size-radius-200);
  box-shadow: inset 0 0 0 var(--sds-size-stroke-border)
    var(--text-area-border-color);
  color: var(--text-area-text-color);
  display: flex;
  line-height: var(--global-line-height-paragraph);
  padding: var(--sds-size-space-300) var(--sds-size-space-400);
  position: relative;
  width: 100%;

  &::placeholder {
    color: var(--text-area-placeholder-color);
  }

  &.text-area-resizable {
    resize: vertical;
  }
  &[data-disabled] {
    --text-area-background-color: var(--sds-color-background-disabled-default);
    --text-area-text-color: var(--sds-color-text-disabled-default);
    --text-area-border-color: var(--sds-color-border-disabled-default);
    resize: none;
  }

  &[data-invalid]:not([data-disabled]) {
    --text-area-border-color: var(--sds-color-border-danger-default);
  }

  &[data-focus-visible] {
    --text-area-border-color: var(--sds-color-border-brand-secondary);
  }
}
