// Spacing in LUI now is all based in px values, we could redefine these in LUI now (in a more sensible reusable place)
// Needs to be compatable with Figma so can we even use rems here
/**
 * @property {string}  xxxs = 4px
 * @property {string}  xxs = 8px
 * @property {string}  xs = 12px
 * @property {string}  sm = 16px
 * @property {string}  md = 24px
 * @property {string}  lg = 32px
 * @property {string}  xl = 40px
 * @property {string}  xxl = 64px
 * @property {string}  xxxl = 80px
 */
export const Spacing = {
  xxxs: '0.25rem',
  xxs: '0.5rem',
  xs: '0.75rem',
  sm: '1rem',
  md: '1.5rem',
  lg: '2rem',
  xl: '2.5rem',
  xxl: '4rem',
  xxxl: '5rem',
};

export const Breakpoint = {
  xs: '35.9375rem',
  sm: '36rem',
  md: '48rem',
  lg: '62rem',
  xl: '75rem',
};

export const BreakpointMedia = {
  xs: `@media (max-width: ${Breakpoint.xs})`,
  sm: `@media (min-width: ${Breakpoint.sm})`,
  md: `@media (min-width: ${Breakpoint.md})`,
  lg: `@media (min-width: ${Breakpoint.lg})`,
  xl: `@media (min-width: ${Breakpoint.xl})`,
};

export const Gutters = {
  md: Spacing.md,
  sm: Spacing.sm,
};

export const LineHeight = {
  nospace: 1,
  heading: 1.2,
  body: 1.5,
};

export const baseFontSize = 16;

// Font size is kept in pixels but converted to rem when used
export const fontSize = {
  '1': 12,
  '2': 14,
  '3': 16,
  '4': 18,
  '5': 20,
  '6': 24,
  '7': 28,
  '8': 32,
  '9': 40,
  '10': 48,
};