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

import { vars } from '#/styles/contract.css';
import { borderRadius, space, zIndex } from '#/styles/tokens.css';

export const positioner = style({
	zIndex: zIndex.tooltip,
	maxWidth: 'var(--available-width)',
	maxHeight: 'var(--available-height)',
});

export const popup = style({
	transformOrigin: 'var(--transform-origin)',
	transitionDuration: '200ms',
	transitionProperty: 'opacity, transform',
	transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
	border: `1px solid ${vars.palette.contrast_100}`,
	borderRadius: borderRadius.md,
	boxShadow: vars.shadow.lg,
	backgroundColor: vars.palette.contrast_0,
	maxWidth: '100%',
	overflow: 'hidden',
	selectors: {
		'&[data-starting-style], &[data-ending-style]': { transform: 'scale(0.97)', opacity: 0 },
	},
});

const baseCard = style({
	boxSizing: 'border-box',
	display: 'flex',
	flexDirection: 'column',
});

export const liveCard = style([
	baseCard,
	{
		width: 350,
	},
]);

export const profileCard = style([
	baseCard,
	{
		padding: space.lg,
		width: 300,
	},
]);

export const loadingCard = style([
	baseCard,
	{
		alignItems: 'center',
		justifyContent: 'center',
		width: 300,
		minHeight: 200,
	},
]);

export const errorCard = style([
	loadingCard,
	{
		gap: space.xs,
		padding: space.lg,
		textAlign: 'center',
	},
]);

export const headerRow = style({
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'flex-start',
	justifyContent: 'space-between',
});

export const avatarLink = style({
	display: 'inline-flex',
	alignSelf: 'flex-start',
});

export const nameLink = style({
	display: 'flex',
	flexDirection: 'column',
	gap: space.xs,
	paddingTop: space.md,
	paddingBottom: space.sm,
	textDecoration: 'none',
});

export const statsRow = style({
	display: 'flex',
	flexDirection: 'row',
	flexWrap: 'wrap',
	gap: space.md,
	paddingTop: space.xs,
});

export const pills = style({
	display: 'flex',
	flexDirection: 'row',
	flexWrap: 'wrap',
	gap: space.xs,
});

export const description = style({
	paddingTop: space.md,
});

export const knownFollowers = style({
	display: 'flex',
	flexDirection: 'row',
	gap: space.sm,
	alignItems: 'center',
	paddingTop: space.md,
});