import { keyframes, styleVariants } from '@vanilla-extract/css';
import { vars } from '#/styles/contract.css';
import { recipe } from '#/styles/recipe';
import { iconSize } from '#/styles/tokens.css';
const spin = keyframes({ to: { transform: 'rotate(360deg)' } });
export const spinner = recipe(
{
base: {
display: 'inline-flex',
animation: `${spin} 500ms linear infinite`,
},
defaultVariants: {
color: 'white',
},
variants: {
color: {
default: {
color: vars.palette.contrast_900,
},
white: {
color: '#fff',
},
},
},
},
{ debugId: 'spinner' },
);
export const icon = styleVariants(iconSize, (size) => ({ width: size, height: size }));