import { createMedia } from '@artsy/fresnel';

const AppMedia = createMedia({
  breakpoints: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
    xxl: 1600,
  },
});

// Generate CSS to be injected into the head
export const mediaStyle = AppMedia.createMediaStyle();
export const { Media, MediaContextProvider } = AppMedia;

export const xs = { maxWidth: 576 };
export const sm = { minWidth: 576 };
export const md = { minWidth: 768 };
export const lg = { minWidth: 992 };
export const xl = { minWidth: 1200 };
export const xxl = { minWidth: 1600 };

export const xsExact = xs;
export const smExact = { minWidth: 576, maxWidth: 768 };
export const mdExact = { minWidth: 768, maxWidth: 992 };
export const lgExact = { minWidth: 992, maxWidth: 1200 };
export const xlExact = { minWidth: 1200, maxWidth: 1600 };
export const xxlExact = xxl;