const screens = {
  tablet: 768,
  laptop: 1024,
  laptopHD: 1366,
  desktop: 1680,
  extra: 2560,
};

const threshold = 0;

export function min(breakpoint: keyof typeof screens) {
  return `@media (min-width: calc(${screens[breakpoint]}px + ${threshold}px))`;
}
export function max(breakpoint: keyof typeof screens) {
  return `@media (max-width: calc(${screens[breakpoint]}px))`;
}

export const mediaQuery = {
  breakpoints: Object.values(screens).map((value) => `${value + threshold}px`),
};