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

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

const borderStyle = '1px solid currentColor';

export const item = recipe({
  base: {
    selectors: {
      '&:not(:last-of-type)': {
        marginBottom: vars.components.accordion.space.itemStripped,
      },
    },
  },

  variants: {
    bordered: {
      true: {
        padding: `${vars.components.accordion.space.itemBordered} 0`,
        borderTop: borderStyle,

        selectors: {
          '&:last-of-type': { borderBottom: borderStyle },
          '&:not(:last-of-type)': { marginBottom: 0 },
        },
      },
    },
  },
});

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