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

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

export const iconButton = recipe({
  base: [
    buttonReset,
    {
      padding: 0,
    },
  ],

  variants: {
    padding: {
      md: {
        padding: vars.components.iconButton.space['padding-md'],
      },
    },
    /**
     * Specifies how `padding` should behave.
     * @property  The event source of the callback.
     * - `outer` - adds a negative `margin` to imitate padding outside. Useful
     *             when you want button to have a padding to improve
     *             accessability but don't want it to affect a layout.
     * - `inner` - a default behavior of padding.
     */
    paddingMode: {
      outer: {
        margin: calc.negate(vars.components.iconButton.space['padding-md']),
      },
      inner: {},
    },
    color: {
      primary: {
        color: vars.colors.primary,
      },
      secondary: {
        color: vars.colors.secondary,
      },
      error: {
        color: vars.colors.error,
      },
      inherit: {
        color: 'inherit',
      },
    },
  },
});

export type IconButtonVariants = NonNullable<RecipeVariants<typeof iconButton>>;