import { style } from '@vanilla-extract/css';
import { vars } from '#/styles/contract.css';
import { recipe } from '#/styles/recipe';
export const row = recipe(
{
base: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
},
defaultVariants: { size: 'sm' },
variants: {
size: {
lg: { gap: 5 },
sm: { gap: 3 },
},
},
},
{ debugId: 'row' },
);
export const pill = recipe(
{
base: {
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'row',
flexShrink: 0,
alignItems: 'center',
border: 'none',
borderRadius: 999,
background: 'none',
minWidth: 0,
maxWidth: '100%',
color: vars.palette.contrast_700,
cursor: 'pointer',
selectors: {
'&:active': { backgroundColor: vars.palette.contrast_50 },
'&:focus-visible': { outline: `2px solid ${vars.palette.primary_500}`, outlineOffset: 2 },
'&:hover': { backgroundColor: vars.palette.contrast_50 },
},
},
defaultVariants: { bg: true, size: 'sm' },
variants: {
bg: {
false: {},
true: { backgroundColor: vars.palette.contrast_25 },
},
size: {
lg: { gap: 5, padding: 5 },
sm: { gap: 3, padding: 3 },
},
},
},
{ debugId: 'pill' },
);
export const pillText = style({
paddingRight: 3,
});
export const followsYou = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 4,
backgroundColor: vars.palette.contrast_50,
paddingBlock: 3,
paddingInline: 6,
});