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

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

export const button = recipe({
  base: [
    buttonReset,
    {
      fontWeight: vars.fontWeights.body1,
    },
  ],

  variants: {
    width: {
      auto: {
        width: 'auto',
      },
      full: {
        width: '100%',
      },
    },
  },
});

export type ButtonVariants = NonNullable<RecipeVariants<typeof button>>;

export const text = style([textEllipsis]);