import { style } from '@vanilla-extract/css';
import { colorMix } from '#/styles/color-mix';
import { colors } from '#/styles/colors';
import { vars } from '#/styles/contract.css';
import { space } from '#/styles/tokens.css';
export const outer = style({
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
paddingTop: 12,
paddingRight: 16,
paddingLeft: 16,
cursor: 'pointer',
selectors: {
'&:hover': {
backgroundColor: colorMix(colors.contrast_50, vars.opacity.hover),
},
},
});
export const outerBorder = style({
borderTopWidth: 1,
borderTopStyle: 'solid',
borderTopColor: colors.borderContrastLow,
});
export const metaSpacing = style({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: space.lg,
paddingBottom: 4,
});
export const repliedTo = style({
paddingBottom: 4,
});