import { styled } from 'view-container'
import { StyledBaseText } from 'atoms/Text/styled'

const ExpandableContent = styled.div``

const MoreLabel = StyledBaseText.withComponent('span')
const MoreLabelElement = styled.withComponent(MoreLabel) `
  color: blue;
  margin-left: 8px;
`

const TextEllipsisWrapper = styled.section`
  position: relative;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis
  -webkit-box-orient: vertical;

  ${props =>
    props.lines && !props.trimWhitespace
    && styled.css`
      -webkit-line-clamp: ${props.lines};
      `}
  ${props =>
    props.trimWhitespace && styled.css`
        white-space: nowrap;
      `}
  ${props =>
    props.width &&
    styled.css`
      width: ${props.width + 'px'};
  `}
`

export { TextEllipsisWrapper, ExpandableContent, MoreLabelElement }