import { style } from '@vanilla-extract/css';
import { colors } from '#/styles/colors';
import { recipe } from '#/styles/recipe';
import { space } from '#/styles/tokens.css';
// stable base class the `text` hover selector can target; the recipe composes it and layers the gap on top.
const linkBase = style({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
maxWidth: '100%',
textDecoration: 'none',
cursor: 'pointer',
selectors: {
'&:active': { opacity: 0.5 },
},
});
export const link = recipe(
{
base: [linkBase],
defaultVariants: { variant: 'default' },
variants: {
variant: {
compact: { gap: space.sm },
default: { gap: space.md },
},
},
},
{ debugId: 'knownFollowersLink' },
);
export const text = style({
flexShrink: 1,
selectors: {
[`${linkBase}:hover &`]: {
textDecorationColor: colors.textContrastMedium,
textDecorationLine: 'underline',
},
},
});