import { style } from '@vanilla-extract/css';
import { vars } from '#/styles/contract.css';
import { roundToPx } from '#/styles/round';
import { fontLeading, fontSize } from '#/styles/tokens.css';
export const richText = style({
display: 'flex',
flexDirection: 'column',
});
export const showMoreRow = style({
alignSelf: 'flex-start',
fontSize: fontSize.md,
});
export const showMore = style({
border: 'none',
background: 'none',
padding: 0,
paddingBottom: 5,
textDecoration: 'none',
lineHeight: roundToPx(`calc(${fontSize.md} * ${fontLeading.md})`),
color: vars.text.link,
fontFamily: 'inherit',
fontSize: fontSize.md,
cursor: 'pointer',
selectors: {
'&:focus-visible': { outline: 'none', textDecoration: 'underline' },
'&:hover': { textDecoration: 'underline' },
},
});