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

import { colors } from '#/styles/colors';
import { recipe } from '#/styles/recipe';
import { borderRadius, iconSize, space } from '#/styles/tokens.css';

export const root = recipe(
	{
		base: {
			backgroundColor: colors.contrast_25,
			padding: space.sm,
		},
		variants: {
			topBorder: {
				true: {
					borderTop: `1px solid ${colors.borderContrastLow}`,
				},
			},
		},
	},
	{ debugId: 'root' },
);

export const card = style({
	display: 'flex',
	flexDirection: 'row',
	gap: space.sm,
	border: `1px solid ${colors.borderContrastLow}`,
	borderRadius: borderRadius.sm,
	backgroundColor: colors.bg,
	padding: space.md,
});

export const icon = style({
	width: iconSize.md,
	height: iconSize.md,
	color: colors.contrast_500,
	margin: (20 - 18) / 2,
});

export const text = style({
	flex: 1,
	minWidth: 0,
});