import { style } from '@vanilla-extract/css';
import { colors } from '#/styles/colors';
import { vars } from '#/styles/contract.css';
import { borderRadius, iconSize, space, zIndex } from '#/styles/tokens.css';
export const root = style({
display: 'flex',
alignItems: 'center',
zIndex: zIndex.raised,
paddingBottom: space.md,
paddingLeft: space.lg,
pointerEvents: 'none',
});
export const button = style({
appearance: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 40,
height: 40,
border: `1px solid ${colors.borderContrastLow}`,
borderRadius: borderRadius.full,
background: colors.bg,
boxShadow: vars.shadow.sm,
cursor: 'pointer',
pointerEvents: 'auto',
});
export const arrowDownIcon = style({
width: iconSize.lg,
height: iconSize.lg,
color: colors.text,
});