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

import { vars } from '#/styles/contract.css';
import { roundToPx } from '#/styles/round';
import { fontLeading, fontSize, iconSize } from '#/styles/tokens.css';

export const field = style({
	boxSizing: 'border-box',
	display: 'flex',
	gap: 8,
	alignItems: 'center',
	border: '1px solid transparent',
	borderRadius: 10,
	backgroundColor: vars.palette.contrast_50,
	paddingInline: 12,
	width: '100%',
	cursor: 'text',
	selectors: {
		'&:hover': { borderColor: vars.palette.contrast_100 },
		'&:has(input:focus)': { borderColor: vars.palette.primary_500, backgroundColor: vars.palette.primary_25 },
	},
});

export const icon = style({
	width: iconSize.lg,
	height: iconSize.lg,
	flexShrink: 0,
	color: vars.palette.contrast_500,
	pointerEvents: 'none',
	selectors: {
		[`${field}:hover &`]: { color: vars.palette.contrast_800 },
		[`${field}:has(input:focus) &`]: { color: vars.palette.primary_500 },
	},
});

export const input = style({
	appearance: 'none',
	flex: 1,
	margin: 0,
	outline: 'none',
	border: 'none',
	backgroundColor: 'transparent',
	paddingBlock: 10,
	paddingInline: 0,
	minWidth: 0,
	lineHeight: roundToPx(`calc(${fontSize.md} * ${fontLeading.md})`),
	color: vars.palette.contrast_1000,
	fontFamily: 'inherit',
	fontSize: fontSize.md,
	selectors: {
		'&::placeholder': { color: vars.palette.contrast_500, userSelect: 'none' },
	},
});

export const clear = style({
	flexShrink: 0,
	selectors: {
		[`${field} > &`]: { marginInlineEnd: -6 },
	},
});

export const slot = style({
	display: 'flex',
	flexShrink: 0,
	gap: 4,
	alignItems: 'center',
	marginInlineEnd: -6,
});