export function rem(px: number) {
  return `${px / 16}rem`
}

/**
 * spacing properties
 */
export const spacing = `
  --spacing-smallest: ${rem(1)};
  --spacing-very-small: ${rem(2)};
  --spacing-extra-small: ${rem(4)};
  --spacing-small: ${rem(8)};
  --spacing-medium: ${rem(16)};
  --spacing-big: ${rem(24)};
  --spacing2x: ${rem(32)};
  --spacing3x: ${rem(48)};
  --spacing4x: ${rem(64)};
  --spacing5x: ${rem(80)};
  --spacing6x: ${rem(96)};
  --spacing7x: ${rem(112)};
  --spacing8x: ${rem(128)};
`