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

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

export const sizeVar = createVar();

export const stackOrder = createVar();

const STROKE = 2;

const radius = `calc(${sizeVar} / 2 + ${STROKE}px)`;
const holeX = `calc(${sizeVar} * 13 / 10)`;
const holeY = `calc(${sizeVar} / 2)`;
const mask = `radial-gradient(circle ${radius} at ${holeX} ${holeY}, transparent ${radius}, #000 ${radius})`;

export const stack = style({
	display: 'flex',
	flexDirection: 'row',
	height: sizeVar,
});

export const avatar = style({
	flexShrink: 0,
	zIndex: stackOrder,
	width: sizeVar,
	height: sizeVar,
	selectors: {
		'&:not(:first-child)': { marginLeft: `calc(${sizeVar} / -5)` },
		'&:not(:last-child)': { WebkitMaskImage: mask, maskImage: mask },
	},
});

export const placeholder = style({
	borderRadius: '50%',
	backgroundColor: vars.palette.contrast_25,
	width: '100%',
	height: '100%',
});