import { CopyTypography } from '../../CopyTypography';
import { styled } from '../../styled';
import { Typography } from '../../Typography';
export const StyledTypography = styled(Typography, {
    shouldForwardProp: (prop) => !['$canCopy', '$leader', '$direction'].includes(prop),
}) `
  cursor: ${({ $canCopy }) => ($canCopy ? 'pointer' : 'default')};

  overflow: hidden;

  hyphens: auto;
  text-align: ${({ $leader }) => ($leader ? 'right' : 'left')};
  overflow-wrap: break-word;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    text-align: ${({ $direction }) => $direction !== 'row' ? 'left' : 'right'};
  }

  &:hover {
    text-decoration: ${({ $canCopy }) => ($canCopy ? 'underline' : 'none')};
  }
`;
export const StyledCopyTypography = styled(CopyTypography, {
    shouldForwardProp: (prop) => !['$leader', '$direction'].includes(prop),
}) `
  hyphens: auto;
  text-align: ${({ $leader }) => ($leader ? 'right' : 'left')};
  overflow-wrap: break-word;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    text-align: ${({ $direction }) => $direction !== 'row' ? 'left' : 'right'};
  }
`;
export const Wrapper = styled.dd `
  overflow: hidden;

  margin: 0;
`;
