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

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

export const field = recipe({
  base: {
    display: 'flex',
    flexDirection: 'column',
    minWidth: 0,
  },

  variants: {
    invalid: {
      true: {
        color: vars.colors.error,
      },
    },
    width: {
      auto: {
        width: 'auto',
      },
      full: {
        width: '100%',
      },
      sm: {
        width: vars.components.button.sizes['width-sm'],
      },
      md: {
        width: vars.components.button.sizes['width-md'],
      },
      lg: {
        width: vars.components.button.sizes['width-lg'],
      },
      xl: {
        width: vars.components.button.sizes['width-xl'],
      },
      '2xl': {
        width: vars.components.button.sizes['width-2xl'],
      },
    },
  },
});

export type FieldVariants = NonNullable<RecipeVariants<typeof field>>;