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

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

export const separator = recipe({
  base: {
    border: `0 solid ${vars.components.separator.colors.base}`,
    borderWidth: `0 0 ${vars.components.separator.borderWidths.base}`,
  },

  variants: {
    spacing: {
      none: {
        margin: 0,
      },
      md: {
        margin: `${vars.components.separator.space.md} 0`,
      },
      lg: {
        margin: `${vars.components.separator.space.lg} 0`,
      },
      xl: {
        margin: `${vars.components.separator.space.xl} 0`,
      },
    },
  },
});

export type SeparatorVariants = NonNullable<RecipeVariants<typeof separator>>;