import { style } from '@vanilla-extract/css';
import { toRem } from 'folds';

/**
 * A 44px minimum touch target on phones for otherwise-small interactive controls
 * (folds `IconButton`/`Chip` at `size="300"`/`"400"` render ~24–40px, below the
 * 44px guideline). Apply via `className`; the icon/label stays its normal visual
 * size — only the hit area grows — and desktop is unchanged (the rule is gated to
 * `@media (max-width: 750px)`, matching MOBILE_BREAKPOINT).
 */
export const MobileTouchTarget = style({
  '@media': {
    '(max-width: 750px)': {
      minWidth: toRem(44),
      minHeight: toRem(44),
    },
  },
});