import { globalStyle, style } from '@vanilla-extract/css';
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';

import { textEllipsis, vars } from '../css';

const baseTag = style({
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  padding: `0.125rem ${vars.space[2]}`,

  fontSize: vars.fontSizes.caption,
  lineHeight: vars.lineHeights.sm,
});

export const tag = recipe({
  base: [textEllipsis, baseTag],

  variants: {
    color: {
      secondary: {
        color: vars.colors['secondary-text-strong'],
        backgroundColor: vars.colors.secondary,
      },
      error: {
        color: vars.colors['error-text-strong'],
        backgroundColor: vars.colors.error,
      },
    },
  },

  defaultVariants: {
    color: 'secondary',
  },
});

globalStyle(`${baseTag} > *:not(:last-child)`, {
  marginRight: vars.space[2],
});

export type TagVariants = NonNullable<RecipeVariants<typeof tag>>;