import { style } from '@vanilla-extract/css';
import { vars } from '#/styles/contract.css';
import { space } from '#/styles/tokens.css';
import { PANEL_WIDTH, SEARCH_INPUT_RADIUS } from './layout';
export const panel = style({
boxSizing: 'content-box',
display: 'flex',
flexDirection: 'column',
border: `1px solid ${vars.palette.contrast_100}`,
borderRadius: 12,
boxShadow: vars.shadow.lg,
backgroundColor: vars.palette.contrast_0,
width: PANEL_WIDTH,
overflow: 'hidden',
color: vars.palette.contrast_900,
});
export const searchRow = style({
zIndex: 1,
paddingTop: space.sm,
paddingInline: space.sm,
});
export const searchField = style({
marginBottom: -SEARCH_INPUT_RADIUS,
});
export const list = style({
position: 'relative',
});
export const empty = style({
display: 'flex',
position: 'absolute',
inset: 0,
alignItems: 'center',
justifyContent: 'center',
color: vars.palette.contrast_500,
fontSize: 14,
pointerEvents: 'none',
});