/* Auto-growing textarea fallback for browsers without field-sizing (Firefox).
   The wrapper is a grid whose hidden ::after clone mirrors the textarea value, so
   the cell grows with the text and the absolutely-placed textarea fills it.
   field-sizing-capable browsers (inputs.css) ignore all of this. */

@layer components {
  @supports not (field-sizing: content) {
    .autoresize__wrapper {
      display: grid !important;
      position: relative;

      > *,
      &::after {
        grid-area: 1 / 1 / 2 / 2;
      }

      &::after {
        content: attr(data-autoresize-clone-value) " ";
        font: inherit;
        line-height: inherit;
        padding: var(--input-padding-block) var(--inline-space);
        /* Match the textarea's 1px border-box so the clone reserves the same
           height (the textarea keeps .input's border). */
        border: 1px solid transparent;
        visibility: hidden;
        white-space: pre-wrap;
        overflow-wrap: break-word;
      }
    }

    .autoresize__textarea {
      inset: 0;
      overflow: hidden;
      position: absolute;
      resize: none;
    }
  }
}