/* eslint-disable canonical/sort-keys */
const threshold = 0;

const screens = {
  tablet: 768,
  laptop: 1024,
  'laptop-m': 1280,
  desktop: 1680,
  'desktop-xl': 1921,
};

const devices = Object.values(screens);

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

const theme = {
  breakpoints,
};

module.exports = {
  threshold,
  screens,
  devices,
  breakpoints,
  theme,
};