25 lines
683 B
TypeScript
25 lines
683 B
TypeScript
|
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)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|