import { css } from '@emotion/core';
import { themeGet } from '@styled-system/theme-get';

export const ellipsis = css`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

export const secondaryButtonDefault = (props: { theme: any }) => css`
  font-family: ${themeGet('fontFamily.sans-serif')(props)};
  font-size: ${themeGet('fontSizes.text-s')(props)};
  outline: 0;
  transition: background-color 50ms;
  border-radius: ${themeGet('radii.radius-1')(props)};
  border: 0;
  cursor: pointer;
  color: ${themeGet('colors.white')(props)};
  text-align: left;
  margin-left: ${themeGet('space.2')(props)};
  margin-right: ${themeGet('space.2')(props)};
  margin-top: ${themeGet('space.1')(props)};
`;