import { CopyOutlineSm } from '../../icons/CopyOutlineSm';
import { styled } from '../styled';
import { Typography } from '../Typography';
import { copyTypographyClassnames } from './constants';
export const Wrapper = styled(Typography) `
  cursor: pointer;

  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  
  &:hover {
    text-decoration: underline;
    
    .${copyTypographyClassnames.showIconOnHover} {
      display: unset;
    }
  }
`;
export const TypographyWrapper = styled.div `
  overflow: hidden;
  
  &.${copyTypographyClassnames.overflow} {
    text-overflow: ellipsis;
    white-space: nowrap;
  }
`;
export const StyledCopyIcon = styled(CopyOutlineSm, {
    shouldForwardProp: (prop) => !['$copyPosition'].includes(prop),
}) `
  margin-right: ${({ $copyPosition, theme }) => $copyPosition === 'left' ? theme.spacing(1) : ''};
  margin-left: ${({ $copyPosition, theme }) => $copyPosition === 'right' ? theme.spacing(1) : ''};

  &.${copyTypographyClassnames.showIconOnHover} {
    display: none;
  }
`;
