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

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

const DIALOG_PADDING = space.lg;

export const popup = style({
	maxWidth: 500,
	height: 600,
});

export const header = style({
	boxSizing: 'border-box',
	display: 'flex',
	flexShrink: 0,
	alignItems: 'center',
	justifyContent: 'space-between',
	borderBottom: `1px solid ${colors.borderContrastLow}`,
	backgroundColor: vars.palette.contrast_0,
	padding: DIALOG_PADDING,
});

export const title = style({
	display: 'flex',
	minWidth: 0,
});

export const closeButton = style({
	margin: -space.sm,
});

export const item = recipe(
	{
		base: {
			boxSizing: 'border-box',
			display: 'flex',
			gap: space.md,
			alignItems: 'center',
			justifyContent: 'space-between',
			paddingBlock: space.md,
			paddingInline: DIALOG_PADDING,
		},
		variants: {
			topBorder: {
				true: {
					borderTop: `1px solid ${colors.borderContrastLow}`,
				},
			},
		},
	},
	{ debugId: 'starterPackItem' },
);

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

export const itemMeta = style({
	display: 'flex',
	alignItems: 'center',
	marginTop: space.xs,
});

export const moreCount = style({
	marginLeft: space.xs,
});

export const loading = style({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	paddingBlock: space._5xl,
});

export const empty = style({
	display: 'flex',
	flexDirection: 'column',
	gap: space.lg,
	alignItems: 'center',
	paddingTop: space._5xl,
	paddingInline: space.xl,
});

export const emptyText = style({
	display: 'flex',
	flexDirection: 'column',
	gap: space.sm,
	alignItems: 'center',
	maxWidth: 260,
});

export const starterPackIcon = style({
	width: iconSize._4xl,
	height: iconSize._4xl,
	color: colors.contrast_200,
});