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

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

export const outer = style({
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'center',
	paddingBlock: space._2xl,
	paddingInline: space.xl,
	textAlign: 'center',
});

export const badge = style({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	marginBottom: space.md,
	borderRadius: 9999,
	backgroundColor: colors.contrast_950,
	width: 50,
	height: 50,
	color: colors.textInverted,
});

export const title = style({
	marginBottom: space.md,
});

export const message = style({
	marginBottom: space.xl,
});

export const details = style({
	alignSelf: 'stretch',
	marginBottom: space.xl,
	border: `1px solid ${colors.borderContrastMedium}`,
	borderRadius: borderRadius.xs,
	backgroundColor: colors.contrast_25,
	paddingBlock: space.sm,
	paddingInline: space.lg,
	overflow: 'hidden',
});

export const warningIcon = style({
	width: iconSize.xl,
	height: iconSize.xl,
});