import { css } from 'styled-components'

export type CSSPositionArgs = {
  position: 'absolute' | 'fixed' | 'relative'
  top?: number | string
  bottom?: number | string
  left?: number | string
  right?: number | string
  zIndex?: number
}
export const CSSPosition = ({
  position,
  top,
  bottom,
  left,
  right,
  zIndex,
}: CSSPositionArgs) => css`
  ${position && `position: ${position};`};
  ${(top || top == 0) && `top: ${top};`};
  ${(bottom || bottom == 0) && `bottom: ${bottom};`};
  ${(left || left == 0) && `left: ${left};`};
  ${(right || right == 0) && `right: ${right};`};
  ${zIndex && `z-index: ${zIndex};`};
`