export type Breakpoints =
  | 'mobileSmall'
  | 'mobile'
  | 'mobileLandscape'
  | 'tablet'
  | 'desktop'
  | 'desktopWide'

export const breakpoints: Record<Breakpoints, number> = {
  // Should have unique values so that the useBreakpointValue
  // hook works as expected
  mobileSmall: 300,
  mobile: 390,
  mobileLandscape: 640,
  tablet: 768,
  desktop: 1024,
  desktopWide: 1280,
};

export const media = {
  // Order is important.
  mobileSmall: {
    maxWidth: breakpoints.mobileSmall,
  },
  gtMobileSmall: {
    minWidth: breakpoints.mobileSmall + 1,
  },
  mobile: {
    maxWidth: breakpoints.mobile,
  },
  gtMobile: {
    minWidth: breakpoints.mobile + 1,
  },
  mobileLandscape: {
    maxWidth: breakpoints.mobileLandscape,
  },
  gtMobileLandscape: {
    minWidth: breakpoints.mobileLandscape + 1,
  },
  tablet: {
    maxWidth: breakpoints.tablet,
  },
  gtTablet: {
    minWidth: breakpoints.tablet + 1,
  },
  desktop: {
    maxWidth: breakpoints.desktop,
  },
  gtDesktop: {
    minWidth: breakpoints.desktop + 1,
  },
  desktopWide: {
    maxWidth: breakpoints.desktopWide,
  },
  gtDesktopWide: {
    minWidth: breakpoints.desktopWide + 1,
  },

  // Other
  short: { maxHeight: 820 },
  tall: { minHeight: 820 },
  hoverNone: { hover: 'none' },
  pointerCoarse: { pointer: 'coarse' },
};