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

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

export const positioner = style({
	zIndex: zIndex.tooltip,
});

export const popup = style({
	boxSizing: 'border-box',
	display: 'flex',
	transformOrigin: 'var(--transform-origin)',
	transitionDuration: '150ms',
	transitionProperty: 'opacity, transform',
	transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
	borderRadius: 6,
	backgroundColor: vars.palette.contrast_100,
	paddingBlock: 6,
	paddingInline: 10,
	whiteSpace: 'nowrap',
	selectors: {
		'&[data-starting-style], &[data-ending-style]': {
			transform: 'scale(0.95)',
			opacity: 0,
		},
	},
});