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

const mobileFullscreen = {
  minWidth: '100vw',
  minHeight: '100vh',
  width: '100vw',
  height: '100vh',
  borderRadius: 0,
} as const;

export const ModalWide = style({
  minWidth: '85vw',
  minHeight: '90vh',
  '@media': {
    // Fill the phone screen instead of floating as an 85vw card with margins.
    '(max-width: 750px)': mobileFullscreen,
  },
});

// Mobile-only full-screen: no desktop effect (keeps the modal's normal size),
// but fills the viewport on phones. For dialogs that should stay a small card on
// desktop but go edge-to-edge on mobile (e.g. the avatar viewer).
export const ModalMobileFull = style({
  '@media': {
    '(max-width: 750px)': mobileFullscreen,
  },
});