import { style } from '@vanilla-extract/css';
import { config } from 'folds';

// Hover/focus emphasis driven by CSS rather than JS style mutation, matching
// how every other interactive element in the app handles hover state.
export const ReceiptTrigger = style({
  background: 'none',
  border: 'none',
  cursor: 'pointer',
  padding: 0,
  marginLeft: 'auto',
  marginTop: config.space.S100,
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S100,
  opacity: config.opacity.P500,
  transition: 'opacity 150ms ease-in-out, transform 150ms ease-in-out',
  selectors: {
    '&:hover, &:focus-visible': {
      opacity: 1,
      transform: 'scale(1.04)',
    },
  },
});