import { getColor } from '@xstyled/system'

export default {
  border: (value: number | string, { props }: any) => {
    if (typeof value === 'number') return `${value}px solid`

    const values = value.split(' ')
    const [width, style = '', color] = values
    const colorValue = getColor(color)(props) ?? ''

    return `${width} ${style} ${colorValue}`
  },
  space: (value: string | number) => {
    return typeof value === 'string' ? value : `${value * 8}px`
  },
}
