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

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

export const group = recipe({
  base: {
    display: 'flex',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    gap: vars.space[5],

    '@media': {
      [breakpoints.sm]: {
        gap: vars.space[3],
      },
    },
  },

  variants: {
    direction: {
      row: {
        flexDirection: 'row',

        '@media': {
          [breakpoints.sm]: {
            flexDirection: 'column',
          },
        },
      },
      column: {
        flexDirection: 'column',
      },
    },
  },
});

export type Variants = NonNullable<RecipeVariants<typeof group>>;