.text-area-view {
  position: relative;
  display: inline-block;
}

.text-area-view.text-area-full-width {
  width: 100%;
}

.text-area-view.text-area-has-start-icon, .text-area-view.text-area-has-end-icon {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
}

.text-area-view .text-area-input {
  display: block;
  width: 100%;
  padding: var(--spacing-12);
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
  line-height: var(--line-height-small-22);
  color: var(--color-base);
  background-color: var(--background-color-base);
  border: var(--border-width-base) solid var(--border-color-base);
  border-radius: var(--border-radius-base);
  transition: var(--transition-property-base) var(--transition-duration-base) var(--transition-timing-function-system);
  outline: none;
  cursor: var(--cursor-text);
  resize: vertical;
  overflow-y: auto;
}

.text-area-view.text-area-disabled .text-area-input {
  color: var(--color-disabled);
  -webkit-text-fill-color: var(--color-disabled);
  background-color: var(--background-color-disabled);
  border-color: var(--border-color-disabled);
  cursor: var(--cursor-not-allowed);
  resize: none;
}

.text-area-view.text-area-read-only .text-area-input {
  background-color: var(--background-color-neutral-subtle);
}

.text-area-view.text-area-error .text-area-input {
  border-color: var(--border-color-red);
  outline: var(--border-width-base) solid var(--border-color-red);
  outline-offset: 0px;
}

.text-area-view.text-area-autosize .text-area-input {
  resize: none;
  field-sizing: content;
  max-height: 18rem;
}

.text-area-view.text-area-autosize.text-area-disabled .text-area-input {
  overflow-y: hidden;
}

.text-area-view.text-area-has-start-icon .text-area-input {
  padding-inline-start: calc((var(--spacing-12) + var(--size-icon-medium)) + var(--spacing-8)) !important;
}

.text-area-view.text-area-has-end-icon .text-area-input {
  padding-inline-end: calc((var(--spacing-12) + var(--size-icon-medium)) + var(--spacing-8)) !important;
}

.text-area-view .text-area-input::placeholder {
  color: var(--color-placeholder) !important;
  -webkit-text-fill-color: var(--color-placeholder) !important;
}

.text-area-view .text-area-input:disabled::placeholder {
  color: var(--color-disabled) !important;
  -webkit-text-fill-color: var(--color-disabled) !important;
}

.text-area-view:not(.text-area-disabled):not(.text-area-read-only) .text-area-input:focus {
  border-color: var(--border-color-blue-focus) !important;
  outline: var(--border-width-base) solid var(--border-color-blue-focus) !important;
  outline-offset: 0px !important;
}

.text-area-view .text-area-start-icon, .text-area-view .text-area-end-icon {
  position: absolute;
  top: calc(var(--border-width-base) + var(--spacing-12) + (var(--line-height-small-22) - var(--size-icon-medium)) / 2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-medium);
  height: var(--size-icon-medium);
  color: var(--color-subtle);
  pointer-events: none;
}

.text-area-view .text-area-start-icon {
  left: calc(var(--border-width-base) + var(--spacing-12));
}

.text-area-view .text-area-end-icon {
  right: calc(var(--border-width-base) + var(--spacing-12));
}

.text-area-label-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--font-size-medium-16);
  font-weight: 600;
  color: var(--color-base);
  font-family: var(--typography-font-sans);
}

.text-area-label-row .text-area-optional-flag {
  font-weight: var(--font-weight-normal);
  color: var(--color-subtle);
}

.text-area-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
}