import { style } from '@vanilla-extract/css';
import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';

const addReactionBase = {
  padding: `${toRem(2)} ${config.space.S200}`,
  backgroundColor: color.SurfaceVariant.Container,
  border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
  borderRadius: config.radii.R300,
  cursor: 'pointer',
  selectors: {
    '&:hover, &:focus-visible': {
      backgroundColor: color.SurfaceVariant.ContainerHover,
      opacity: 1,
    },
    '&:active': {
      backgroundColor: color.SurfaceVariant.ContainerActive,
    },
  },
} as const;

export const AddReactionChip = style([
  DefaultReset,
  FocusOutline,
  {
    ...addReactionBase,
    opacity: 0.6,
  },
]);

export const AddReactionGhost = style([
  DefaultReset,
  FocusOutline,
  {
    ...addReactionBase,
    position: 'absolute',
    left: config.space.S400,
    bottom: config.space.S100,
    opacity: 0.5,
    zIndex: 1,
  },
]);