import { createVar, style } from '@vanilla-extract/css';
import { vars } from '#/styles/contract.css';
export const svg = style({
display: 'block',
flexShrink: 0,
overflow: 'visible',
});
export const bubbleScaleVar = createVar();
export const bubbleDelayVar = createVar();
export const bubble = style({
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transform: `scale(${bubbleScaleVar})`,
transformOrigin: 'center',
width: '100%',
height: '100%',
});
export const bubbleBorder = style({
borderWidth: 2,
borderStyle: 'solid',
borderRadius: '50%',
borderColor: vars.palette.contrast_0,
});
export const bubbleAnimated = style({
transitionDelay: bubbleDelayVar,
transitionDuration: '250ms',
transitionProperty: 'transform',
transitionTimingFunction: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
});
export const placeholderSizeVar = createVar();
export const placeholder = style({
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '50%',
backgroundColor: vars.palette.contrast_200,
width: placeholderSizeVar,
height: placeholderSizeVar,
color: vars.palette.contrast_0,
});