import styled, { css } from 'styled-components';
import { convertToTransientProps, getFontSize, getColorAlias } from '../../../../utils/index.js';
import { ListItemSecondaryText } from '../ListItemContent/styles.js';

const sharedSuffixPositioning = css `
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
`;
const ListItemMetaText = styled(ListItemSecondaryText).withConfig({
    shouldForwardProp: convertToTransientProps([
        'variant',
    ]),
}) `
  ${sharedSuffixPositioning}
  align-self: ${({ variant }) => variant === 'multi-line' ? 'flex-start' : 'center'};
  ${getFontSize('size14')};
`;
const ListItemSuffixWrapper = styled.div `
  ${sharedSuffixPositioning}
  align-self: center;

  & > svg {
    ${getFontSize('size24')};
    fill: ${getColorAlias('interactivePrimary')};
  }
`;

export { ListItemMetaText, ListItemSuffixWrapper };
