import styled from 'styled-components';

import Box from '../Box';

const OverflowText = styled(Box)`
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
`;

const OverflowParagraph = styled(Box)`
  display: -webkit-box;
  -webkit-line-clamp: ${(props) => props.lines};
  -webkit-box-orient: vertical;
  overflow: hidden;
`;

const NormalText = styled(Box)`
  white-space: pre-line;
`;

export { OverflowText, OverflowParagraph, NormalText };