@layer components {
  .rs-textarea {
    --rs-textarea-p: var(--rs-unit-x2);
    --rs-textarea-radius: var(--rs-radius-small);
    --rs-textarea-border: var(--rs-color-border-neutral);
    --rs-textarea-border-width: 1px;
    --rs-textarea-font-size: var(--rs-font-size-body-3);
    --rs-textarea-line-height: var(--rs-line-height-body-3);
    position: relative;
    display: grid;
  }

  .rs-textarea[data-size="large"] {
    --rs-textarea-p: var(--rs-unit-x3);
    --rs-textarea-radius: var(--rs-radius-medium);
    --rs-textarea-font-size: var(--rs-font-size-body-2);
    --rs-textarea-line-height: var(--rs-line-height-body-2);
  }

  .rs-textarea[data-variant="faded"] {
    --rs-textarea-border: transparent;
  }

  .rs-textarea:has(textarea:user-invalid) {
    --rs-textarea-border: var(--rs-color-border-critical);
    --rs-textarea-border-width: 2px;
  }

  .rs-textarea::after {
    content: attr(data-value) " ";
    visibility: hidden;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow: hidden;
  }

  .rs-textarea::after,
  .rs-textarea > textarea {
    grid-area: 1 / 1;
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: calc(
      var(--rs-textarea-line-height) * 4 + var(--rs-textarea-p) * 2
    );
    border: 0;
    border-radius: var(--rs-textarea-radius);
    padding: var(--rs-textarea-p);
    font-family: var(--rs-font-family-body);
    font-size: var(--rs-textarea-font-size);
    font-weight: var(--rs-font-weight-regular);
    line-height: var(--rs-textarea-line-height);
  }

  .rs-textarea > textarea {
    position: relative;
    z-index: 1;
    resize: vertical;
    outline: 0;
    background: var(--rs-color-background-elevation-base);
    color: var(--rs-color-foreground-neutral);
    box-shadow: inset 0 0 0 var(--rs-textarea-border-width)
      var(--rs-textarea-border);
  }

  .rs-textarea[data-variant="faded"] > textarea {
    background: var(--rs-color-background-neutral-faded);
  }

  .rs-textarea > textarea:focus {
    box-shadow: inset 0 0 0 2px var(--rs-color-border-primary);
  }

  .rs-textarea:has(textarea:user-invalid) > textarea,
  .rs-textarea:has(textarea:user-invalid) > textarea:focus {
    box-shadow: inset 0 0 0 2px var(--rs-color-border-critical);
  }

  .rs-textarea > textarea:disabled {
    cursor: not-allowed;
    background: var(--rs-color-background-disabled-faded);
    color: var(--rs-color-foreground-disabled);
    box-shadow: inset 0 0 0 1px var(--rs-color-border-disabled);
  }

  @supports (field-sizing: content) {
    .rs-textarea::after {
      content: none;
    }

    .rs-textarea > textarea {
      field-sizing: content;
    }
  }
}