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

import { vars } from '#/styles/contract.css';
import { recipe } from '#/styles/recipe';
import { iconSize } from '#/styles/tokens.css';

export const outer = recipe(
	{
		base: {
			boxSizing: 'border-box',
			borderWidth: 1,
			borderStyle: 'solid',
			borderRadius: 8,
			backgroundColor: vars.palette.contrast_0,
			padding: 12,
		},
		defaultVariants: { type: 'info' },
		variants: {
			type: {
				apology: { borderColor: vars.palette.contrast_300 },
				error: { borderColor: vars.palette.negative_500 },
				info: { borderColor: vars.palette.contrast_300 },
				tip: { borderColor: vars.palette.primary_500 },
				warning: { borderColor: vars.palette.yellow },
			},
		},
	},
	{ debugId: 'outer' },
);

export const row = style({
	display: 'flex',
	flexDirection: 'row',
	gap: 8,
	alignItems: 'flex-start',
});

const iconBase = style({
	flexShrink: 0,
	width: iconSize.lg,
	height: iconSize.lg,
});

export const iconWrap = styleVariants(
	{
		apology: vars.palette.contrast_700,
		error: vars.palette.negative_500,
		info: vars.palette.contrast_700,
		tip: vars.palette.primary_500,
		warning: vars.palette.yellow,
	},
	(color) => [iconBase, { color }],
);

export const content = style({
	display: 'flex',
	flex: 1,
	flexDirection: 'column',
	gap: 8,
	justifyContent: 'center',
	paddingRight: 12,
	minHeight: 20,
});