.labelAbove {
  color: var(--Text-Default);
  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
  font-size: var(--Body-Supporting-text-Size);
  font-weight: var(--Body-Supporting-text-Font-weight-2);
  letter-spacing: var(--Body-Supporting-text-Letter-spacing);
  line-height: 1.5;
  margin-bottom: var(--Space-x1);
}

.container {
  background-color: var(--Surface-Primary-Default);
  border: 1px solid var(--Border-Interactive-Default);
  border-radius: var(--Corner-radius-md);
  display: block;
  min-width: 0;
  height: 138px;
  padding: var(--Space-x2);
  box-sizing: border-box;
  cursor: text;

  &:has(.textarea:focus):not(:has(.textarea:disabled)):not(
      :has(.textarea:read-only)
    ):not(:has(.textarea[data-invalid="true"])):not(
      :has(.textarea[aria-invalid="true"])
    ) {
    outline-offset: -2px;
    outline: 2px solid var(--Border-Interactive-Focus);
  }

  &:has(.textarea:disabled),
  &:has(.textarea:read-only) {
    background-color: var(--Surface-Primary-Disabled);
    border: transparent;
    cursor: unset;
  }

  &:has(.textarea[data-invalid="true"], .textarea[aria-invalid="true"]) {
    border-color: var(--Border-Interactive-Error);

    &:focus-within,
    &:has(.textarea:focus) {
      outline-offset: -2px;
      outline: 2px solid var(--Border-Interactive-Error);
      border-color: var(--Border-Interactive-Error);
    }
  }
}

.textarea {
  background: none;
  border: none;
  color: var(--Text-Default);
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: visible;
  padding: 0;
  resize: none;

  &:focus {
    outline: none;
  }

  &:disabled,
  &:read-only {
    color: var(--Text-Interactive-Disabled);
    cursor: unset;
  }
}