import { styled } from '../stitches.config'

const Text = styled('span', {
  fontFamily: '$body',
  lineHeight: '$body',
  color: '$text',
  variants: {
    small: {
      true: {
        fontSize: '$xs'
      }
    },
    muted: {
      true: {
        color: '$mauve9'
      }
    },
    error: {
      true: {
        color: '$error'
      }
    },
    warning: {
      true: {
        color: '$warning'
      }
    },
    monospace: {
      true: {
        fontFamily: '$monospace'
      }
    },
    block: {
      true: {
        display: 'block'
      }
    }
  }
})

export default Text