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

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

export const outer = style({
	display: 'flex',
	flexDirection: 'row',
	gap: 8,
	alignItems: 'center',
	backgroundColor: vars.palette.negative_200,
	padding: 8,
});

export const iconBox = style({
	display: 'flex',
	flexShrink: 0,
	alignItems: 'center',
	justifyContent: 'center',
	width: 24,
	height: 24,
});

export const message = style({
	flex: 1,
	paddingRight: 10,
	minWidth: 0,
});

export const retry = style({
	appearance: 'none',
	display: 'flex',
	flexShrink: 0,
	alignItems: 'center',
	justifyContent: 'center',
	border: 'none',
	background: 'none',
	padding: 0,
	width: 24,
	height: 24,
	cursor: 'pointer',
});

export const icon = style({
	width: iconSize.md,
	height: iconSize.md,
	color: vars.palette.white,
});