import { style } from '@vanilla-extract/css';

import { colors } from '#/styles/colors';
import { roundToPx } from '#/styles/round';
import { borderRadius, fontLeading, fontSize, space } from '#/styles/tokens.css';

const pill = style({
	display: 'inline-flex',
	flexShrink: 0,
	borderRadius: borderRadius.full,
	backgroundColor: colors.contrast_50,
	paddingInline: 5,
	lineHeight: roundToPx(`calc(${fontSize.xs} * ${fontLeading.xs})`),
	fontVariantNumeric: 'tabular-nums',
});

export const inline = style([
	pill,
	{
		verticalAlign: 'middle',
		marginInlineStart: space.xs,
	},
]);

export const block = style([
	pill,
	{
		alignSelf: 'flex-start',
	},
]);