export const pxToRem = (size: number) => {
  return (size / 16) * 1 + 'rem'
}

export const fontName = 'ManRope'
export const alternativeFont = 'ManRope'

export const gutter = pxToRem(8) //needs to be in this file

export const mobileMedia = '360px' //mobile media value
export const mobile_width = '375' //container size of design on mobile
export const tablet_width = '768' //container size of design on tablet
export const responsiveMedia = '980px' //mobile media value for bootstrap
export const desktop_width = '1360' //container size of design on desktop

export const easeOutExpo = 'cubic-bezier(.32,.94,.6,1);'

export const colors: { [key: string]: string } = {
  // Defaults
  white: '#fff',
  black: '#000',

  // Specific
  primary70: '#212121',

  secondary50: '#ff7d00',

  // Feedback
  warning: '#ffbd00',
  success: '#299c46',
  error: '#f94144',

  // Gray
  gray20: '#eeeeee',
  gray30: '#e0e0e0',
  gray50: '#9E9E9E',
  gray70: '#707070',
  gray80: '#424242',
  gray90: '#292929',
}

export const spaces = {
  0: '0',
  1: pxToRem(4),
  2: pxToRem(8),
  3: pxToRem(12),
  4: pxToRem(20),
  5: pxToRem(28),
  6: pxToRem(36),
  7: pxToRem(48),
  8: pxToRem(64),
  9: pxToRem(88),
  10: pxToRem(120)
}
export const spacesNegative = {
  0: '0',
  1: pxToRem(-4),
  2: pxToRem(-8),
  3: pxToRem(-12),
  4: pxToRem(-20),
  5: pxToRem(-28),
  6: pxToRem(-36),
  7: pxToRem(-48),
  8: pxToRem(-64),
  9: pxToRem(-88),
  10: pxToRem(-120)
}

// export const typography = {
//   'h1': pxToRem(44),
//   'h2': pxToRem(36),
//   'h3': pxToRem(28),
//   'h4': pxToRem(18),
//   'h5': '18px',
//   'h6': '14px',
//   'texts': '15px',
//   'captions': '12px',
// }

//if responsive is not needed for a size just set the size as px instead of rem
export const typography = {
  display: {
    size: pxToRem(68),
    sizeMob: pxToRem(48),
    height: 1.4
  },
  h1: {
    size: pxToRem(48),
    sizeMob: pxToRem(40),
    height: 1.2
  },
  h2: {
    size: pxToRem(40),
    sizeMob: pxToRem(32),
    height: 1.2
  },
  h3: {
    size: pxToRem(32),
    sizeMob: pxToRem(28),
    height: 1.4
  },
  h4: {
    size: pxToRem(28),
    sizeMob: pxToRem(24),
    height: 1.45
  },
  h5: {
    size: pxToRem(24),
    sizeMob: pxToRem(20),
    height: 1.4
  },
  h6: {
    size: pxToRem(20),
    sizeMob: pxToRem(16),
    height: 1.45
  },
  texts: {
    size: pxToRem(16),
    sizeMob: pxToRem(14),
    height: 1.5
  },
  captions: {
    size: '12px',
    height: 1.6
  }
}

export const radius = {
  sm: '6px',
  md: '12px',
  lg: '24px'
}
export const shadows = {
  sm: '10px 20px 20px rgba(0, 78, 210, 0.03)',
  md: '10px 30px 30px rgba(0, 78, 210, 0.05)',
  lg: '10px 40px 40px rgba(0, 78, 210, 0.07)'
}

export const borderShapes = {
  hexagon: `${radius.sm} ${radius.md} ${radius.md} ${radius.md}`
}

export const zIndexes = {
  progress: '200',
  modal: '100',
  content: '99',
  preloader: '96',
  linker: '95'
}
export const grid_conf = {
  gridSize: 12,
  gutter: 8,
  mediaQuery: 'only screen',
  container: {
    $sm: '960px',
    $md: '1140px',
    $lg: '1320px',
    $xl: '1560px',
    $xxl: '1720px'
  },
  breakpoints: {
    $xs: '',
    $sm: '576px',
    $md: '768px',
    $lg: '980px',
    $xl: '1280px'
  }
}