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

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

export const frame = recipe(
	{
		base: {
			boxSizing: 'border-box',
			display: 'flex',
			flexDirection: 'column',
			alignItems: 'center',
			paddingTop: 30,
			paddingBottom: space.lg,
			width: '100%',
			minHeight: 180,
		},
		defaultVariants: { border: true },
		variants: {
			border: {
				false: {},
				true: {
					borderTopWidth: 1,
					borderTopStyle: 'solid',
					borderTopColor: colors.borderContrastLow,
				},
			},
		},
	},
	{ debugId: 'frame' },
);

export const errorOuter = style({
	boxSizing: 'border-box',
	paddingRight: space.lg,
	paddingLeft: space.lg,
	width: '100%',
});

export const errorRow = style({
	display: 'flex',
	flexDirection: 'row',
	gap: space.md,
	alignItems: 'center',
	borderRadius: borderRadius.sm,
	backgroundColor: colors.contrast_25,
	padding: space.md,
});

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