import { styled, Styleh, StyledFunction } from 'uxui-modules/view-container'
// import styled, { ThemedStyledInterface, StyledFunction } from 'styled-components'

interface Props {
  colSpan?: number
}

// https://github.com/jacob-ebey/styled-components-ts
// https://github.com/styled-components/styled-components/issues/630
const div: StyledFunction<Props> = styled.div
const NoHighlight = div `
${props =>
    props.colSpan &&
  props.totalColumns &&
  styled.css `
    width: ${props.colSpan / props.totalColumns * 100}%;
  `}
`

const LongerButEasy = styled.div `
  ${(props: Props) =>
    props.colSpan &&
    props.totalColumns &&
    styled.css `
      width: ${props.colSpan / props.totalColumns * 100}%;
    `};
`