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

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

export const icon = recipe({
  base: {
    display: 'inline-flex',
    flexShrink: 0,
    width: '1em',
    height: '1em',
  },

  variants: {
    size: {
      sm: {
        fontSize: vars.components.icon.fontSizes.sm,
      },
      md: {
        fontSize: vars.components.icon.fontSizes.md,
      },
      lg: {
        fontSize: vars.components.icon.fontSizes.lg,
      },
    },
  },
});

export type IconVariants = NonNullable<RecipeVariants<typeof icon>>;