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

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

const selectedState = {
  color: vars.colors['base-text-strong'],
  fontWeight: vars.fontWeights.bold,
  borderBottomColor: 'currentColor',
};

export const switchElement = recipe({
  base: {
    color: vars.colors['base-text-subtle'],
    borderBottom: '0.15em solid transparent',
    selectors: {
      '&:not(:last-of-type)': {
        marginRight: '2em',
      },
    },
  },

  variants: {
    type: {
      off: {
        selectors: {
          '[data-state="unchecked"] &': selectedState,
        },
      },
      on: {
        selectors: {
          '[data-state="checked"] &': selectedState,
        },
      },
    },
  },
});

export type SwitchElementVariants = NonNullable<
  RecipeVariants<typeof switchElement>
>;