import { pxToRem } from "../utils/pxToRem";

export const breakpoints = {
  s: 768,
  m: 1024,
  l: 1400,
};

export const mediaQueries: [string, string, string, string] = [
  // Mobile
  `(max-width: ${pxToRem(breakpoints.s - 1)})`,
  // Tablet
  `(min-width: ${pxToRem(breakpoints.s)}) and (max-width: ${pxToRem(breakpoints.m - 1)})`,
  // Laptop
  `(min-width: ${pxToRem(breakpoints.m)}) and (max-width: ${pxToRem(breakpoints.l - 1)})`,
  // Desktops
  `(min-width: ${pxToRem(breakpoints.l)})`,
];

export const media = {
  s: mediaQueries[0],
  m: mediaQueries[1],
  l: mediaQueries[2],
  xl: mediaQueries[3],
};