const depth = {
  1: {
    boxShadow: '0px 8px 16px -8px rgba(0, 0, 0, 0.16)' as '0px 8px 16px -8px rgba(0, 0, 0, 0.16)',
  },
  2: {
    boxShadow: '0px 16px 24px -8px rgba(0, 0, 0, 0.16)' as '0px 16px 24px -8px rgba(0, 0, 0, 0.16)',
  },
  3: {
    boxShadow: '0px 24px 32px -8px rgba(0, 0, 0, 0.12)' as '0px 24px 32px -8px rgba(0, 0, 0, 0.12)',
  },
  4: {
    boxShadow: '0px 32px 40px -8px rgba(0, 0, 0, 0.16)' as '0px 32px 40px -8px rgba(0, 0, 0, 0.16)',
  },
}

export type CanvasDepthValue = typeof depth[1] | typeof depth[2] | typeof depth[3] | typeof depth[4]

export type CanvasDepth = typeof depth

export default depth