import { styled, Styleh } from 'view-container'

export const StyledCell = styled.div.attrs({
  className: 'cell',
})`
  ${props =>
    props.colSpan &&
    props.totalColumns &&
    styled.css`
      width: ${props.colSpan / props.totalColumns * 100}%;
    `}
  /* wish it had an else */
  ${props =>
    !(props.colSpan && props.totalColumns) &&
    styled.css`
      flex: 1;
    `}

  display: inline-flex;
  position: relative;
  padding: $spacing-small;
  padding-bottom: $spacing-small;
`

export const StyledInnerCell = styled.div.className('cell-inner')`
  width: 100%;
`