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

import { colors } from '#/styles/colors';
import { vars } from '#/styles/contract.css';
import { emojiFontFamily, iconSize } from '#/styles/tokens.css';

export const trigger = style({
	appearance: 'none',
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'center',
	transitionDuration: '100ms',
	transitionProperty: 'opacity',
	border: 'none',
	borderRadius: 999,
	background: 'transparent',
	padding: 4,
	cursor: 'pointer',
	selectors: {
		'&:hover': { backgroundColor: vars.palette.contrast_25 },
	},
});

export const popup = style({
	transformOrigin: 'var(--transform-origin)',
	transitionDuration: '150ms',
	transitionProperty: 'opacity, transform',
	transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
	outline: 0,
	selectors: {
		'&[data-starting-style], &[data-ending-style]': { transform: 'scale(0.95)', opacity: 0 },
	},
});

export const quickRow = style({
	display: 'flex',
	gap: 4,
	alignItems: 'center',
	border: `1px solid ${vars.palette.contrast_100}`,
	borderRadius: 999,
	boxShadow: vars.shadow.lg,
	backgroundColor: vars.palette.contrast_0,
	padding: 6,
});

export const reaction = style({
	appearance: 'none',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	transitionDuration: '100ms',
	transitionProperty: 'transform',
	border: '1px solid transparent',
	borderRadius: 999,
	background: 'transparent',
	width: 34,
	height: 34,
	cursor: 'pointer',
	selectors: {
		'&:hover': { transform: 'scale(1.1)' },
		'&:focus-visible': { outline: 'none', borderColor: vars.palette.contrast_1000 },
	},
});

export const reactionSelected = style({
	backgroundColor: vars.palette.contrast_100,
});

export const reactionDisabled = style({
	opacity: 0.7,
	selectors: {
		'&:hover': { transform: 'none' },
	},
});

export const reactionGlyph = style({
	lineHeight: 1,
	fontFamily: emojiFontFamily,
	fontSize: 28,
});

export const expandButton = style({
	appearance: 'none',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	border: '1px solid transparent',
	borderRadius: 999,
	backgroundColor: vars.palette.contrast_50,
	width: 34,
	height: 34,
	color: vars.palette.contrast_700,
	cursor: 'pointer',
	selectors: {
		'&:hover': { backgroundColor: vars.palette.contrast_100 },
		'&:focus-visible': { outline: 'none', borderColor: vars.palette.contrast_1000 },
	},
});

export const plusIcon = style({
	width: iconSize.lg,
	height: iconSize.lg,
});

export const triggerIcon = style({
	width: iconSize.lg,
	height: iconSize.lg,
	color: colors.textContrastMedium,
});