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

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

const areas = {
	arrow1: generateIdentifier('arrow1'),
	arrow2: generateIdentifier('arrow2'),
	blueskyCircle: generateIdentifier('bluesky_circle'),
	blueskyLabel: generateIdentifier('bluesky_label'),
	verifiedCircle: generateIdentifier('verified_circle'),
	verifiedLabel: generateIdentifier('verified_label'),
	verifierCircle: generateIdentifier('verifier_circle'),
	verifierLabel: generateIdentifier('verifier_label'),
};

export const arrow = style({
	boxSizing: 'border-box',
	display: 'flex',
	flexShrink: 0,
	alignItems: 'center',
	justifyContent: 'center',
	color: colors.textContrastLow,
});

export const label = style({
	textAlign: 'center',
	color: colors.textContrastMedium,
	fontSize: 11,
	fontWeight: 'bold',
});

export const logoCircle = style({
	boxSizing: 'border-box',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	borderRadius: '50%',
	backgroundColor: colors.primary_500,
	width: 56,
	height: 56,
});

export const arrow1 = style([
	arrow,
	{
		gridArea: areas.arrow1,
		placeSelf: 'center',
	},
]);

export const arrow2 = style([
	arrow,
	{
		gridArea: areas.arrow2,
		placeSelf: 'center',
	},
]);

export const blueskyCircleClass = style([
	logoCircle,
	{
		gridArea: areas.blueskyCircle,
		placeSelf: 'center',
	},
]);

export const blueskyLabelClass = style([
	label,
	{
		gridArea: areas.blueskyLabel,
		placeSelf: 'center',
	},
]);

export const illustrationInner = style({
	boxSizing: 'border-box',
	display: 'grid',
	gridTemplateAreas: `
		"${areas.blueskyCircle} ${areas.arrow1} ${areas.verifierCircle} ${areas.arrow2} ${areas.verifiedCircle}"
		"${areas.blueskyLabel}  .               ${areas.verifierLabel}  .               ${areas.verifiedLabel}"
	`,
	gridTemplateColumns: '1fr auto 1fr auto 1fr',
	rowGap: space.sm,
	alignItems: 'center',
	justifyContent: 'center',
	width: '100%',
	maxWidth: 350,
});

export const imageBox = style({
	boxSizing: 'border-box',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	borderRadius: borderRadius.md,
	background: colors.contrast_25,
	padding: `${space.xl} ${space.md}`,
	width: '100%',
});

export const inlineCheck = style({
	width: 14,
	height: 14,
	color: colors.primary_500,
	display: 'inline-flex',
	position: 'relative',
	top: -3,
	verticalAlign: 'middle',
});

export const verifiedCircleClass = style({
	gridArea: areas.verifiedCircle,
	placeSelf: 'center',
});

export const verifiedLabelClass = style([
	label,
	{
		gridArea: areas.verifiedLabel,
		placeSelf: 'center',
	},
]);

export const verifierCircleClass = style({
	gridArea: areas.verifierCircle,
	placeSelf: 'center',
});

export const verifierLabelClass = style([
	label,
	{
		gridArea: areas.verifierLabel,
		placeSelf: 'center',
	},
]);

export const checkIcon = style({
	width: 56,
	height: 56,
	color: colors.primary_500,
});

export const logo = style({
	width: 32,
	height: 'auto',
	color: '#fff',
});