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

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

export const item = recipe({
  base: {
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center',
    fontWeight: vars.fontWeights.normal,

    selectors: {
      '& + &': {
        marginTop: vars.components.menu.space.itemsGap,
      },
    },
  },

  variants: {
    active: {
      true: {
        fontWeight: vars.fontWeights.bold,
      },
    },
  },
});

export type ItemVariants = NonNullable<RecipeVariants<typeof item>>;