import styled from 'styled-components';
import { getSpacing, getFontSize } from '../../../../utils/index.js';

const ListItemContentWrapper = styled.div `
  padding-inline: ${getSpacing('s02')};
  flex: 1 2 60%;
  flex-direction: column;
`;
const ListItemPrimaryText = styled.p `
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
`;
const ListItemSecondaryText = styled(ListItemPrimaryText) `
  ${getFontSize('size14')};
  -webkit-line-clamp: 2;
`;

export { ListItemContentWrapper, ListItemPrimaryText, ListItemSecondaryText };
