@layer env.components {
  .env-textarea-resize-handle {
    position: absolute;
    inset-inline: 0;
    --env-textarea-resize-handle-overlap: -0.0625rem;
    inset-block-end: var(--env-textarea-resize-handle-overlap);
    block-size: var(--env-space-3);
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    background: transparent;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
  }
  .env-textarea-resize-handle::after {
    --env-textarea-grip-size: 0.625rem;
    --env-textarea-grip-line: linear-gradient(
      to top left,
      transparent calc(50% - var(--env-control-border-width) / 2),
      var(--env-color-fg-muted) calc(50% - var(--env-control-border-width) / 2)
        calc(50% + var(--env-control-border-width) / 2),
      transparent calc(50% + var(--env-control-border-width) / 2)
    );
    content: '';
    position: absolute;
    inset-inline-end: var(--env-space-1);
    inset-block-end: var(--env-space-1);
    inline-size: var(--env-textarea-grip-size);
    block-size: var(--env-textarea-grip-size);
    background:
      var(--env-textarea-grip-line),
      var(--env-textarea-grip-line) right bottom / 50% 50% no-repeat;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--env-motion-duration-medium) var(--env-motion-ease);
  }
  .env-textarea-resize-handle:dir(rtl)::after {
    scale: -1 1;
  }
  .env-textarea-resize-handle[data-resizing]::after {
    opacity: 1;
  }
  @media (pointer: coarse) {
    .env-textarea-resize-handle {
      block-size: var(--env-control-height-touch);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .env-textarea-resize-handle,
    .env-textarea-resize-handle::after {
      transition: none;
    }
  }
}