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

import { vars } from '#/styles/contract.css';
import { roundToPx } from '#/styles/round';
import { borderRadius } from '#/styles/tokens.css';

const clusterBase = style({
	display: 'flex',
	position: 'absolute',
	right: 4,
	bottom: 4,
	flexDirection: 'row',
});

export const cluster = styleVariants({
	regular: [clusterBase, { gap: 3 }],
	large: [clusterBase, { gap: 4 }],
});

const boxBase = style({
	boxSizing: 'border-box',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	opacity: 0.8,
	backgroundColor: vars.palette.contrast_25,
});

export const box = styleVariants({
	singleRegular: [boxBase, { borderRadius: borderRadius.xs, padding: 3 }],
	singleLarge: [boxBase, { borderRadius: borderRadius.xs, padding: 5 }],
	galleryRegular: [boxBase, { borderRadius: borderRadius.sm, padding: 4 }],
	galleryLarge: [boxBase, { borderRadius: borderRadius.sm, padding: 6 }],
});

export const icon = style({
	display: 'block',
	color: vars.palette.contrast_900,
});

export const altSmall = style({
	lineHeight: roundToPx('calc(8px * 1.3)'),
	fontSize: 8,
});