@layer lotek {
  .lt-textarea {
    /* The design system cannot assume the consumer has a CSS reset. Without
       border-box, padding and border are added outside the width, and the
       field becomes wider than the box it sits in. */
    box-sizing: border-box;

    display: block;
    width: 100%;
    min-height: var(--lt-textarea-min-height, calc(var(--lt-spacing-4) * 5));
    padding: var(
      --lt-textarea-padding,
      var(--lt-spacing-2) var(--lt-spacing-3)
    );
    font-family: inherit;
    font-size: var(--lt-font-size-m);
    line-height: var(--lt-line-height-default);
    color: var(--lt-color-neutral-text-strong);
    background: var(--lt-color-neutral-canvas);
    border: 1px solid var(--lt-color-neutral-border);
    border-radius: var(--lt-textarea-radius, var(--lt-spacing-1));
    resize: vertical;
  }

  .lt-textarea::placeholder {
    color: var(--lt-color-neutral-text-subtle);
  }

  .lt-textarea:hover {
    border-color: var(--lt-color-neutral-border-strong);
  }

  .lt-textarea:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
    border-color: var(--lt-color-accent-border);
  }

  .lt-textarea:disabled,
  .lt-textarea[aria-disabled="true"] {
    background: var(--lt-color-disabled-surface);
    color: var(--lt-color-disabled-text);
    border-color: var(--lt-color-disabled-surface);
    /* No pointer-events: none here. The browser already blocks a disabled
       field, and pointer-events would only stop the cursor from showing. The
       element is then not hit by the mouse at all. */
    cursor: not-allowed;
  }

  /* aria-disabled is only information for screen readers; the element still
     works. Here pointer-events stops the mouse, at the cost of the cursor.
     If the field should really be off, use `disabled` or `readonly`. */
  .lt-textarea[aria-disabled="true"] {
    pointer-events: none;
  }

  .lt-textarea[data-state="invalid"] {
    border-color: var(--lt-color-danger-text);
    background: var(--lt-color-danger-surface);
  }

  .lt-textarea[data-state="invalid"]:focus-visible {
    outline-color: var(--lt-color-danger-text);
  }

  .lt-textarea[data-state="success"] {
    border-color: var(--lt-color-success-text);
    background: var(--lt-color-success-surface);
  }

  .lt-textarea[data-state="success"]:focus-visible {
    outline-color: var(--lt-color-success-text);
  }

  /* Disabled wins over a state. `[data-state]` used to come after
     `:disabled` with the same specificity, and an invalid field in a form
     that was disabled during submission looked red, not disabled. */
  .lt-textarea:is(:disabled, [aria-disabled="true"])[data-state] {
    background: var(--lt-color-disabled-surface);
    color: var(--lt-color-disabled-text);
    border-color: var(--lt-color-disabled-surface);
  }
}