import { css } from 'styled-components';

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

export const query = Object.keys(screens).reduce((acc, label) => {
  acc[label] = `(min-width: ${screens[label] / 16}em)`;
  return acc;
}, {});

const mq = Object.keys(screens).reduce((acc, label) => {
  acc[label] = (...args) =>
    css`
      @media ${query[label]} {
        ${css(...args)};
      }
    `;

  return acc;
}, {});

export default mq;
