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

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

export const icon = style({
  fontSize: '0.75em',
});

export const checkbox = style([
  buttonReset,
  {
    border: `1px solid ${vars.colors.secondary}`,
    color: vars.colors['secondary-text-strong'],
    borderRadius: '20%',
    width: '1em',
    height: '1em',
    marginRight: '1em',

    selectors: {
      '&[data-state="checked"]': {
        backgroundColor: vars.colors.secondary,
      },
      '&:not([data-disabled],[data-state="checked"]):hover': {
        backgroundColor: vars.colors.gray400,
      },
    },
  },
]);

export const container = recipe({
  base: {
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
    userSelect: 'none',
    fontSize: vars.fontSizes.body1,
  },

  variants: {
    disabled: {
      true: {
        opacity: 0.5,
        cursor: 'not-allowed',
      },
    },
  },
});

export type ContainerVariants = NonNullable<RecipeVariants<typeof container>>;