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

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

const iconBase = style({ color: vars.palette.contrast_400 });

export const icon = styleVariants(iconSize, (size) => [iconBase, { width: size, height: size }]);

export const fallbackIcon = style({ color: vars.palette.contrast_700 });

export const buttonWrap = style({
	display: 'flex',
	alignSelf: 'center',
	flexShrink: 1,
	marginTop: 24,
});

export const iconBox = style({
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'center',
	alignSelf: 'center',
	justifyContent: 'center',
	width: 64,
	height: 64,
	borderRadius: 999,
});

export const message = style({
	alignSelf: 'center',
	marginTop: 4,
});

export const root = style({
	display: 'flex',
	flexDirection: 'column',
	boxSizing: 'border-box',
	paddingBlock: 50,
	paddingInline: 24,
});