import { style } from '@vanilla-extract/css';
import { vars } from '#/styles/contract.css';
import { layered } from '#/styles/layers';
import { components } from '#/styles/layers.css';
import { recipe } from '#/styles/recipe';
import { fontSize, iconSize, space, zIndex } from '#/styles/tokens.css';
export const trigger = style(
layered(components, {
boxSizing: 'border-box',
display: 'flex',
gap: 8,
alignItems: 'center',
justifyContent: 'space-between',
outline: 0,
border: `1px solid ${vars.palette.contrast_50}`,
borderRadius: 10,
backgroundColor: vars.palette.contrast_50,
paddingBlock: 8,
paddingInline: 12,
width: '100%',
maxWidth: 400,
color: vars.palette.contrast_1000,
fontSize: fontSize.sm,
cursor: 'pointer',
selectors: {
'&:focus-visible': { borderColor: vars.palette.primary_500 },
'&[data-popup-open]': { borderColor: vars.palette.primary_500 },
},
}),
);
export const value = style(
layered(components, {
overflow: 'hidden',
textAlign: 'left',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}),
);
export const icon = style(
layered(components, {
display: 'flex',
flexShrink: 0,
alignItems: 'center',
height: 20,
color: vars.palette.contrast_1000,
}),
);
export const positioner = style(
layered(components, {
zIndex: zIndex.popover,
}),
);
export const popup = recipe(
{
base: {
boxSizing: 'border-box',
display: 'flex',
position: 'relative',
flexDirection: 'column',
transformOrigin: 'var(--transform-origin)',
transitionDuration: '150ms',
transitionProperty: 'opacity, transform',
transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
border: `1px solid ${vars.palette.contrast_100}`,
borderRadius: 8,
boxShadow: vars.shadow.md,
backgroundColor: vars.palette.contrast_0,
maxWidth: 'var(--available-width)',
maxHeight: 'var(--available-height)',
overflow: 'hidden',
selectors: {
'&[data-starting-style], &[data-ending-style]': { transform: 'scale(0.95)', opacity: 0 },
},
},
defaultVariants: {
matchTriggerWidth: true,
},
variants: {
matchTriggerWidth: {
true: {
minWidth: 'var(--anchor-width)',
},
false: {
minWidth: 'fit-content',
},
},
},
},
{ debugId: 'popup', layer: components },
);
const SCROLL_ARROW_HEIGHT = 24;
export const list = style(
layered(components, {
flex: 1,
padding: space.xs,
minHeight: 0,
overflowY: 'auto',
scrollPaddingBlock: SCROLL_ARROW_HEIGHT + space.xs,
scrollPaddingInline: space.xs,
}),
);
const scrollArrow = style(
layered(components, {
display: 'flex',
right: 0,
left: 0,
alignItems: 'center',
justifyContent: 'center',
zIndex: 1,
height: SCROLL_ARROW_HEIGHT,
color: vars.palette.contrast_1000,
}),
);
export const scrollUpArrow = style([
scrollArrow,
layered(components, {
top: 0,
background: `linear-gradient(to bottom, ${vars.palette.contrast_0}, transparent)`,
}),
]);
export const scrollDownArrow = style([
scrollArrow,
layered(components, {
bottom: 0,
background: `linear-gradient(to top, ${vars.palette.contrast_0}, transparent)`,
}),
]);
const ITEM_LINE_HEIGHT = 20;
const ITEM_ICON_SIZE = 16;
const ITEM_BLOCK_PADDING = 5;
const ITEM_INLINE_PADDING = 8;
export const item = style(
layered(components, {
display: 'flex',
position: 'relative',
transitionDuration: '100ms',
transitionProperty: 'background-color, color',
outline: 0,
borderRadius: 4,
paddingRight: ITEM_INLINE_PADDING,
paddingLeft: ITEM_ICON_SIZE + ITEM_INLINE_PADDING * 2,
paddingBlock: ITEM_BLOCK_PADDING,
lineHeight: `${ITEM_LINE_HEIGHT}px`,
color: vars.palette.contrast_1000,
fontSize: fontSize.md_sub,
cursor: 'pointer',
userSelect: 'none',
selectors: {
'&[data-highlighted]': { backgroundColor: vars.palette.primary_50 },
'&[data-selected]': { fontWeight: 600 },
},
}),
);
export const indicator = style(
layered(components, {
position: 'absolute',
top: ITEM_BLOCK_PADDING + (ITEM_LINE_HEIGHT - ITEM_ICON_SIZE) / 2,
left: 8,
color: vars.palette.primary_600,
}),
);
export const chevronIcon = style({
width: iconSize.xs,
height: iconSize.xs,
});
export const checkIcon = style({
width: iconSize.sm,
height: iconSize.sm,
});