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

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

export const chip = recipe({
  base: {
    border: '2px solid transparent',
    position: 'relative',
    display: 'inline-flex',
    alignItems: 'center',
    padding: `${vars.components.chip.space.paddingY} ${vars.components.chip.space.paddingX}`,
    fontSize: vars.components.chip.fontSizes.base,
    fontWeight: vars.fontWeights.bold,
    color: vars.colors['base-text-strong'],
    userSelect: 'none',

    '::before': {
      content: '',
      display: 'block',
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      border: '1px solid currentColor',
      pointerEvents: 'none',
    },
  },

  variants: {
    disabled: {
      true: {
        color: vars.colors['base-text-subtle'],
      },
    },
    border: {
      wide: {
        '::before': {
          borderWidth: '2px',
        },
      },
      thin: {},
      none: {
        borderWidth: 0,
        '::before': {
          borderWidth: 0,
        },
      },
    },
    customHover: {
      true: {},
    },
  },

  compoundVariants: [
    {
      variants: { disabled: false, customHover: false },
      style: {
        selectors: {
          '&:hover': { color: vars.colors['base-text-weak'] },
        },
      },
    },
  ],

  defaultVariants: {
    disabled: false,
    customHover: false,
    border: 'thin',
  },
});

export type ChipVariants = NonNullable<RecipeVariants<typeof chip>>;