import { css } from '@emotion/react';
import { generateTextColors } from '../generators';

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

  color: generateTextColors(),

  transform: {
    uppercase: css`
      text-transform: uppercase;
    `,
    lowercase: css`
      text-transform: lowercase;
    `,
    capitalize: css`
      text-transform: capitalize;
    `,
  },

  decoration: {
    underline: css`
      text-decoration: underline;
    `,
    none: css`
      text-decoration: none;
    `,
  },

  align: {
    left: css`
      text-align: left;
    `,
    center: css`
      text-align: center;
    `,
    right: css`
      text-align: right;
    `,
  },
};