import { recipe } from '@vanilla-extract/recipes';
import { config } from 'folds';

export const Icon = recipe({
  base: {
    display: 'block',
    flexShrink: 0,
  },
  variants: {
    size: {
      '50': { width: config.size.X50, height: config.size.X50 },
      '100': { width: config.size.X100, height: config.size.X100 },
      '200': { width: config.size.X200, height: config.size.X200 },
      '300': { width: config.size.X300, height: config.size.X300 },
      '400': { width: config.size.X400, height: config.size.X400 },
      '500': { width: config.size.X500, height: config.size.X500 },
      '600': { width: config.size.X600, height: config.size.X600 },
      Inherit: { width: '1em', height: '1em' },
    },
  },
  defaultVariants: {
    size: '400',
  },
});