import styled from 'styled-components';
import { REM_UNIT_XSM, REM_UNIT_SM, REM_UNIT_LG, SONIC_SILVER } from '@vincent_za/styles';

export const Table = styled.table`
  display: ${props => props.isHidden ? 'none' : 'table'};
`;

export const Row = styled.tr``;

export const Cell = styled.td`
  color: ${SONIC_SILVER};
  padding: ${REM_UNIT_XSM} ${REM_UNIT_SM} ${REM_UNIT_XSM} ${REM_UNIT_LG};
  text-align: ${props => props.isRight ? 'right' : 'left'};

  ${props => props.isValue && `
    padding-right: ${REM_UNIT_LG};
    padding-left: ${REM_UNIT_SM};
  `};
`;
