import styled, { css } from 'styled-components';

interface Props {
  display: string;
}

export const underlinePointlessStyle = css`
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(to right, ${props => props.theme.default.colors.black} 33%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 4px 2px;
  background-repeat: repeat-x;
`;

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const Tooltip = styled(({ display, ...rest }) => <div {...rest} />)<Props>`
  cursor: pointer;
  display: ${props => props.display};

  u {
    margin-left: 5px;
    ${underlinePointlessStyle}

    span {
      white-space: nowrap;
    }
    
    strong {
      font-size: ${props => props.theme.default.fonts.sizes[3]};
    }
  }
`;