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

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

export const fieldHint = recipe({
  base: {
    marginTop: vars.space[2],
  },

  variants: {
    preserveSpace: {
      // It preserves space for hint text even if it's empty.
      true: {
        '::after': {
          content: '\u200C',
          visibility: 'hidden',
        },
      },
    },
  },
});

export type FieldHintVariants = NonNullable<RecipeVariants<typeof fieldHint>>;