import { styled } from 'styleh-components'
import { CSS } from './typings'
export interface StyledCssProps {
  colSpan: CSS.ColSpan
  totalColumns: CSS.totalColumns
}

export const StyledCell = styled.div.attrs({
  className: 'cell',
})`
  ${(props: StyledCssProps) =>
    props.colSpan &&
    props.totalColumns &&
    styled.css`
      width: ${props.colSpan / props.totalColumns * 100}%;
    `}
  /* wish it had an else */
  ${(props: StyledCssProps) =>
    !(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.attrs({
  className: 'cell-inner'
})`
  width: 100%;
`